echarts动态图表

来源：互联网发布：淘宝宝贝详情批量修改编辑：程序博客网时间：2024/04/27 16:04
option = {    title: {        text: '动态数据',        subtext: '纯属虚构'    },    tooltip: {        trigger: 'axis'    },    legend: {        // data:['最新成交价', '预购队列']        data:['最新成交价']    },    toolbox: {        show: true,        feature: {            dataView: {readOnly: false},            restore: {},            saveAsImage: {}        }    },    dataZoom: {        show: false,        start: 0,        end: 100    },    xAxis: [        {            type: 'category',            // boundaryGap: false,//此为面积图设置            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: '价格',            max: 30,            min: 0,            boundaryGap: [0.2, 0.2]        },        // {        //     type: 'value',        //     scale: true,        //     name: '预购量',        //     max: 1200,        //     min: 0,        //     boundaryGap: [0.2, 0.2]        // }    ],    series: [        {            name:'最新成交价',            type:'line',            // areaStyle: {normal: {}},//此为面积图设置            data:(function (){                var res = [];                var len = 0;                while (len < 10) {                    res.push((Math.random()*10 + 5).toFixed(1) - 0);                    len++;                }                return res;            })(),            // 下面的makeLine为设置警告阀值            markLine: {                silent: true,                data: [{                    yAxis: 20                }]            }        },        // {        //     name:'预购队列',        //     type:'bar',        //     // type: 'line',        //     xAxisIndex: 1,        //     yAxisIndex: 1,        //     data:(function (){        //         var res = [];        //         var len = 10;        //         while (len--) {        //             res.push(Math.round(Math.random() * 1000));        //         }        //         return res;        //     })()        // }    ]};// app.count = 11;setInterval(function (){    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');    var data0 = option.series[0].data;    data0.shift();    data0.push((Math.random() * 10 + 5).toFixed(1) - 0);        // var data1 = option.series[1].data;    // data1.shift();    // data1.push(Math.round(Math.random() * 1000));    option.xAxis[0].data.shift();    option.xAxis[0].data.push(axisData);        // option.xAxis[1].data.shift();    // option.xAxis[1].data.push(app.count++);    myChart.setOption(option);}, 2000);
0 0