在web開發中，數據可視化是非常重要的一部分。而ECharts作為一個非常流行的數據可視化庫，它的強大之處不僅在于可視化效果的吸引力，更在于因其靈活、易用和跨平臺，成為了業內開發人員的首選。在使用ECharts進行開發時，我們通常會使用數據來動態生成圖表。其中，JSON是一種常用的數據交換格式，那么如何調用JSON數據呢？下面讓我們一起來了解。
1. 后端數據處理及存儲
在開發數據可視化時，通常使用后端技術對數據進行處理，生成滿足ECharts要求的JSON數據格式。大部分后端都支持應用json_encode()函數來快速轉換后端數據成JSON格式，然后存儲到文件或數據庫中。
//PHP 輸出 JSON 格式數據"value1", "key2"=>"value2");
header('Content-type: application/json');
echo json_encode($arry);
?>2. 調用JSON數據
當數據存儲完畢，我們便可以在前端通過Ajax的方式請求數據，然后調用ECharts，進行圖表的渲染。
//HTML 顯示 ECharts 圖表
<!doctype html>
<html>
<head>
<script src="//echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<div id="myChart" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('myChart'));
$.ajax({
url: 'echart.json', // 本地 json 數據文件位置
type: 'GET',
dataType: 'json',
success: function (data) {
// 填入數據
myChart.setOption({
series: [{
// 根據名字對應到相應的系列
name: '銷量',
type: 'bar',
data: data
}]
});
}
});
</script>
</html>這樣，我們就可以通過前后端的配合，完美實現JSON數據的調用，生成各種精美的圖表，并展現我們所需的數據變化趨勢。
上一篇python 類 繼承類
下一篇python 類中的列表