2. echarts系列概念以及多系列
阿新 • • 發佈：2022-05-27
- 系列series是指：一組數值對映成對應的圖
- dataset用於單獨的資料集宣告，從而資料可以單獨管理，被多個元件複用，並且可以自由指定資料到視覺的對映。這一特性將邏輯和資料分離，帶來更好的複用，並易於理解
- 多系列：多個圖表公用一個座標系
多系列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js" integrity="sha512-weWXHm0Ws2cZKjjwugRMnnOAx9uCP/wUVf84W7/fXQimwYUK28zPDGPprDozomQLpKv6U99xN9PI9+yLI9qxNw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> #chart { width: 800px; height: 400px; } </style> </head> <body> <div id="chart"></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom); chart.setOption({ // dataset用於單獨的資料集宣告，從而資料可以單獨管理，被多個元件複用，並且可以自由指定資料到視覺的對映。 dataset: { source: [ ['一季度', 100, 79, '分類1', 50], ['二季度', 112, 81, '分類2', 60], ['三季度', 96, 88, '分類3', 55], ['四季度', 123, 72, '分類4', 70] ] }, title: { text: 'ECharts 多系列案例', subtext: '慕課網資料視覺化課程' }, xAxis: { data: ['一季度', '二季度', '三季度', '四季度'] }, yAxis: {}, legend: { data: [{ name: '分類', icon: 'circle', textStyle: { color: 'red' } }, '折線圖', '柱狀圖'], left: 300 }, grid: { top: 100, left: '10%', right: '10%', bottom: 100 }, toolbox: { feature: { saveAsImage: {}, dataZoom: { yAxisIndex: false }, restore: {} } }, dataZoom: [{ show: true, start: 30, end: 70 }], series: [{ name: '分類', type: 'pie', // 餅圖使用center定位 center: ['65%', 60], radius: 35, // 當我們使用了dataset設定了多系列的公共資料後，使用encode獲取公共資料裡面的資料來代替data encode: { itemName: 3, value: 4 } }, { name: '折線圖', type: 'line', encode: { x: 0, y: 1 } }, { name: '柱狀圖', type: 'bar', encode: { x: 0, y: 2 } }] }); </script> </body> </html>