echarts3 动态图的问题

官方那个折现图的动态跑不起，不知道为什么。

网上找了一个网友的能跑，但是他改成累积了，地址：

http://m.blog.csdn.net/mighty13/article/details/78055537

001var app = {};
002       option = {
003    title: {
004        text: '动态数据',
005        subtext: '纯属虚构'
006    },
007    tooltip: {
008        trigger: 'axis'
009    },
010    legend: {
011        data:['最新成交价', '预购队列']
012    },
013    toolbox: {
014        show: true,
015        feature: {
016            dataView: {readOnly: false},
017            restore: {},
018            saveAsImage: {}
019        }
020    },
021    dataZoom: {
022        show: true,
023        start: 0,
024        end: 100
025    },
026    xAxis: [
027        {
028            type: 'category',
029            boundaryGap: true,
030            data: (function (){
031                var now = new Date();
032                var res = [];
033                var len = 0;
034                return res;
035            })()
036        },
037        {
038            type: 'category',
039            boundaryGap: true,
040            data: (function (){
041                var res = [];
042                var len = 0;
043                return res;
044            })()
045        }
046    ],
047    yAxis: [
048        {
049            type: 'value',
050            scale: true,
051            name: '价格',
052            max: 20,
053            min: 0,
054            boundaryGap: [0.2, 0.2]
055        },
056        {
057            type: 'value',
058            scale: true,
059            name: '预购量',
060            max: 1200,
061            min: 0,
062            boundaryGap: [0.2, 0.2]
063        }
064    ],
065    series: [
066        {
067            name:'预购队列',
068            type:'bar',
069            xAxisIndex: 1,
070            yAxisIndex: 1,
071            data:(function (){
072                var res = [];
073                var len = 10;
074 
075                return res;
076            })()
077        },
078        {
079            name:'最新成交价',
080            type:'line',
081            data:(function (){
082                var res = [];
083                var len = 0;
084                return res;
085            })()
086        }
087    ]
088};
089clearInterval(app.timeTicket);
090app.count = 1;
091app.timeTicket = setInterval(function (){
092    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
093 
094    var data0 = option.series[0].data;
095    var data1 = option.series[1].data;
096    data0.push();
097    data0.push(Math.round(Math.random() * 1000));
098    data1.push();
099    data1.push((Math.random() * 10).toFixed(1) - 0);
100 
101    option.xAxis[0].data.push();
102    option.xAxis[0].data.push(axisData);
103    option.xAxis[1].data.push();
104    option.xAxis[1].data.push(app.count++);
105 
106    myChart.setOption(option);
107}, 1000);

我不想要累积的，然后在官方的柱形图里，找到一个和上面这个网友类似的，复制下来，跑不起，报错是app未定义，加上一句，跑起来了

001var app = {};
002    option = {
003        title: {
004            text: '动态数据',
005            subtext: '纯属虚构'
006        },
007        tooltip: {
008            trigger: 'axis',
009            axisPointer: {
010                type: 'cross',
011                label: {
012                    backgroundColor: '#283b56'
013                }
014            }
015        },
016        legend: {
017            data:['最新成交价', '预购队列']
018        },
019        toolbox: {
020            show: true,
021            feature: {
022                dataView: {readOnly: false},
023                restore: {},
024                saveAsImage: {}
025            }
026        },
027        dataZoom: {
028            show: false,
029            start: 0,
030            end: 100
031        },
032        xAxis: [
033            {
034                type: 'category',
035                boundaryGap: true,
036                data: (function (){
037                    var now = new Date();
038                    var res = [];
039                    var len = 10;
040                    while (len--) {
041                        res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
042                        now = new Date(now - 2000);
043                    }
044                    return res;
045                })()
046            },
047            {
048                type: 'category',
049                boundaryGap: true,
050                data: (function (){
051                    var res = [];
052                    var len = 10;
053                    while (len--) {
054                        res.push(len + 1);
055                    }
056                    return res;
057                })()
058            }
059        ],
060        yAxis: [
061            {
062                type: 'value',
063                scale: true,
064                name: '价格',
065                max: 30,
066                min: 0,
067                boundaryGap: [0.2, 0.2]
068            },
069            {
070                type: 'value',
071                scale: true,
072                name: '预购量',
073                max: 1200,
074                min: 0,
075                boundaryGap: [0.2, 0.2]
076            }
077        ],
078        series: [
079            {
080                name:'预购队列',
081                type:'bar',
082                xAxisIndex: 1,
083                yAxisIndex: 1,
084                data:(function (){
085                    var res = [];
086                    var len = 10;
087                    while (len--) {
088                        res.push(Math.round(Math.random() * 1000));
089                    }
090                    return res;
091                })()
092            },
093            {
094                name:'最新成交价',
095                type:'line',
096                data:(function (){
097                    var res = [];
098                    var len = 0;
099                    while (len < 10) {
100                        res.push((Math.random()*10 + 5).toFixed(1) - 0);
101                        len++;
102                    }
103                    return res;
104                })()
105            }
106        ]
107    };
108 
109    app.count = 11;
110    setInterval(function (){
111        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
112        var data0 = option.series[0].data;
113        var data1 = option.series[1].data;
114        data0.shift();
115        data0.push(Math.round(Math.random() * 1000));
116        data1.shift();
117        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
118        option.xAxis[0].data.shift();
119        option.xAxis[0].data.push(axisData);
120        option.xAxis[1].data.shift();
121        option.xAxis[1].data.push(app.count++);
122 
123        myChart.setOption(option);
124    }, 1100);

之前改的思路是对的，但是对echarts不熟悉，所以改了半天都没改成功。echarts2的动态图，拿到3下面来，跑不起。

------------正文已结束，感谢您的阅读（折雨的天空）--------------------

转载请注明本文标题和链接：《echarts3 动态图的问题》

取消回复发表评论