ECharts 動態數據實例完整代碼：官方示例跑不起來怎麼辦？

常見失敗原因

1. 模塊按需加載缺失：require 中未包含 'echarts/chart/line'、'echarts/chart/bar'。
2. 代碼片段拼接錯誤：option 定義在 require 回調外，myChart 未初始化就調用 addData。
3. ECharts 版本不匹配：官方示例多為 ECharts 2/3 寫法，ECharts 4/5 棄用 addData，改用 setOption + appendData。

完整可運行 HTML（ECharts 5.x 兼容）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 動態數據演示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('main'));
        var option = {
            title: { text: '動態數據', subtext: '純屬虛構' },
            tooltip: { trigger: 'axis' },
            legend: { data: ['最新成交價', '預購隊列'] },
            toolbox: { show: true, feature: { dataView: {}, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } },
            xAxis: [
                { type: 'category', boundaryGap: true, data: [] },
                { type: 'category', boundaryGap: true, data: [] }
            ],
            yAxis: [
                { type: 'value', name: '價格' },
                { type: 'value', name: '預購量' }
            ],
            series: [
                { name: '預購隊列', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [] },
                { name: '最新成交價', type: 'line', data: [] }
            ]
        };
        chart.setOption(option);

        // 初始化 10 條數據
        var now = new Date();
        var categories = [], prices = [], volumes = [];
        for (var i = 9; i >= 0; i--) {
            var t = new Date(now - i * 2000);
            categories.push(t.toLocaleTimeString().replace(/^\D*/, ''));
            prices.push((Math.random() * 10 + 5).toFixed(1) - 0);
            volumes.push(Math.round(Math.random() * 1000));
        }
        chart.setOption({
            xAxis: [{ data: categories }, { data: categories.map((_, i) => i + 1) }],
            series: [{ data: volumes }, { data: prices }]
        });

        // 定時追加數據（ECharts 5 使用 appendData）
        var lastPrice = prices[prices.length - 1];
        setInterval(function () {
            lastPrice += Math.random() * (Math.random() > 0.5 ? 1 : -1);
            lastPrice = Number(lastPrice.toFixed(1));
            var timeLabel = new Date().toLocaleTimeString().replace(/^\D*/, '');

            chart.appendData({
                seriesIndex: 0, // bar
                data: [Math.round(Math.random() * 1000)]
            });
            chart.appendData({
                seriesIndex: 1, // line
                data: [lastPrice]
            });
            // 更新 X 軸標籤（需重新 setOption xAxis.data）
            categories.push(timeLabel);
            if (categories.length > 20) categories.shift(); // 保留最近 20 點
            chart.setOption({ xAxis: [{ data: categories }, { data: categories.map((_, i) => i + 1) }] });
        }, 2100);
    </script>
</body>
</html>

關鍵點總結

• 引用 echarts.min.js 即可，無需 require.config（除非模塊化構建）。
• 動態更新用 chart.appendData({seriesIndex, data})（ECharts 4+）。
• X 軸標籤同步更新需重新 setOption({xAxis: [{data: ...}]})。
• 數據量大時開啟 dataZoom 或限制最大點數防止卡頓。