ECharts是一款優秀的數據可視化工具,它能夠直觀地呈現復雜的數據關系和規律。它的圖表類型、交互方式等多樣性也讓它成為了眾多商業解決方案的首選。
封裝好的json是ECharts創建圖表所依賴的數據源,它應該是一個符合ECharts數據格式要求的Json字符串。
下面,我們來看看如何使用ECharts進行數據封裝。
var option = { title: { text: 'XX項目收支情況', subtext: '2018年12月-2019年3月' }, tooltip: { trigger: 'axis' }, legend: { data: ['總收入', '總支出'] }, xAxis: { type: 'category', boundaryGap: false, data: ['2018-12', '2019-01', '2019-02', '2019-03'] }, yAxis: { type: 'value' }, series: [ { name: '總收入', type: 'line', stack: '總量', data: [220, 182, 191, 234] }, { name: '總支出', type: 'line', stack: '總量', data: [150, 232, 201, 154] } ] }; var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);
上述代碼演示了ECharts如何用數據封裝的方式創建了一個折線圖。其中,option對象就是ECharts封裝的json數據源。
可以看到,option的數據格式可以分為三大塊:標題(title)、提示(tooltip)、坐標軸(xAxis, yAxis)和圖表系列(series)。這些塊中包含著ECharts圖表所需的所有元素。
通過封裝好的json,我們可以很方便地創建出復雜的各式各樣的圖表,如折線圖、柱狀圖、散點圖等等。ECharts強大的數據封裝能力正是其成為數據可視化工具首選之一的重要原因。
下一篇vue分享頁面功能