Echarts 是一個強大的數據可視化庫,相信很多開發者都在開發中使用過。但是對于一些愛好者來說,可能會覺得 Echarts 的數據發送方式并不是很清楚。本文將會介紹 Echarts 是怎么發送 JSON 數據的。
let chartData = {
name: 'echarts',
type: 'bar',
data: [100, 200, 150, 300, 250, 400]
}
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [chartData]
}
let myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
從上述代碼可以看出,Echarts 實例化之后,我們可以通過 setOption 方法把我們的數據傳遞給 Echarts 并繪制出來。我們只需要將我們的數據以 JSON 的形式傳遞給 setOption 方法即可。上述代碼中,我們定義了一個 chartData 對象來存儲我們的數據,然后在 option 對象中將 chartData 數據添加到了 series 中。最后,我們將 option 對象傳遞給 setOption 方法,即可看到圖表被繪制出來。
當然,我們也可以通過 AJAX 等方式來獲取我們的數據,然后以 JSON 的形式傳遞給 setOption 方法。例如:
$.get('http://your-api-url', function(data) {
let option = {
xAxis: {
type: 'category',
data: data.categories // 獲取 x 軸數據
},
yAxis: {
type: 'value'
},
series: [{
name: 'echarts',
type: 'line',
data: data.data // 獲取 y 軸數據
}]
}
let myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
})
上述代碼中,我們通過 AJAX 請求獲取了我們所需的數據,并將其以 JSON 格式傳遞給了 setOption 方法。通過這種方式,我們可以實現在 Echarts 中動態展示數據的功能。