Echarts如何實現動態數據更新

ECharts 是一個使用 JavaScript 實現的開源可視化庫，可以用于制作各種圖表。要實現動態數據更新，你可以使用 ECharts 提供的 setOption 方法來更新圖表的配置項和數據。以下是一個簡單的示例：

1. 首先，確保你已經在 HTML 頁面中引入了 ECharts 庫：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 在 HTML 頁面中創建一個用于顯示圖表的容器：

<div id="myChart" style="width: 600px; height: 400px;"></div>

3. 編寫 JavaScript 代碼來初始化圖表并設置初始數據：

// 基于準備好的容器（這里是 id 為 'myChart' 的 div），初始化 echarts 實例
var myChart = echarts.init(document.getElementById('myChart'));

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '動態數據更新示例'
    },
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10]
    }]
};

// 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);

4. 使用定時器或其他方法來模擬動態數據更新：

// 模擬動態數據
function getRandomData() {
    return Math.round(Math.random() * 50);
}

// 定時更新數據
setInterval(function () {
    // 獲取新的數據
    var newData = option.series[0].data.map(function () {
        return getRandomData();
    });

    // 更新圖表的配置項和數據
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}, 2000); // 每隔 2000 毫秒（2 秒）更新一次數據

這樣，圖表就會每隔 2 秒更新一次數據。你可以根據實際需求調整更新頻率和數據來源。