Echarts 是一款優秀的數據可視化庫,它可以以餅狀圖、折線圖、柱狀圖等形式,將復雜數據轉化為直觀的圖表。 如果你想讓 Echarts 接收Json數據來呈現圖表,那么請跟著下面的步驟來實現。
1. 首先,我們需要在 html 頁面中引入 Echarts 的 js 庫,代碼如下:
<script type="text/javascript" src="echarts.min.js"></script>
2. 在html頁面內預留一個 div 元素,作為圖表的容器,代碼如下:
<div id="chart-container" style="width: 600px;height:400px"></div>
3. 在js腳本中定義 Json 數據,代碼如下:
var data = { "labels": ["星期一", "星期二", "星期三", "星期四", "星期五"], "values": [120, 200, 150, 80, 70] };
4. 創建 Echarts 實例,并將數據綁定到圖表上,代碼如下:
var chart = echarts.init(document.getElementById("chart-container")); // 使用之前定義的數據創建柱狀圖 chart.setOption({ xAxis: { type: 'category', data: data.labels }, yAxis: { type: 'value' }, series: [{ data: data.values, type: 'bar' }] });
5. 最后一步,讓圖表顯示在頁面上,代碼如下:
chart.resize(); // 適應頁面 chart.showLoading(); // 顯示加載動畫 chart.hideLoading(); // 顯示圖表
Echarts 的優秀之處在于,它可以接收來自后端的 Json 數據,從而可以動態地呈現各種形式的實時數據。在日常開發中,學習如何將Json 數據綁定到圖表上,是非常有用的。希望本文能夠幫助您更好地運用 Echarts。
上一篇vue elui 后端
下一篇python 求水仙花