5分钟上手 ECharts
从零开始，5分钟创建你的第一个ECharts图表
🎯 学习目标
完成本教程后，你将能够：
- ✅ 搭建ECharts开发环境
- ✅ 创建第一个柱状图
- ✅ 理解option配置结构
- ✅ 实现简单的交互
⏱️ 第1分钟: 准备HTML骨架
创建一个HTML文件 index.html：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个ECharts图表</title>
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
#chart-container {
width: 800px;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 style="text-align: center;">ECharts 快速入门</h1>
<div id="chart-container"></div>
<script>
// 我们的代码将写在这里
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
在浏览器中打开这个文件，应该能看到一个空白页面和一个800x500的容器。
⏱️ 第2分钟: 初始化图表实例
在 <script> 标签中添加：
javascript
// 获取DOM元素
const container = document.getElementById('chart-container');
// 初始化ECharts实例
const chart = echarts.init(container);
console.log('ECharts初始化成功！', chart);1
2
3
4
5
6
7
2
3
4
5
6
7
刷新浏览器，打开控制台(F12)，应该能看到"ECharts初始化成功！"的输出。
关键点:
echarts.init(dom)创建图表实例- 必须在DOM加载完成后调用
- 容器必须有明确的宽高
⏱️ 第3分钟: 配置option选项
ECharts的核心是 声明式配置，通过 option 对象定义图表的所有属性：
javascript
const option = {
// 标题
title: {
text: '本周销售额',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
// 提示框
tooltip: {
trigger: 'axis'
},
// X轴
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLabel: {
fontSize: 12
}
},
// Y轴
yAxis: {
type: 'value',
name: '销售额(元)',
axisLabel: {
formatter: '{value} ¥'
}
},
// 数据系列
series: [{
name: '销售额',
type: 'bar', // 柱状图
data: [12000, 15000, 18000, 14000, 20000, 25000, 22000],
itemStyle: {
color: '#5470c6'
},
label: {
show: true,
position: 'top',
formatter: '{c} ¥'
}
}]
};
// 应用配置
chart.setOption(option);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
刷新浏览器，你应该能看到一个漂亮的柱状图！🎉
option核心结构:
option
├── title - 标题
├── tooltip - 提示框
├── legend - 图例
├── xAxis - X轴
├── yAxis - Y轴
├── grid - 网格
└── series - 数据系列(数组)
├── type - 图表类型(bar/line/pie等)
├── data - 数据
└── ... - 其他配置1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
⏱️ 第4分钟: 添加交互功能
1. 鼠标悬停效果
已经通过 tooltip 实现了，将鼠标移到柱子上会显示详细数据。
2. 点击事件
javascript
// 监听点击事件
chart.on('click', function (params) {
console.log('点击了:', params);
alert(`你点击了${params.name}，销售额: ${params.value} ¥`);
});1
2
3
4
5
2
3
4
5
3. 动态更新数据
javascript
// 模拟实时数据更新
setInterval(() => {
const newData = Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 30000)
);
chart.setOption({
series: [{
data: newData
}]
});
}, 3000);1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
现在图表每3秒自动更新一次数据！
⏱️ 第5分钟: 优化和完善
1. 响应式适配
javascript
// 监听窗口大小变化
window.addEventListener('resize', () => {
chart.resize();
});1
2
3
4
2
3
4
2. 添加渐变色彩
javascript
series: [{
// ... 其他配置
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
}
}]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3. 添加动画效果
javascript
series: [{
// ... 其他配置
animationDuration: 1000, // 动画时长
animationEasing: 'elasticOut' // 缓动函数
}]1
2
3
4
5
2
3
4
5
🎨 完整代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
#chart-container {
width: 800px;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 style="text-align: center;">ECharts 快速入门</h1>
<div id="chart-container"></div>
<script>
const container = document.getElementById('chart-container');
const chart = echarts.init(container);
const option = {
title: {
text: '本周销售额',
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
},
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
name: '销售额(元)',
axisLabel: { formatter: '{value} ¥' }
},
series: [{
name: '销售额',
type: 'bar',
data: [12000, 15000, 18000, 14000, 20000, 25000, 22000],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
label: {
show: true,
position: 'top',
formatter: '{c} ¥'
},
animationDuration: 1000,
animationEasing: 'elasticOut'
}]
};
chart.setOption(option);
// 点击事件
chart.on('click', (params) => {
console.log('点击了:', params);
});
// 响应式
window.addEventListener('resize', () => chart.resize());
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
🚀 下一步学习
恭喜你完成了5分钟快速上手！接下来可以：
💡 小贴士
- 修改数据: 直接修改
data数组的值 - 更换图表类型: 将
type: 'bar'改为'line'或'pie' - 调整颜色: 修改
itemStyle.color - 查看更多配置: 参考官方配置手册
动手试试吧！修改一些参数，看看图表会有什么变化。实践是最好的学习方式！🎯