ECharts 是一個優秀的數據可視化庫,它支持導入各種格式的數據,如 csv、json 等。而本文主要介紹如何使用 ECharts 導入 json 格式的數據。
首先,在頁面中引入 ECharts 庫:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
接下來,定義一個容器用來展示圖表:
<div id="chart-container" style="height: 400px;"></div>
然后,創建一個 ECharts 實例,并將容器作為參數傳入:
let chart = echarts.init(document.getElementById('chart-container'));
接著,定義一個 json 數據:
let data = { "title": { "text": "ECharts Demo" }, "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" } ] };
最后,將 json 數據設置到 ECharts 實例中:
chart.setOption(data);
以上就是使用 ECharts 導入 json 格式數據的步驟。通過這種方式,可以輕松地將數據導入到 ECharts 中,從而實現各種可視化效果。
上一篇python 類變量繼承
下一篇vue寫側邊樹