ECharts 是一款由百度開發的優秀的圖表庫,可以用來實現各種圖表的可視化效果。在使用 ECharts 時,常常需要添加 json 數據來構建圖表。下面我們來介紹如何添加 json 數據。
首先,我們需要在 HTML 文件中引入 ECharts 庫,可以通過以下代碼實現:
<!-- 引入 ECharts 庫 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
接下來,我們需要設置一個 DOM 節點,用于存放圖表,這里我們創建一個 div 節點,并設置一個 id:
<!-- 設置 DOM 節點 --> <div id="myChart"></div>
接著,我們需要編寫 json 數據,這里以柱狀圖為例:
let data = { // x軸數據 "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, // y軸數據 "yAxis": { "type": "value" }, // 數據 "series": [{ "data": [120, 200, 150, 80, 70, 110, 130], "type": "bar" }] };
最后,我們將數據和 DOM 節點傳入 ECharts 的初始化函數即可實現圖表的繪制:
let myChart = echarts.init(document.getElementById("myChart")); myChart.setOption(data);
以上就是添加 json 數據的方法,希望對您有所幫助。
上一篇python 索引和步長
下一篇vue判斷左右滑動