echarts 是一個功能強大的圖表庫,讓我們能夠以各種方式呈現和分析數據。一個極好的特點是,在 echarts 中使用 JSON(JavaScript Object Notation)編碼的數據,非常方便動態更新和更改。
要動態改變 echarts 圖表,我們需要做的是通過 JS(JavaScript)代碼來更新我們使用的 JSON 數據。以下是一個能夠實現此功能的簡單實例:
var myChart = echarts.init(document.getElementById('myChart')); // 獲得我們想要更新的圖表 var option = { // 初始數據 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; myChart.setOption(option); // 首次加載圖表 // 當我們想要改變數據時 var newData = [ {value: Math.random() * 1000}, {value: Math.random() * 1000}, {value: Math.random() * 1000}, {value: Math.random() * 1000}, {value: Math.random() * 1000}, {value: Math.random() * 1000}, {value: Math.random() * 1000}, ]; var newOption = { series: [{ data: newData, type: 'line' }] }; myChart.setOption(newOption); // 更新圖表
在這個例子中,我們首先使用初始的數據來創建 echarts 圖表。之后,我們定義了能夠生成新數據的函數。最后,我們使用新的數據來更新已經存在的圖表。這就是動態更新 echarts 圖表的完整過程。
總之,echarts 中的數據更新是非常靈活和簡單的。只要您使用了正確的 JSON 數據,您就可以使用 JS 代碼隨時更改您的圖表內容。