圖表-百度echarts官方實例動態數據怎麼跑起來？一直粘貼官方代碼，就是跑不起來。

百度echarts官方實例動態數據怎麼跑起來？一直粘貼官方代碼，就是跑不起來。

這是基礎代碼，option是空的

 <div id="main" style="height:400px"></div>
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
      <script type="text/javascript">
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require
        (
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) 
            {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                var option = 
                {

                }; 
                myChart.setOption(option); 
            }
        );
    </script>

這是官方代碼（進入百度echarts官網，實例，其他，動態數據即是）：

 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  // 坐標軸標簽
        ]
    ]);
}, 2100);

這段官方代碼要怎麼放？或者直接給我一份完整的html最好不過了

最佳回答：

我覺得你沒理解echarts的機制，可以多讀讀源碼。
下面這樣，無非實現一個動態更新數據。

 <div id="main" style="height:400px"></div>
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
      <script type="text/javascript">
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require
        (
            [
                'echarts',
                'echarts/chart/line' ,
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) 
            {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                var 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;
            })()
        }
    ]
};; 
                myChart.setOption(option); 

                var lastData = 11;
var axisData;
var timeTicket;
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  // 坐標軸標簽
        ]
    ]);
}, 2100);
            }
        );
    </script>