echarts动态载入数据

秋海棠 发布于 2014/12/15 15:31
阅读 49K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

在echarts的动态载入中,能否把x轴和序列中的数据一开始置为[],然后加入从数据库获取到最新的数据,如何解决数组长度小于1 的异常?或者你有其他的建议方法

这是官网代码:

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价', '预购队列']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : false,
        start : 0,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            data : (function (){
                var now = new Date();
                var res = [];
                var len = 10;
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return res;
            })()
        },
        {
            type : 'category',
            boundaryGap : true,
            data : (function (){
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(len + 1);
                }
                return res;
            })()
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '价格',
            boundaryGap: [0.2, 0.2]
        },
        {
            type : 'value',
            scale: true,
            name : '预购量',
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'预购队列',
            type:'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:(function (){
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(Math.round(Math.random() * 1000));
                }
                return res;
            })()
        },
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 10;
                while (len--) {
                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
                }
                return res;
            })()
        }
    ]
};
var lastData = 11;
var axisData;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
    lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
    lastData = lastData.toFixed(1) - 0;
    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
    
    // 动态数据接口 addData
    myChart.addData([
        [
            0,        // 系列索引
            Math.round(Math.random() * 1000), // 新增数据
            true,     // 新增数据是否从队列头部插入
            false     // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
        ],
        [
            1,        // 系列索引
            lastData, // 新增数据
            false,    // 新增数据是否从队列头部插入
            false,    // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
            axisData  // 坐标轴标签
        ]
    ]);
}, 2000);
                  

这是我的代码,其实就是把xAxisseries的数据清空了,注释掉了一部分代码,只保留了示例中的折线图:

    option = {
            title : {
                text: '动态数据',
                subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最新成交价']
//            data:['最新成交价', '预购队列']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            dataZoom : {
                show : false,
                start : 0,
                end : 100
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    data :[]
//                        (function (){
//                        var now = new Date();
//                        var res = [];
//                        var len = 10;
//                        while (len--) {
//                            res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
//                            now = new Date(now - 2000);
//                        }
//                        return res;
//                    })()
                }
//                ,
//                {
//                    type : 'category',
//                    boundaryGap : true,
//                    data : (function (){
//                        var res = [];
//                        var len = 10;
//                        while (len--) {
//                            res.push(len + 1);
//                        }
//                        return res;
//                    })()
//                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale: true,
                    name : '价格',
                    boundaryGap: [0.2, 0.2]
                }
//                ,
//                {
//                    type : 'value',
//                    scale: true,
//                    name : '预购量',
//                    boundaryGap: [0.2, 0.2]
//                }
            ],
            series : [
//                {
//                    name:'预购队列',
//                    type:'bar',
//                    xAxisIndex: 1,
//                    yAxisIndex: 1,
//                    data:(function (){
//                        var res = [];
//                        var len = 10;
//                        while (len--) {
//                            res.push(Math.round(Math.random() * 1000));
//                        }
//                        return res;
//                    })()
//                },
                {
                    name:'最新成交价',
                    type:'line',
                    data:[]
//                        (function (){
//                        var res = [];
//                        var len = 10;
//                        while (len--) {
//                            res.push((Math.random()*10 + 5).toFixed(1) - 0);
//                        }
//                        return res;
//                    })()
                }
            ]
        };
    
    myChart.setOption(option);
        var lastData = 11;
        var axisData;
//        clearInterval(timeTicket);
        timeTicket = setInterval(function (){
            lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
            lastData = lastData.toFixed(1) - 0;
            axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
            
            // 动态数据接口 addData
            myChart.addData([
//                [
//                    0,        // 系列索引
//                    Math.round(Math.random() * 1000), // 新增数据
//                    true,     // 新增数据是否从队列头部插入
//                    false     // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
//                ],
                [
                    0,        // 系列索引
                    lastData, // 新增数据
                    true,    // 新增数据是否从队列头部插入
                    true,    // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
                    axisData  // 坐标轴标签
                ]
            ]);
        }, 2000);
}

加载中
0
i6ma
i6ma

抱歉,并没有看楼主的代码。

先 init 一个图表实例,再myChart.showLoading();
ajax 取数,用数据拼装 option
最后 myChart.setOption();

0
让往事随风
让往事随风

1、前台JSP页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.     <title>ECharts</title>  
  8.     <script type="text/javascript" src="${ctx}/plugins/echarts-2.2.1/echarts.js"></script>  
  9.     <script type="text/javascript" src="${ctx}/plugins/jquery-1.8.3/jquery-1.8.3.min.js"></script>  
  10.     <script type="text/javascript">  
  11.         // 配置路径  
  12.         require.config({  
  13.             paths: {  
  14.                 echarts: '${ctx}/plugins/echarts-2.2.1'  
  15.             }  
  16.         });  
  17.           
  18.         // 按需加载  
  19.         require(  
  20.             [  
  21.                 'echarts',   
  22.                 'echarts/chart/bar',  
  23.                 'echarts/chart/line'  
  24.             ],  
  25.             function (ec) {  
  26.                 var chart = document.getElementById('chart');  
  27.                 var echart = ec.init(chart);  
  28.                   
  29.                 echart.showLoading({  
  30.                     text: '正在努力加载中...'  
  31.                 });  
  32.                   
  33.                 var categories = [];  
  34.                 var values = [];  
  35.                   
  36.                 // 同步执行  
  37.                 $.ajaxSettings.async = false;  
  38.                   
  39.                 // 加载数据  
  40.                 $.getJSON('${ctx}/dataAccessServlet', function (json) {  
  41.                     categories = json.categories;  
  42.                     values = json.values;  
  43.                 });  
  44.                   
  45.                 var option = {  
  46.                     tooltip: {  
  47.                         show: true  
  48.                     },  
  49.                     legend: {  
  50.                         data: ['销量']  
  51.                     },  
  52.                     xAxis: [  
  53.                         {  
  54.                             type: 'category',  
  55.                             data: categories  
  56.                         }  
  57.                     ],  
  58.                     yAxis: [  
  59.                         {  
  60.                             type: 'value'  
  61.                         }  
  62.                     ],  
  63.                     series: [  
  64.                         {  
  65.                             'name': '销量',  
  66.                             'type': 'bar',  
  67.                             'data': values  
  68.                         }  
  69.                     ]  
  70.                 };  
  71.                   
  72.                 echart.setOption(option);  
  73.                 echart.hideLoading();  
  74.             }  
  75.         );  
  76.     </script>  
  77. </head>  
  78. <body>  
  79.     <div id="chart" style="width: 580px;height: 420px;margin: 0 auto;border: 1px solid gray;"></div>  
  80. </body>  
  81. </html>  

2、后台JSON数据

  1. protected void doPost(HttpServletRequest request,  
  2.         HttpServletResponse response) throws ServletException, IOException {  
  3.     String[] categories = {"鞋""衬衫""外套""牛仔裤"};  
  4.     Integer[] values = {805075100};  
  5.     Map<String, Object> json = new HashMap<String, Object>();  
  6.     json.put("categories", categories);  
  7.     json.put("values", values);  
  8.     JsonUtils.writeJson(json, request, response);  
  9. }  


3、最终实现效果

echarts动态载入数据:http://edu.51cto.com/course/course_id-1703.html

0
salormoom
salormoom

那个动态数据接口是干嘛的,用来从后台后去数据的嘛?

返回顶部
顶部