010_数据集
1. 數據集(dataset)是專門用來管理數據的組件。雖然每個系列都可以在series.data中設置數據, 但是從ECharts4支持數據集開始, 更推薦使用數據集來管理數據。因為這樣, 數據可以被多個組件復用, 也方便進行"數據和其他配置"分離的配置風格。畢竟, 在運行時, 數據是最常改變的, 而其他配置大多并不會改變。
2. 最簡單數據集
2.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>最簡單數據集</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '最簡單數據集'},// 配置提示信息tooltip: {},// 圖例組件legend: {},// 配置要在X軸顯示的項xAxis: {type: "category" // 類目},// 配置要在Y軸顯示的項yAxis: {},// 數據集dataset: {source: [ // 提供一份數據。['product', '2020', '2021', '2022'],['Matcha Latte', 89.3, 95.8, 97.7],['Milk Tea', 92.1, 89.4, 83.1],['Cheese Cocoa', 94.4, 91.2, 92.5],['Walnut Brownie', 85.4, 76.9, 78.1]]},// 系列列表series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>2.2. 效果圖
3. dimensions維度
3.1. 常用圖表所描述的數據大部分是"二維表"結構。現在, 當我們把系列(series)對應到"列"的時候, 那么每一列就稱為一個"維度(dimension)", 而每一行稱為數據項(item)。反之, 如果我們把系列(series)對應到表行, 那么每一行就是"維度(dimension)", 每一列就是數據項(item)。
3.2. 維度可以有單獨的名字, 便于在圖表中顯示。dataset.source中第一行(列)到底包含不包含維度名, ECharts默認會自動探測。當然也可以設置dataset.sourceHeader: true顯示聲明第一行(列)就是維度, 或者dataset.sourceHeader: false表明第一行(列)開始就直接是數據。
3.3. 維度的定義, 也可以使用單獨的dataset.dimensions或者series.dimensions來定義, 這樣可以同時指定維度名, 和維度的類型(dimension type)。大多數情況下, 我們并不需要去設置維度類型, 因為ECharts會自動嘗試判斷。但是如果不足夠準確時, 可以手動設置維度類型。
3.4. 維度類型(dimension type)可以取這些值:
- 'number': 默認, 表示普通數據。
- 'ordinal': 對于類目、文本這些string類型的數據, 如果需要能在數軸上使用, 須是'ordinal'類型。ECharts默認會試圖自動判斷這個類型。但是自動判斷也可能不準確, 所以使用者也可以手動強制指定。
- 'time': 表示時間數據。設置成'time'則能支持自動解析數據成時間戳(timestamp), 比如該維度的數據是'2017-05-10', 會自動被解析。如果這個維度被用在時間數軸(axis.type為'time')上, 那么會被自動設置為'time'類型。時間類型的支持參見data。
- 'float': 如果設置成'float', 在存儲時候會使用TypedArray, 對性能優化有好處。
- 'int': 如果設置成'int', 在存儲時候會使用TypedArray, 對性能優化有好處。
3.5. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>數據集對象數組格式</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '數據集對象數組格式'},// 配置提示信息tooltip: {},// 圖例組件legend: {},// 配置要在X軸顯示的項xAxis: {type: "category" // 類目},// 配置要在Y軸顯示的項yAxis: {},// 數據集dataset: {// 指定維度dimensions: ['product', '2020', '2021', '2022'],source: [ // 提供一份數據。{product: 'Matcha Latte', '2020': 89.3, '2021': 95.8, '2022': 97.7},{product: 'Milk Tea', '2020': 92.1, '2021': 89.4, '2022': 83.1},{product: 'Cheese Cocoa', '2020': 94.4, '2021': 91.2, '2022': 92.5},{product: 'Walnut Brownie', '2020': 85.4, '2021': 76.9, '2022': 78.1}]},// 系列列表series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>3.6. 效果圖
4. 把數據集(dataset)的行或列映射為系列(series)
4.1. 有了數據表之后, 使用者可以靈活地配置: 數據如何對應到軸和圖形系列。這件事可以使用series.seriesLayoutBy屬性來配置。
4.2. 當使用dataset時, seriesLayoutBy指定了dataset中用行還是列對應到系列上, 也就是說, 系列"排布"到dataset的行還是列上。可取值:
- 'column': 默認, dataset的列對應于系列, 從而dataset中每一列是一個維度(dimension)。
- 'row': dataset的行對應于系列, 從而dataset中每一行是一個維度(dimension)。
5. grid網格
5.1. 直角坐標系內繪圖網格, 單個grid內最多可以放置上下兩個X軸, 左右兩個Y軸。在ECharts 2.x里單個echarts實例中最多只能存在一個grid組件, 在ECharts3中可以存在任意個grid組件。
5.2. grid.id組件ID。默認不指定。指定則可用于在option或者API中引用組件。string類型。
5.3. grid.show是否顯示直角坐標系網格。boolean類型。
5.4. grid.left = '10%', grid組件離容器左側的距離。left的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比, 也可以是'left', 'center', 'right'。如果left的值為'left', 'center', 'right', 組件會根據相應的位置自動對齊。string或number類型。
5.5. grid.top = 60, grid組件離容器上側的距離。top的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比, 也可以是'top', 'middle', 'bottom'。如果top的值為'top', 'middle', 'bottom', 組件會根據相應的位置自動對齊。string或number類型。
5.6. grid.right = '10%', grid組件離容器右側的距離。right的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比。string或number類型。
5.7. grid.bottom = 60, grid組件離容器下側的距離。bottom的值可以是像20這樣的具體像素值, 可以是像'20%'這樣相對于容器高寬的百分比。string或number類型。
5.8. grid.width = 'auto', grid組件的寬度。默認自適應。string或number類型。
5.9. grid.height = 'auto', grid組件的高度。默認自適應。string或number類型。
5.10. grid.backgroundColor = 'transparent', 網格背景色, 默認透明。顏色可以使用RGB表示, 比如: 'rgb(128, 128, 128)', 如果想要加上alpha通道, 可以使用RGBA, 比如: 'rgba(128, 128, 128, 0.5)', 也可以使用十六進制格式, 比如: '#ccc'。注意: 此配置項生效的前提是, 設置了show: true。Color類型。
5.11. grid.borderColor = '#ccc', 網格的邊框顏色。支持的顏色格式同backgroundColor。注意: 此配置項生效的前提是, 設置了show: true。Color類型。
5.12. grid.borderWidth = 1, 網格的邊框線寬。注意: 此配置項生效的前提是, 設置了show: true。number類型。
5.13. grid.shadowBlur圖形陰影的模糊大小。該屬性配合shadowColor, shadowOffsetX, shadowOffsetY一起設置圖形的陰影效果。注意: 此配置項生效的前提是, 設置了show: true以及值不為tranparent的背景色backgroundColor。number類型。
5.14. grid.shadowColor陰影顏色。支持的格式同color。注意: 此配置項生效的前提是, 設置了show: true。Color類型。
5.15. grid.shadowOffsetX陰影水平方向上的偏移距離。注意: 此配置項生效的前提是, 設置了show: true。number類型。
5.16. grid.shadowOffsetY陰影垂直方向上的偏移距離。注意: 此配置項生效的前提是, 設置了show: true。number類型。
5.17. grid.zlevel所有圖形的zlevel值。zlevel用于Canvas分層, 不同zlevel值的圖形會放置在不同的Canvas中, Canvas分層是一種常見的優化手段。我們可以把一些圖形變化頻繁(例如有動畫)的組件設置成一個單獨的zlevel。需要注意的是過多的Canvas會引起內存開銷的增大, 在手機端上需要謹慎使用以防崩潰。zlevel大的Canvas會放在zlevel小的Canvas的上面。number類型。
5.18. grid.z = 2組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。z相比zlevel優先級更低, 而且不會創建新的Canvas。number類型。
5.19. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>把數據集的行映射為系列</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小(寬高)的DOM --><div id="main" style="width: 1200px; height: 800px;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '把數據集的行映射為系列'},// 配置提示信息tooltip: {},// 圖例組件legend: {},// 配置要在X軸顯示的項xAxis: [{ type: 'category', gridIndex: 0 },{ type: 'category', gridIndex: 1 }],// 配置要在Y軸顯示的項yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],grid: [{ bottom: '55%', show: true }, { top: '55%', show: true }],// 數據集dataset: {source: [ // 提供一份數據。['product', '2020', '2021', '2022'],['Matcha Latte', 89.3, 95.8, 97.7],['Milk Tea', 92.1, 89.4, 83.1],['Cheese Cocoa', 94.4, 91.2, 92.5],['Walnut Brownie', 85.4, 76.9, 78.1]]},// 系列列表series: [ { type: 'bar', seriesLayoutBy: 'row' },{ type: 'bar', seriesLayoutBy: 'row' },{ type: 'bar', seriesLayoutBy: 'row' },{ type: 'bar', seriesLayoutBy: 'row' },{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 } ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>5.20. 效果圖?
總結
- 上一篇： 009_调色盘和高亮样式
- 下一篇： 011_坐标轴