ECharts是一款開源的可視化庫,提供了多種圖表類型,如折線圖、柱狀圖、餅圖等。本文主要介紹ECharts中的折線圖,并使用JSON格式的數據進行繪制。
首先,ECharts的環境準備需要引入echarts.js文件,代碼示例如下:
接著,可以使用以下代碼創建一個DOM容器,準備放置折線圖:
然后,為了創建一條折線,需要利用JSON格式的數據進行配置。下面是一個包含兩個系列的數據示例。
var option = { title: { text: '折線圖示例' }, tooltip: { trigger: 'axis' }, legend: { data:['系列1','系列2'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['1','2','3','4','5','6','7'] }, yAxis: { type: 'value' }, series: [ { name:'系列1', type:'line', stack: '總量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'系列2', type:'line', stack: '總量', data:[220, 182, 191, 234, 290, 330, 310] } ] };
最后,利用ECharts的API,將DOM容器和數據選項進行配置和繪制:
var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option);
以上是利用JSON格式數據進行ECharts折線圖繪制的基本方法,使用靈活,能夠快速展示數據。
上一篇c 如何拼湊json
下一篇python 索引列應為