Echarts图表教程文档从入门到精通配置实例完整指南
Echarts图表教程文档从入门到精通配置实例完整指南
一、什么是Echarts，为什么值得学？
想象一下，你手头有一堆数据——比如某城市的每日温度、电商平台的销售记录、或者疫情期间的确诊人数变化。这些数据放在表格里，密密麻麻的数字让人头大。但如果能用一张漂亮的图表展示出来，一眼就能看出趋势和规律。这就是可视化的力量。
Echarts，全称Enterprise Charts（企业级图表），是由百度前端技术部开源的一个基于JavaScript的图表库。它可以在PC端和移动设备上流畅运行，支持多种图表类型，还能实现高度定制化的交互效果。为什么推荐你学习它？首先，文档中文友好，配置项命名直观；其次，社区活跃，遇到问题容易找到解决方案；再次，它在GitHub上有超过40K的Star，说明被广泛认可；最后，学习成本很低，基础图表几行代码就能跑起来。
二、快速上手：搭建第一个Echarts图表
学习任何新技术，最直接的方式就是动手。我们从一个最简单的柱状图开始，让你感受Echarts的魅力。
2.1 环境准备
你需要准备三样东西：一个文本编辑器（比如VS Code）、一个浏览器（推荐Chrome）、以及Echarts库文件。获取库文件有两种方式：
方式一：CDN引入（最快捷）
在HTML文件的head标签里加入这一行代码：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
这里使用的是最新版本5.4.3，如果你想用稳定版，可以去官网确认最新稳定版本。
方式二：本地下载
访问Echarts官网（echarts.apache.org），点击下载按钮，把压缩好的文件放到项目文件夹里，然后用相对路径引入。
2.2 第一个柱状图
新建一个HTML文件，把以下内容完整复制进去：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个Echarts图表</title>
<!-- 引入Echarts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
/* 给图表容器设置大小，这个非常重要 */
#main {
width: 800px;
height: 500px;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 图表挂载点 -->
<div id="main"></div>
<script>
// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
title: {
text: '2024年某商品月度销量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130, 180, 160, 140, 200, 220],
// 给柱子加颜色，让它更好看
itemStyle: {
color: '#5470c6'
}
}]
};
// 把配置项应用到图表实例
myChart.setOption(option);
</script>
</body>
</html>
用浏览器打开这个文件，你会看到一个标题为”2024年某商品月度销量”的柱状图。X轴显示月份，Y轴显示销量数值，12根柱子代表每个月的销量。
2.3 代码逐行解读
这段代码虽然短，但包含了Echarts的核心工作流程。我们来拆解一下：
第一步：准备容器。 div id="main" 是图表的画布，必须给它设置宽度和高度，否则图表无法显示。
第二步：初始化实例。 echarts.init(document.getElementById('main')) 这行代码的作用是在指定元素上创建一个Echarts实例，后续所有的操作都基于这个实例。
第三步：编写配置。 option 变量包含了图表的所有配置信息，它是Echarts的灵魂所在。我们稍后会详细讲解它的结构。
第四步：渲染图表。 myChart.setOption(option) 把配置应用到实例上，触发图表的渲染。
记住这个流程：初始化 → 配置 → 渲染。以后不管画什么图表，都是这三个步骤。
三、Echarts配置项深度解析
Echarts的配置项采用JSON格式，结构清晰，层级分明。理解它的组成，你就能灵活控制图表的每一个细节。
3.1 配置项的整体结构
一个完整的option对象通常包含以下核心部分：
option = {
title // 标题
tooltip // 提示框
legend // 图例
xAxis // 直角坐标系X轴
yAxis // 直角坐标系Y轴
grid // 直角坐标系内绘图网格
series // 系列列表（数据+图表类型）
// 还有一些可选配置，比如数据缩放、坐标系等
}
每个配置项都有自己的一堆子配置，下面逐一讲解。
3.2 title 标题
title: {
show: true, // 是否显示标题
text: '销售数据趋势', // 主标题文本
subtext: '数据来源：后台系统', // 副标题文本
textStyle: { // 主标题样式
fontSize: 18,
color: '#333',
fontWeight: 'bold'
},
subtextStyle: { // 副标题样式
fontSize: 12,
color: '#999'
},
left: 'center', // 水平位置：'left' | 'center' | 'right'
top: 10, // 距离顶部的距离，单位px
backgroundColor: '#f5f5f5', // 标题背景色
padding: [10, 20] // 内边距
}
标题的位置可以用 left、right、top、bottom 来控制，支持像素值和百分比。比如 left: '20%' 表示距离左侧20%的位置。
3.3 tooltip 提示框
鼠标悬停时弹出的提示框，交互体验非常好。
tooltip: {
show: true, // 是否显示提示框
trigger: 'item', // 触发类型：'item' | 'axis' | 'none'
// 'item'表示触发数据项，'axis'表示触发坐标轴
triggerOn: 'mousemove', // 触发时机：'mousemove' | 'click' | 'mousemove|click'
position: function(point, params, dom, rect, size) {
// 自定义提示框位置，返回[x, y]数组
return [point[0] + 10, point[1] - 10];
},
padding: 10, // 内边距
backgroundColor: 'rgba(50,50,50,0.7)', // 背景色
borderColor: '#333', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: { // 文本样式
color: '#fff',
fontSize: 14
},
// 自定义提示框内容
formatter: function(params) {
// params可以是数组或单个对象，根据trigger不同
if (Array.isArray(params)) {
// axis触发，多个数据点
return params.map(function(item) {
return item.marker + item.seriesName + '：' + item.value;
}).join('<br/>');
} else {
// item触发，单个数据点
return params.marker + params.name + '：' + params.value;
}
},
// 提示框样式，支持丰富的CSS
extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.3);'
}
formatter 函数非常强大，你可以自由定义提示框的内容和样式。比如在上面代码里，我用 marker 属性来获取每个系列的标记符号，这样提示框里会显示彩色圆点。
3.4 legend 图例
图例用来展示不同系列的名称和颜色，方便用户区分。
legend: {
show: true,
type: 'scroll', // 图例类型：'plain' | 'scroll'（可滚动）
orient: 'horizontal', // 布局方向：'horizontal' | 'vertical'
left: 'center', // 水平位置
top: 10, // 垂直位置
data: ['销量', '利润', '成本'], // 图例数据，必须与series的name对应
textStyle: {
color: '#333',
fontSize: 12
},
itemGap: 20, // 图例项之间的间距
itemWidth: 14, // 图例标记宽度
itemHeight: 14, // 图例标记高度
icon: 'circle', // 图例标记形状：'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 'none'
// 滚动图例的配置
pageButtonItemGap: 5, // 翻页按钮与图例项的间距
pageIconColor: '#2f4554', // 翻页按钮颜色
pageIconInactiveColor: '#aaa' // 翻页按钮不可用时的颜色
}
当数据系列很多时，可以用 type: 'scroll' 实现可滚动的图例，用户体验更好。
四、常用图表类型详解
Echarts支持十几种图表类型，下面讲解最常用的几种，每种都配上完整的可运行代码。
4.1 柱状图 Bar
柱状图适合比较不同类别的数值大小。
var option = {
title: { text: '各部门季度销售额（万元）' },
tooltip: { trigger: 'axis' },
legend: { data: ['2023年', '2024年'] },
xAxis: {
type: 'category',
data: ['技术部', '市场部', '销售部', '运营部', '人事部']
},
yAxis: { type: 'value', name: '销售额（万元）' },
series: [
{
name: '2023年',
type: 'bar',
data: [120, 200, 150, 80, 70],
itemStyle: { color: '#5470c6' }
},
{
name: '2024年',
type: 'bar',
data: [150, 230, 180, 100, 85],
itemStyle: { color: '#91cc75' }
}
]
};
进阶技巧：堆叠柱状图
series: [
{
name: '国内',
type: 'bar',
stack: '总量', // 设置堆叠组名
data: [320, 302, 301, 334, 390],
itemStyle: { color: '#5470c6' }
},
{
name: '国外',
type: 'bar',
stack: '总量', // 与上面相同，才会堆叠
data: [120, 132, 101, 134, 90],
itemStyle: { color: '#91cc75' }
}
]
4.2 折线图 Line
折线图适合展示数据随时间变化的趋势。
var option = {
title: { text: '某城市2024年气温变化' },
tooltip: { trigger: 'axis' },
legend: { data: ['最高温', '最低温'] },
xAxis: {
type: 'category',
boundaryGap: false, // 折线图通常需要这个，让点落在刻度上
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: { type: 'value', name: '温度（℃）' },
series: [
{
name: '最高温',
type: 'line',
data: [5, 8, 15, 22, 28, 32, 35, 33, 28, 20, 12, 6],
smooth: true, // 平滑曲线
itemStyle: { color: '#ff7096' },
areaStyle: { // 填充区域
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255,112,150,0.5)' },
{ offset: 1, color: 'rgba(255,112,150,0.05)' }
])
}
},
{
name: '最低温',
type: 'line',
data: [-2, 0, 5, 12, 18, 22, 25, 24, 20, 13, 5, 0],
smooth: true,
itemStyle: { color: '#85d4f4' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(133,212,244,0.5)' },
{ offset: 1, color: 'rgba(133,212,244,0.05)' }
])
}
}
]
};
关键配置项：
smooth: true让折线变得平滑，去掉它默认是折线areaStyle给线条下方填充颜色，让图表更有层次感LinearGradient创建渐变填充，offset控制渐变位置（0=顶部，1=底部）
4.3 饼图 Pie
饼图适合展示各部分占整体的比例。
var option = {
title: { text: '2024年用户来源分布' },
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
// {b}是名称，{c}是数值，{d}是百分比
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '来源',
type: 'pie',
radius: ['40%', '70%'], // 环形图，内半径和外半径
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
formatter: '{b}\n{c}人 ({d}%)', // 显示名称、数值和百分比
lineHeight: 20
},
emphasis: { // 鼠标悬停时的效果
label: { show: true, fontSize: 16, fontWeight: 'bold' }
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}
]
};
饼图变环形图： 只需把 radius 改成数组形式，如 ['40%', '70%']，中间就会空出来，变成环形图。
4.4 散点图 Scatter
散点图适合展示两个变量之间的关系。
var option = {
title: { text: '身高与体重的关系' },
tooltip: { trigger: 'item' },
xAxis: { type: 'value', name: '身高(cm)' },
yAxis: { type: 'value', name: '体重(kg)' },
series: [
{
type: 'scatter',
data: [
[161, 52], [162, 50], [163, 55], [164, 57], [165, 54],
[166, 58], [167, 56], [168, 60], [169, 58], [170, 62],
[171, 65], [172, 63], [173, 68], [174, 65], [175, 70],
[176, 67], [177, 72], [178, 69], [179, 74], [180, 71],
[181, 75], [182, 78], [183, 76], [184, 80], [185, 77],
[186, 82], [187, 79], [188, 84], [189, 81], [190, 85]
],
symbolSize: function(value) {
// 散点大小随第三个维度变化
return value[2] * 2;
},
itemStyle: { color: '#ff9f7f' }
}
]
};
五、高级配置技巧
当你掌握了基础图表后，可以进一步配置更丰富的功能。
5.1 响应式适配
图表在不同屏幕尺寸下应该自动调整大小。
// 方式一：监听窗口resize事件
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
// 方式二：Echarts自带响应式（推荐）
var myChart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas',
devicePixelRatio: window.devicePixelRatio
});
// 方式三：在option中设置
var option = {
// 设置resize响应
responsive: true,
// 或者使用grid配置响应式边距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}
};
5.2 主题配置
Echarts支持多种内置主题，也可以自定义主题。
// 使用内置主题
var myChart = echarts.init(document.getElementById('main'), 'dark');
// 内置主题有：'dark' 和默认主题
// 自定义主题
var customTheme = {
backgroundColor: '#fff',
textStyle: { color: '#333' },
title: { textStyle: { color: '#333' } },
// ... 更多配置
};
var myChart = echarts.init(document.getElementById('main'), customTheme);
5.3 数据加载与动态更新
实际项目中，数据通常来自后端接口，需要异步加载。
var myChart = echarts.init(document.getElementById('main'));
// 模拟异步获取数据
fetch('https://api.example.com/sales-data')
.then(response => response.json())
.then(data => {
// 更新数据
myChart.setOption({
xAxis: { data: data.categories },
series: [{ data: data.values }]
});
})
.catch(error => {
console.error('数据加载失败', error);
myChart.showLoading(); // 显示加载提示
});
// 定时更新数据（比如实时数据）
var timer = setInterval(function() {
fetch('https://api.example.com/realtime-data')
.then(response => response.json())
.then(data => {
myChart.setOption({
series: [{ data: data.current }]
});
});
}, 5000); // 每5秒更新一次
// 组件销毁时清除定时器
window.addEventListener('beforeunload', function() {
clearInterval(timer);
myChart.dispose(); // 释放资源
});
5.4 交互事件
Echarts提供了丰富的事件，可以监听用户的操作。
myChart.on('click', function(params) {
// 点击图表时触发
console.log('点击了：', params.name, params.value);
alert('你点击了 ' + params.name + '，数值是 ' + params.value);
});
myChart.on('highlight', function(params) {
// 鼠标悬停时触发
console.log('悬停在：', params.name);
});
myChart.on('downplay', function(params) {
// 鼠标移开时触发
console.log('离开：', params.name);
});
// 点击跳转到新页面
myChart.on('click', function(params) {
if (params.componentType === 'series') {
window.location.href = '/detail?id=' + params.dataIndex;
}
});
5.5 地图图表
Echarts支持中国地图和世界地图，适合展示地域相关的数据。
// 引入地图数据（需要先注册地图）
// 中国地图数据下载地址：echarts.apache.org/zh/download-map.html
// 注册地图
echarts.registerMap('china', chinaGeoJSON);
var option = {
title: { text: '中国各省份GDP分布' },
tooltip: { trigger: 'item', formatter: '{b}<br/>GDP: {c} 亿元' },
legend: {
orient: 'vertical',
left: 'left',
data: ['GDP']
},
visualMap: {
min: 0,
max: 120000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['lightcyan', 'royalblue']
}
},
series: [
{
name: 'GDP',
type: 'map',
map: 'china',
roam: true, // 支持缩放和平移
zoom: 1.2,
label: { show: true },
emphasis: {
label: { show: true },
itemStyle: {
areaColor: '#ffd700'
}
},
data: [
{ name: '广东省', value: 129119 },
{ name: '江苏省', value: 122876 },
{ name: '山东省', value: 92069 },
{ name: '浙江省', value: 82553 },
{ name: '河南省', value: 67742 },
// ... 更多省份数据
]
}
]
};
六、实战案例：完整Dashboard
下面是一个综合案例，展示多个图表组合在一个页面中，模拟真实的Dashboard场景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据可视化Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f0f2f5;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
color: #333;
font-size: 24px;
}
.dashboard {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}
.card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-title {
font-size: 16px;
color: #333;
margin-bottom: 15px;
font-weight: 500;
}
.chart {
width: 100%;
height: 300px;
}
.card-wide {
grid-column: span 2;
}
.card-wide .chart {
height: 350px;
}
/* 统计卡片 */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 20px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.stat-card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
.stat-value {
font-size: 32px;
font-weight: bold;
color: #1890ff;
}
.stat-label {
font-size: 14px;
color: #666;
margin-top: 8px;
}
.stat-change {
font-size: 12px;
margin-top: 5px;
}
.up { color: #52c41a; }
.down { color: #f5222d; }
</style>
</head>
<body>
<div class="header">
<h1>📊 电商数据可视化看板</h1>
</div>
<!-- 统计卡片 -->
<div class="stats">
<div class="stat-card">
<div class="stat-value">¥128,456</div>
<div class="stat-label">今日销售额</div>
<div class="stat-change up">↑ 12.5% 较昨日</div>
</div>
<div class="stat-card">
<div class="stat-value">3,842</div>
<div class="stat-label">订单数量</div>
<div class="stat-change up">↑ 8.3% 较昨日</div>
</div>
<div class="stat-card">
<div class="stat-value">15,678</div>
<div class="stat-label">访问量</div>
<div class="stat-change down">↓ 2.1% 较昨日</div>
</div>
<div class="stat-card">
<div class="stat-value">98.5%</div>
<div class="stat-label">好评率</div>
<div class="stat-change up">↑ 0.3% 较昨日</div>
</div>
</div>
<!-- 图表区域 -->
<div class="dashboard">
<div class="card card-wide">
<div class="card-title">📈 销售趋势（近30天）</div>
<div id="trendChart" class="chart"></div>
</div>
<div class="card">
<div class="card-title">🥧 商品类别占比</div>
<div id="pieChart" class="chart"></div>
</div>
<div class="card">
<div class="card-title">📊 各平台销售对比</div>
<div id="barChart" class="chart"></div>
</div>
</div>
<script>
// 销售趋势图
var trendChart = echarts.init(document.getElementById('trendChart'));
var trendOption = {
tooltip: { trigger: 'axis' },
legend: { data: ['销售额', '订单数'], top: 10 },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: generateDates(30)
},
yAxis: [
{ type: 'value', name: '销售额(元)' },
{ type: 'value', name: '订单数', position: 'right' }
],
series: [
{
name: '销售额',
type: 'line',
smooth: true,
data: generateRandomData(30, 80000, 150000),
itemStyle: { color: '#5470c6' },
areaStyle: { color: 'rgba(84,112,198,0.2)' }
},
{
name: '订单数',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: generateRandomData(30, 2000, 5000),
itemStyle: { color: '#91cc75' },
areaStyle: { color: 'rgba(145,204,117,0.2)' }
}
]
};
trendChart.setOption(trendOption);
// 饼图
var pieChart = echarts.init(document.getElementById('pieChart'));
var pieOption = {
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: { orient: 'vertical', left: 'left', top: 'center' },
series: [{
type: 'pie',
radius: ['30%', '70%'],
center: ['60%', '50%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
label: { show: true, formatter: '{b}\n{d}%' },
data: [
{ value: 335, name: '电子产品' },
{ value: 310, name: '服装' },
{ value: 234, name: '食品' },
{ value: 135, name: '家居' },
{ value: 1548, name: '其他' }
]
}]
};
pieChart.setOption(pieOption);
// 柱状图
var barChart = echarts.init(document.getElementById('barChart'));
var barOption = {
tooltip: { trigger: 'axis' },
legend: { data: ['京东自营', '天猫', '拼多多'], top: 10 },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
yAxis: { type: 'value' },
series: [
{ name: '京东自营', type: 'bar', data: [1200, 1320, 1010, 1340, 1900, 2300, 2100], itemStyle: { color: '#5470c6' } },
{ name: '天猫', type: 'bar', data: [220, 182, 191, 234, 290, 330, 310], itemStyle: { color: '#91cc75' } },
{ name: '拼多多', type: 'bar', data: [150, 232, 201, 154, 190, 330, 410], itemStyle: { color: '#fac858' } }
]
};
barChart.setOption(barOption);
// 响应式
window.addEventListener('resize', function() {
trendChart.resize();
pieChart.resize();
barChart.resize();
});
// 辅助函数：生成日期数组
function generateDates(days) {
var dates = [];
var now = new Date();
for (var i = days - 1; i >= 0; i--) {
var date = new Date(now);
date.setDate(date.getDate() - i);
dates.push((date.getMonth() + 1) + '/' + date.getDate());
}
return dates;
}
// 辅助函数：生成随机数据
function generateRandomData(count, min, max) {
var data = [];
for (var i = 0; i < count; i++) {
data.push(Math.floor(Math.random() * (max - min) + min));
}
return data;
}
</script>
</body>
</html>
七、性能优化与最佳实践
当图表数据量大或页面复杂时，性能问题会显现。下面是一些实用的优化技巧。
7.1 大数据量优化
// 1. 使用 progressive 渐进式渲染
var option = {
series: [{
type: 'line',
data: largeData,
progressive: 1000, // 每帧渲染的数据点数
progressiveThreshold: 3000 // 数据量超过此值才启用渐进式渲染
}]
};
// 2. 使用 sampling 降采样
var option = {
series: [{
type: 'line',
data: largeData,
sampling: 'lttb' // 采样算法：'lttb' | 'average' | 'max' | 'min'
}]
};
// 3. 分区渲染
chart.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true
});
7.2 避免内存泄漏
// 正确做法：组件销毁时释放资源
window.addEventListener('beforeunload', function() {
// 清除所有定时器
clearInterval(myTimer);
// 销毁所有图表实例
chart.dispose();
});
// 在Vue/React等框架中
// Vue
beforeUnmount() {
this.chart.dispose();
},
// React
useEffect(() => {
return () => {
chart.dispose();
};
}, []);
7.3 配置项命名规范
为了让团队代码更一致，建议制定配置规范：
// 颜色统一配置
var colorPalette = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
// 全局字体配置
var textStyle = { fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif' };
// 全局边框圆角
var borderRadius = 8;
// 在option中使用
var option = {
color: colorPalette,
textStyle: textStyle,
// ...
};
八、常见问题排查
问题1：图表不显示
排查步骤：
- 检查容器是否有宽高（最常见的原因）
- 检查Echarts库是否正确引入
- 检查浏览器控制台是否有报错
// 检查容器尺寸
console.log(document.getElementById('main').offsetWidth, document.getElementById('main').offsetHeight);
问题2：数据不更新
// 正确做法：使用 setOption 并传入完整配置
chart.setOption({
series: [{ data: newData }]
});
// 错误做法：直接修改数据不触发更新
chart.series[0].data = newData;
问题3：中文乱码
<!-- 确保HTML文件使用UTF-8编码 -->
<meta charset="UTF-8">
九、学习资源推荐
- 官方文档：echarts.apache.org/zh/tutorial.html（最权威，更新最快）
- 官方示例库：echarts.apache.org/examples/（300+实例，可以直接复制修改）
- B站视频教程：搜索”Echarts教程”，有很多系统课程
- GitHub：github.com/apache/echarts（查看源码，理解原理）
十、总结与下一步
Echarts的学习路径可以这样规划：
- 入门阶段：理解配置项结构，学会画柱状图、折线图、饼图
- 进阶阶段：掌握交互事件、动态数据、主题配置
- 精通阶段：学习自定义系列、数据可视化大屏、性能优化
记住，Echarts的精髓在于”配置驱动”。每个细节都有对应的配置项，多看官方示例，多动手实践，很快就能从入门到精通。
最后送你一句话：图表不是装饰，而是数据的故事。好的图表能让观者一眼看懂数据背后的含义，这也是可视化工作者的价值所在。
祝你学习愉快，画出属于自己的精彩图表！🎨