文章目錄

• dataset的基本用法
• 按行進行數據映射
• 維度dimension
• 數據到圖形的映射(series.encode)
• 最后

從ECharts 4開始，支持使用dataset組件用于單獨的數據集聲明，從而使數據與配置進一步分離，數據可以被單獨管理，被多個series復用，并且可以基于數據指定數據到視覺的映射。

在ECharts 4以前，數據只能聲明在各個系列或類目中，這種方式雖然直觀容易理解，但為了匹配這種數據輸入形式，一般有數據處理的過程，需要把數據分隔設置到各個系列或類目軸中，不利于多個系列共享一份數據，也不利于基于原始數據進行圖表類型、系列的映射安排。

使用數據集dataset組件來單獨聲明數據，具有以下優勢：

• 更貼近數據可視化常見思維方式：提供數據 -> 指定數據到視覺的映射 -> 生成圖表
• 數據和其他配置分離，數據常變，其他配置常不變，易于分別管理
• 數據可以被多個系列或者組件復用，不必為每個系列創建一份數據
• 支持更多的常用數據格式，如二維數組、對象數組等，一定程度上避免使用者為了數據格式而進行轉換

dataset的基本用法

dataset組件支持常用的二維數組和對象數組等數據格式，默認按列進行數據映射。
使用source配置數據，當使用對象數組時，需要另外使用dimensions指定數據維度，或者也可以通過series.encode完成映射。

let eChart = echarts.init(document.getElementById("eChart"), "shine");let eOpt = {legend: {},tooltip: {},dataset: {// 二維數組格式的數據source: [['phone', '一季度', '二季度', '三季度', '四季度'],['iPhone', 850, 920, 800, 1020],['OPPO', 720, 810, 850, 880],['Mi', 820, 950, 1000, 980]]// 對象數組格式的數據// 使用dimensions指定維度（也可以通過series.encode完成映射）// 默認第一個維度映射到類目軸，其他維度依次映射到series // dimensions: ['phone', '一季度', '二季度', '三季度', '四季度'], // source: [ // {'phone':'iPhone', '一季度':850, '二季度':920, '三季度':800, '四季度':1020}, // {'phone':'OPPO', '一季度':720, '二季度':810, '三季度':850, '四季度':880}, // {'phone':'Mi', '一季度':820, '二季度':950, '三季度':1000, '四季度':980} // ]},xAxis: {// 類目軸默認對應dataset的第一列type: 'category'},yAxis: {type: 'value'},series: [// 默認情況下，系列依次對應dataset第一列后的每一列// 即第一個series對應dataset中數據的第二列{type: 'bar'},{type: 'bar'},{type: 'bar'},{type: 'bar'}] };eChart.setOption(eOpt);

圖表效果

按行進行數據映射

默認情況下，dataset按數據列column進行數據到圖形的映射，可以通過series.seriesLayoutBy指定按行row進行映射。
按列映射時，第一列會被映射到類目軸，其他列按順序依次映射到各個系列，每一列的列頭為系列名。
按行映射時，第一行會被映射到類目軸，其他行按順序依次映射到各個系列，每一行的行頭為系列名。
按行或按列映射是針對二維數組格式的數據而言，對對象數組不起作用。

let eChart = echarts.init(document.getElementById("eChart"), "shine");let eOpt = {legend: {},tooltip: {},dataset: {// 二維數組格式的數據source: [['phone', '一季度', '二季度', '三季度', '四季度'],['iPhone', 850, 920, 800, 1020],['OPPO', 720, 810, 850, 880],['Mi', 820, 950, 1000, 980]]},xAxis: {// 按行映射時，第一行被映射到類目軸type: 'category'},yAxis: {type: 'value'},series: [// 按行映射時，系列依次對應dataset第一行后的每一行// 即第一個series對應dataset中數據的第二行{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'}] };eChart.setOption(eOpt);

圖表效果

維度dimension

常規圖表使用的數據基本是由行和列組成的二維表結構，通常使用二維數組來容納二維表。
當按列映射時，每一列就稱為一個維度（一個維度對應一個系列），每一行稱為一個數據項。
當按行映射時，每一行就稱為一個維度，每一列稱為一個數據項。

維度可以有單獨的名字，便于在圖表中顯示，維度名通常定義在dataset的第一行或第一列。
ECharts會自動探測dataset中是否包含維度名，也可以通過dataset.sourceHeader: true | false 顯式設置。

維度可以定義在dataset中，也可以定義在series中，可以同時指定維度名和類型。
常用的維度類型有number(默認)、ordinal、time、float及int。

dataset: {dimensions: [{name: 'phone', type: 'ordinal'}],... }

數據到圖形的映射(series.encode)

series.encode聲明的基本結構

• 冒號左邊是坐標軸、組件等特定名稱，如x、y、tooltip等
• 冒號右邊是維度名稱或序號（從0開始計數）
• 可以用數組指定多個維度

默認的encode
當 series.encode 并沒有指定時，ECharts 針對最常見直角坐標系中的圖表（折線圖、柱狀圖、散點圖、K線圖等）、餅圖、漏斗圖，會采用一些默認的映射規則。

• 在坐標系中（如直角坐標系、極坐標系等
  • 如果有類目軸，則將第一列（行）映射到這個軸上，后續每一列（行）對應一個系列
  • 如果沒有類目軸，假如坐標系有兩個軸（例如直角坐標系的 X Y 軸），則每兩列對應一個系列，這兩列分別映射到這兩個軸上
• 如果沒有坐標系（如餅圖）
  • 取第一列（行）為名字，第二列（行）為數值（如果只有一列，則取第一列為數值）

let eChart = echarts.init(document.getElementById("eChart"), "shine");let eOpt = {dataset: {source: [['phone', '銷量', '增長率'],['iPhone', 760, 8.8],['OPPO', 850, 9.2],['Mi', 980, 7.5]]},legend: {},tooltip: {},xAxis: {type: 'value'},yAxis: {type: 'category'},series: [{type: 'bar',encode: {// 把維度1映射到x軸x: 1,// 把維度phone映射到y軸y: 'phone',// 把維度1和維度2映射到tooltiptooltip: [1, 2],// 把維度phone和維度1連起來作為系列名，并生成相應的圖例seriesName: ['phone', 1]// 適用于餅圖的encode設置 // itemName: 0, // value: 1},label: {show: true,// 引用特定維度的值formatter: '{@phone} - {@1}萬 - {@2}%'}}] };eChart.setOption(eOpt);

圖表效果

最后

可以同時定義多個dataset， 系列通過series.datasetIndex （從0開始計數）來指定引用哪個dataset。

ECharts 4 之前一直以來的series.data方式的數據聲明方式依然被支持。

在大數據場景（百萬級以上）中，需要使用appendData進行增量加載數據時，不支持使用dataset。

目前支持dataset的圖表有：bar line pie scatter effectScatter parallel candlestick map funnel custom。

總結

以上是生活随笔為你收集整理的ECharts - dataset组件的用法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。