ECharts 基础概念 #
本章将深入介绍 ECharts 的核心概念，帮助你理解配置项结构和组件系统。
配置项结构 #
整体结构 #
ECharts 使用 option 对象来描述图表：
text
┌─────────────────────────────────────────────────────────────┐
│ option │
├─────────────────────────────────────────────────────────────┤
│ title - 标题组件 │
│ tooltip - 提示框组件 │
│ legend - 图例组件 │
│ xAxis - X 轴 │
│ yAxis - Y 轴 │
│ grid - 网格 │
│ series - 系列列表 │
│ dataZoom - 数据区域缩放 │
│ visualMap - 视觉映射 │
│ toolbox - 工具栏 │
│ ... - 其他组件 │
└─────────────────────────────────────────────────────────────┘
基本配置示例 #
javascript
const option = {
// 标题
title: {
text: '主标题',
subtext: '副标题',
left: 'center'
},
// 提示框
tooltip: {
trigger: 'axis'
},
// 图例
legend: {
data: ['销量', '利润'],
bottom: 10
},
// X 轴
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
},
// Y 轴
yAxis: {
type: 'value'
},
// 系列
series: [
{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70]
},
{
name: '利润',
type: 'line',
data: [30, 50, 40, 20, 15]
}
]
};
核心组件 #
1. 标题组件（title） #
javascript
title: ECharts
// 主标题文本
text: '图表标题',
// 副标题文本
subtext: '副标题',
// 位置
left: 'center', // 'left', 'center', 'right' 或像素值
top: 'top', // 'top', 'middle', 'bottom' 或像素值
// 主标题样式
textStyle: {
color: '#333',
fontSize: 18,
fontWeight: 'bold'
},
// 副标题样式
subtextStyle: {
color: '#666',
fontSize: 12
},
// 主副标题间距
itemGap: 10
}
2. 提示框组件（tooltip） #
javascript
tooltip: {
// 触发类型
trigger: 'axis', // 'item' - 数据项, 'axis' - 坐标轴
triggerOn: 'mousemove', // 'mousemove', 'click'
// 显示位置
position: ['50%', '50%'],
// 内容格式化
formatter: '{b}: {c}',
// 自定义格式化函数
formatter: function(params) {
return `${params[0].name}<br/>
${params[0].seriesName}: ${params[0].value}`;
},
// 背景样式
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
borderWidth: 0,
padding: [5, 10],
// 文本样式
textStyle: {
color: '#fff'
}
}
3. 图例组件（legend） #
javascript
legend: {
// 图例数据
data: ['系列1', '系列2', '系列3'],
// 位置
left: 'center',
top: 'bottom',
// 布局方向
orient: 'horizontal', // 'horizontal', 'vertical'
// 图例项间距
itemGap: 20,
// 图例标记
icon: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond'
// 选中状态
selected: {
'系列1': true,
'系列2': false
},
// 文本样式
textStyle: {
color: '#333',
fontSize: 12
}
}
4. 网格组件（grid） #
javascript
grid: {
// 位置
left: '3%',
right: '4%',
bottom: '3%',
top: '10%',
// 是否包含坐标轴
containLabel: true,
// 边框
show: true,
borderColor: '#ccc',
borderWidth: 1,
// 背景色
backgroundColor: 'transparent'
}
5. X 轴组件（xAxis） #
javascript
xAxis: {
// 类型
type: 'category', // 'value', 'category', 'time', 'log'
// 数据（类目轴）
data: ['周一', '周二', '周三', '周四', '周五'],
// 位置
position: 'bottom', // 'top', 'bottom'
// 轴线
axisLine: {
show: true,
lineStyle: {
color: '#333',
width: 1
}
},
// 刻度
axisTick: {
show: true,
alignWithLabel: true
},
// 标签
axisLabel: {
show: true,
interval: 'auto',
rotate: 0,
color: '#666'
},
// 分隔线
splitLine: {
show: false
}
}
6. Y 轴组件（yAxis） #
javascript
yAxis: {
// 类型
type: 'value',
// 名称
name: '销量',
nameLocation: 'end',
nameTextStyle: {
color: '#666',
fontSize: 12
},
// 位置
position: 'left', // 'left', 'right'
// 最小/最大值
min: 0,
max: 100,
// 或使用函数
min: function(value) {
return value.min - 20;
},
// 分割段数
splitNumber: 5,
// 分隔线
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}
系列配置 #
系列基本结构 #
javascript
series: [{
// 图表类型
type: 'bar',
// 系列名称
name: '销量',
// 数据
data: [120, 200, 150, 80, 70],
// 其他配置...
}]
通用系列配置 #
javascript
series: [{
// 系列名称
name: '系列名称',
// 图表类型
type: 'bar',
// 数据
data: [10, 20, 30],
// 是否显示
show: true,
// 图例图标
legendIcon: 'circle',
// 标签
label: {
show: true,
position: 'top',
formatter: '{c}',
color: '#333'
},
// 样式
itemStyle: {
color: '#5470c6',
borderColor: '#fff',
borderWidth: 1
},
// 强调样式
emphasis: {
itemStyle: {
color: '#91cc75'
},
label: {
show: true,
fontSize: 14
}
},
// 动画
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut'
}]
数据格式 #
简单数组格式 #
javascript
series: [{
type: 'bar',
data: [120, 200, 150, 80, 70]
}]
对象数组格式 #
javascript
series: [{
type: 'bar',
data: [
{ value: 120, name: '周一' },
{ value: 200, name: '周二' },
{ value: 150, name: '周三' }
]
}]
多维度数据 #
javascript
series: [{
type: 'scatter',
data: [
[10, 20, 30], // [x, y, size]
[20, 30, 40],
[30, 40, 50]
]
}]
数据集（dataset） #
javascript
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]
]
},
series: [
{ type: 'bar', seriesLayoutBy: 'row' },
{ type: 'bar', seriesLayoutBy: 'row' },
{ type: 'bar', seriesLayoutBy: 'row' }
]
颜色配置 #
全局颜色 #
javascript
option = {
// 调色盘
color: [
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc'
],
series: [{
type: 'pie',
data: [...]
}]
};
系列颜色 #
javascript
series: [{
type: 'bar',
data: [10, 20, 30],
// 单一颜色
itemStyle: {
color: '#5470c6'
}
}]
渐变色 #
javascript
series: [{
type: 'bar',
data: [10, 20, 30],
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#83bff6' },
{ offset: 1, color: '#188df0' }
]
}
}
}]
条件颜色 #
javascript
series: [{
type: 'bar',
data: [10, 20, 30],
itemStyle: {
color: function(params) {
const colorList = ['#5470c6', '#91cc75', '#fac858'];
return colorList[params.dataIndex];
}
}
}]
坐标系 #
直角坐标系 #
javascript
option = {
// 网格
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// X 轴
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
// Y 轴
yAxis: {
type: 'value'
},
// 系列
series: [{
type: 'bar',
data: [10, 20, 30]
}]
};
多 Y 轴 #
javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
yAxis: [
{
type: 'value',
name: '销量',
position: 'left'
},
{
type: 'value',
name: '利润',
position: 'right'
}
],
series: [
{
name: '销量',
type: 'bar',
yAxisIndex: 0,
data: [10, 20, 30]
},
{
name: '利润',
type: 'line',
yAxisIndex: 1,
data: [5, 10, 15]
}
]
};
极坐标系 #
javascript
option = {
polar: {
center: ['50%', '50%'],
radius: ['0%', '70%']
},
angleAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
radiusAxis: {
type: 'value'
},
series: [{
type: 'bar',
coordinateSystem: 'polar',
data: [10, 20, 30, 40, 50]
}]
};
实例方法 #
初始化 #
javascript
// 基本初始化
const chart = echarts.init(document.getElementById('chart'));
// 指定主题
const chart = echarts.init(document.getElementById('chart'), 'dark');
// 指定渲染器和尺寸
const chart = echarts.init(document.getElementById('chart'), null, {
renderer: 'canvas', // 'canvas' 或 'svg'
width: 600,
height: 400
});
设置配置 #
javascript
// 设置配置
chart.setOption(option);
// 合并配置
chart.setOption(newOption, {
notMerge: false, // 是否不合并
lazyUpdate: false, // 是否延迟更新
silent: false // 是否阻止事件
});
获取数据 #
javascript
// 获取配置
const option = chart.getOption();
// 获取数据
const data = chart.getDataURL({
type: 'png',
pixelRatio: 2,
backgroundColor: '#fff'
});
事件处理 #
javascript
// 绑定事件
chart.on('click', function(params) {
console.log(params.name, params.value);
});
// 绑定特定组件事件
chart.on('legendselectchanged', function(params) {
console.log(params.selected);
});
// 解绑事件
chart.off('click');
其他方法 #
javascript
// 调整尺寸
chart.resize();
// 调整到指定尺寸
chart.resize({
width: 800,
height: 600
});
// 清空图表
chart.clear();
// 销毁实例
chart.dispose();
// 显示加载动画
chart.showLoading({
text: 'loading',
color: '#c23531',
textColor: '#fff',
maskColor: 'rgba(0, 0, 0, 0.3)'
});
// 隐藏加载动画
chart.hideLoading();
配置项最佳实践 #
1. 使用默认值 #
javascript
// 定义默认配置
const defaultOption = {
tooltip: { trigger: 'axis' },
grid: { containLabel: true },
xAxis: { type: 'category' },
yAxis: { type: 'value' }
};
// 合并自定义配置
const option = {
...defaultOption,
series: [{
type: 'bar',
data: [10, 20, 30]
}]
};
2. 响应式配置 #
javascript
function getOption() {
const width = window.innerWidth;
return {
title: {
text: '响应式图表',
textStyle: {
fontSize: width > 768 ? 18 : 14
}
},
// ...
};
}
window.addEventListener('resize', () => {
chart.setOption(getOption());
});
3. 配置复用 #
javascript
// 公共配置
const commonSeriesConfig = {
animationDuration: 1000,
animationEasing: 'cubicOut',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
};
// 使用公共配置
const option = {
series: [
{ ...commonSeriesConfig, type: 'bar', data: [...] },
{ ...commonSeriesConfig, type: 'line', data: [...] }
]
};
下一步 #
现在你已经掌握了 ECharts 的基础概念，接下来学习 常见图表，实现各种类型的图表！
最后更新：2026-03-28