系列（Series）是指：一组数值映射成对应的图。在 ECharts 中，系列是数据可视化的核心概念，每个系列定义了一种图表类型及其数据。
option = {
series: [
{
type: 'bar', // 图表类型
name: '销量', // 系列名称
data: [5, 20, 36, 10, 10, 20] // 数据
}
]
}一个图表可以包含多个系列，不同类型的系列可以混合使用：
option = {
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度']
},
yAxis: {},
series: [
{
type: 'pie',
center: ['65%', 60],
radius: 35,
data: [
{ name: '分类1', value: 50 },
{ name: '分类2', value: 60 },
{ name: '分类3', value: 55 },
{ name: '分类4', value: 70 }
]
},
{
type: 'line',
data: [100, 112, 96, 123]
},
{
type: 'bar',
data: [79, 81, 88, 72]
}
]
}| 类型 | 说明 |
|---|---|
line | 折线图 |
bar | 柱状图 |
pie | 饼图 |
scatter | 散点图 |
effectScatter | 涟漪散点图 |
radar | 雷达图 |
tree | 树图 |
treemap | 矩形树图 |
sunburst | 旭日图 |
boxplot | 箱形图 |
candlestick | K线图 |
heatmap | 热力图 |
map | 地图 |
parallel | 平行坐标 |
lines | 线图 |
graph | 关系图 |
sankey | 桑基图 |
funnel | 漏斗图 |
gauge | 仪表盘 |
pictorialBar | 象形柱图 |
themeRiver | 主题河流图 |
custom | 自定义系列 |
ECharts 中除了绘图之外其他部分，都可抽象为「组件」。组件是图表的辅助元素，用于增强图表的功能和可读性。
| 组件 | 说明 |
|---|---|
title | 标题组件 |
legend | 图例组件 |
tooltip | 提示框组件 |
xAxis | 直角坐标系 X 轴 |
yAxis | 直角坐标系 Y 轴 |
grid | 直角坐标系底板 |
polar | 极坐标系底板 |
radiusAxis | 极坐标系径向轴 |
angleAxis | 极坐标系角度轴 |
dataZoom | 数据区域缩放组件 |
visualMap | 视觉映射组件 |
toolbox | 工具栏组件 |
geo | 地理坐标系组件 |
parallel | 平行坐标系组件 |
singleAxis | 单轴坐标系组件 |
timeline | 时间线组件 |
option = {
title: {
text: '数据可视化',
subtext: 'ECharts 示例'
},
xAxis: {
type: 'category'
},
yAxis: {},
legend: {
data: ['分类', '折线图', '柱状图'],
left: 100
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [
{
show: true,
start: 30,
end: 70
}
],
dataset: {
source: [
['一季度', 79, 100, '分类1', 50],
['二季度', 81, 112, '分类2', 60],
['三季度', 88, 96, '分类3', 55],
['四季度', 72, 123, '分类4', 70]
]
},
grid: [
{
left: 50,
top: 70
}
],
series: [
// ...
]
}很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等，需要运行在「坐标系」上。坐标系用于布局这些图，以及显示数据的刻度等。
直角坐标系是最常用的坐标系，由 xAxis（X 轴）、yAxis（Y 轴）、grid（底板）三种组件协作而成。
option = {
xAxis: {},
yAxis: {},
dataset: {
source: [
[13, 44],
[51, 51],
[51, 32],
[67, 19],
[19, 33]
]
},
series: [
{
type: 'scatter',
encode: { x: 0, y: 1 }
}
]
}两个 yAxis 共享一个 xAxis：
option = {
legend: {},
tooltip: {},
xAxis: {
type: 'category'
},
yAxis: [
{
min: 0,
max: 100
},
{
min: 0,
max: 100
}
],
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]
]
},
series: [
{ type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0 },
{ type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1 }
]
}一个 ECharts 实例中可以有多个 grid：
option = {
legend: {},
tooltip: {},
xAxis: [
{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
}
],
yAxis: [
{
gridIndex: 0
},
{
gridIndex: 1
}
],
grid: [
{
bottom: '55%'
},
{
top: '55%'
}
],
series: [
{ 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 },
{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
]
}大多数组件都提供了定位属性，可以采用类似 CSS absolute 的定位属性来控制组件的位置。
option = {
grid: {
left: '10%', // 左边距
top: 60, // 上边距
right: '10%', // 右边距
bottom: 60 // 下边距
}
}定位值可以是：
60'10%''left'、'center'、'right'（水平方向）'top'、'middle'、'bottom'（垂直方向）ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。
option = {
xAxis: {
type: 'category'
},
yAxis: {},
dataset: {
source: [
['一季度', 79, 100, '分类1', 50],
['二季度', 81, 112, '分类2', 60],
['三季度', 88, 96, '分类3', 55],
['四季度', 72, 123, '分类4', 70]
]
},
series: [
{
type: 'pie',
center: ['65%', 60],
radius: 35,
encode: { itemName: 3, value: 4 }
},
{
type: 'line',
encode: { x: 0, y: 2 }
},
{
type: 'bar',
encode: { x: 0, y: 1 }
}
]
}dataset 支持多种数据格式：
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]
]
}dataset: {
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 }
]
}通过 encode 属性可以指定数据维度到视觉通道的映射：
series: [
{
type: 'bar',
encode: {
x: 'product', // 将 product 列映射到 X 轴
y: '2015' // 将 2015 列映射到 Y 轴
}
}
]| 特性 | dataset | series.data |
|---|---|---|
| 数据管理 | 集中管理，可复用 | 分散在各系列中 |
| 数据映射 | 通过 encode 灵活映射 | 固定映射规则 |
| 适用场景 | 多系列共享数据 | 单系列简单数据 |
| 可读性 | 数据与配置分离 | 数据与配置混合 |
ECharts 中的数据，一般存放于 series.data 或 dataset.source 中。每个数据项含有「数据值（value）」和其他信息。
series: {
data: [2323, 1212, 2323, 4343, 3434]
}series: {
data: [
[3434, 129, '圣马力诺'],
[1212, 5454, '梵蒂冈'],
[2323, 3223, '瑙鲁'],
[4343, 23, '图瓦卢']
]
}多维数据中，每列是一个维度。例如气泡图中：
ECharts 内置了丰富的动画效果，可以提升用户体验和视觉效果。
option = {
animation: true, // 是否开启动画，默认开启
animationThreshold: 2000, // 动画阈值，数据量超过此值时关闭动画
series: [{
type: 'bar',
data: [10, 20, 30]
}]
}图表首次渲染时的动画效果：
option = {
animationDuration: 1000, // 初始动画时长，单位 ms
animationEasing: 'cubicOut', // 初始动画缓动效果
animationDelay: 0, // 初始动画延迟
// 或使用函数形式（每个数据项不同延迟）
animationDelay: function(idx) {
return idx * 100 // 每个数据项延迟递增 100ms
}
}数据更新时的动画效果：
option = {
animationDurationUpdate: 300, // 更新动画时长
animationEasingUpdate: 'cubicOut', // 更新动画缓动效果
animationDelayUpdate: 0 // 更新动画延迟
}| 缓动名称 | 效果描述 |
|---|---|
linear | 线性变化 |
quadraticIn | 二次方缓入 |
quadraticOut | 二次方缓出 |
cubicIn | 三次方缓入 |
cubicOut | 三次方缓出 |
elasticOut | 弹性效果 |
bounceOut | 弹跳效果 |
option = {
animation: true,
animationDuration: 2000,
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return idx * 200
},
series: [{
type: 'bar',
data: [120, 200, 150, 80, 70],
animationDurationUpdate: 1000,
animationEasingUpdate: 'bounceOut'
}]
}ECharts 支持多种状态配置，可以针对不同交互状态设置不同样式。
鼠标悬停时的高亮效果：
option = {
series: [{
type: 'bar',
data: [10, 20, 30],
emphasis: {
disabled: false, // 是否禁用高亮状态
focus: 'self', // 'none' | 'self' | 'series'
blurScope: 'coordinateSystem', // 模糊范围
itemStyle: {
color: '#91cc75',
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: {
show: true,
fontSize: 16
}
}
}]
}其他图形淡出的效果（配合 focus: 'self' 使用）：
option = {
series: [{
type: 'bar',
emphasis: {
focus: 'self'
},
blur: {
itemStyle: {
opacity: 0.3
}
}
}]
}数据项被选中时的样式：
option = {
series: [{
type: 'bar',
selectedMode: 'multiple', // 'single' | 'multiple' | false
select: {
itemStyle: {
color: '#ee6666',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontWeight: 'bold'
}
},
data: [10, 20, 30]
}]
}
// 通过 API 控制选中状态
chart.dispatchAction({
type: 'toggleSelect',
seriesIndex: 0,
dataIndex: 0
})option = {
series: [{
type: 'pie',
selectedMode: 'single',
emphasis: {
focus: 'self',
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
blur: {
itemStyle: {
opacity: 0.2
}
},
select: {
itemStyle: {
borderWidth: 3,
borderColor: '#fff'
}
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' }
]
}]
}option 是 ECharts 的核心配置对象，理解其结构有助于更好地组织代码。
option = {
// 全局配置
backgroundColor: '#fff',
color: ['#5470c6', '#91cc75', '#fac858'],
animation: true,
// 标题组件
title: {},
// 图例组件
legend: {},
// 提示框组件
tooltip: {},
// 工具栏组件
toolbox: {},
// 坐标系组件
grid: {},
xAxis: {},
yAxis: {},
// 数据区域缩放
dataZoom: [],
// 视觉映射
visualMap: {},
// 数据集
dataset: {},
// 系列（图表数据）
series: []
}样式配置遵循就近原则：
data[index].itemStyle - 数据项级别（最高优先级）series.itemStyle - 系列级别series.emphasis.itemStyle - 状态级别color 调色盘 - 全局级别（最低优先级）option = {
color: ['#5470c6'], // 全局颜色
series: [{
type: 'bar',
itemStyle: { // 系列级别
color: '#91cc75'
},
data: [
10,
{
value: 20,
itemStyle: { // 数据项级别（最高优先级）
color: '#ee6666'
}
},
30
]
}]
}