说实话，我刚接触 ECharts 的时候，看到那一堆密密麻麻的 JSON 配置项，头都大了。尤其是那个 option，感觉像个黑盒，改哪里不知道，报错也不知道在哪。但当你真正搞懂它的底层逻辑后，你会发现它其实比 Excel 的图表功能灵活一万倍。今天这篇文章，我不跟你讲那些虚的“引言”和“结语”，咱们直接上手，把柱状图、折线图、饼图这些最常用的组件，连同最让人头疼的自定义 tooltip，以及最后怎么让搜索引擎找到你的图表，一次性讲透。
为什么 ECharts 让你又爱又恨？
首先得明确一点：ECharts 是百度开源的，后来捐给了 Apache，现在社区活跃度极高。它最大的特点是什么？配置驱动。你不需要写复杂的 DOM 操作，只需要改一个对象，图表就变了。
但问题来了，option 这个对象层级太深了。series 下面是 data，tooltip 单独一层，xAxis 又一层……很多新手（包括当初的我）经常把 xAxis 写在 series 里面，结果图表直接白屏或者报错，连个像样的错误提示都没有。
咱们从最简单的环境搭建开始，别急着复制粘贴，先理解结构。
第一步：搭建你的第一个 ECharts 实例
在开始之前，你需要一个 HTML 文件和一个容器。这是所有图表的基石。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个 ECharts 图表</title>
<!-- 引入 ECharts，这里用 CDN 方便大家直接运行 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
/* 关键：图表容器必须有明确的高度，否则不显示 */
#main {
width: 100%;
height: 400px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<!-- 图表容器 -->
<div id="main"></div>
<script>
// 1. 初始化实例，传入 DOM 节点
var myChart = echarts.init(document.getElementById('main'));
// 2. 准备 option 配置
var option = {
title: {
text: '销售数据统计'
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 3. 显示图表
myChart.setOption(option);
</script>
</body>
</html>
看懂了吗？流程就三步：初始化 -> 写配置 -> 渲染。很多人把 init 写错了，或者忘记给 div 设置高度，导致图表不出来，这时候别慌，先检查这三点。
柱状图（Bar Chart）：不只是画柱子
柱状图是最基础的，但里面有很多实战技巧。比如，你想让柱子显示数值？想改变柱子的颜色？想做个堆叠柱状图？
基础配置详解
var option = {
// 标题可以放在右上角，也可以自定义位置
title: {
text: '2023年各品类销售额',
right: 10,
top: 10,
textStyle: { fontSize: 18, fontWeight: 'bold' }
},
// 工具箱，提供下载图片、数据视图等功能
toolbox: {
feature: {
saveAsImage: {},
dataView: { readOnly: false }
}
},
tooltip: {
trigger: 'axis', // 触发类型为坐标轴，鼠标移上去显示整条轴的数据
axisPointer: { type: 'shadow' } // 阴影指示器
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 防止标签被裁剪
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLabel: { interval: 0, rotate: 0 } // 标签不倾斜
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value} 元' } // 单位
},
series: [
{
name: '线上销售',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
// 柱状图样式自定义
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0] // 圆角柱子，看起来很现代
},
// 显示数值
label: {
show: true,
position: 'top'
}
},
{
name: '线下销售',
type: 'bar',
data: [220, 180, 230, 120, 150, 190, 210],
itemStyle: { color: '#91cc75' }
}
]
};
实战技巧：堆叠柱状图
如果你想看每个类别的总和，只需要在 series 中给不同的系列设置相同的 stack 值：
series: [
{ name: 'A', type: 'bar', stack: 'total', data: [120, 132, 101, 134, 90, 230, 210] },
{ name: 'B', type: 'bar', stack: 'total', data: [220, 182, 191, 234, 290, 330, 310] }
]
这样，柱子就会叠在一起，而不是并排显示。这在分析“总量构成”时非常有用。
折线图（Line Chart）：连接数据的艺术
折线图适合展示趋势。比如股价、气温、用户增长。ECharts 的折线图默认是平滑曲线，但你可以改成直角折线。
面积图：让趋势更直观
如果你希望折线图下方有填充色，增强视觉冲击力，可以设置 areaStyle：
series: [{
name: '访问量',
type: 'line',
smooth: true, // 平滑曲线
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(84, 112, 198, 0.8)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
])
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
这里用了一个线性渐变，从深色到浅色，看起来比纯色填充高级很多。
实战技巧：多 Y 轴（双轴图）
有时候，销售额（万元）和增长率（百分比）放在同一个坐标系里，量级差异太大，一个轴就看不清楚。这时候需要双 Y 轴：
yAxis: [
{
type: 'value',
name: '销售额',
position: 'left'
},
{
type: 'value',
name: '增长率',
position: 'right',
axisLine: { show: true, lineStyle: { color: '#91cc75' } },
axisLabel: { formatter: '{value}%' }
}
],
series: [
{
name: '销售额',
type: 'bar',
yAxisIndex: 0, // 对应第一个 Y 轴
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '增长率',
type: 'line',
yAxisIndex: 1, // 对应第二个 Y 轴
smooth: true,
data: [10, 15, 12, 18, 25, 20, 15]
}
]
注意 yAxisIndex 这个属性，它是连接 series 和 yAxis 的关键。很多新手忘了加这个，导致数据错位。
饼图（Pie Chart）：占比的真相
饼图适合展示“部分占整体”的关系。但 ECharts 的饼图有很多花哨的玩法，比如南丁格尔图（玫瑰图）。
普通饼图
series: [{
type: 'pie',
radius: ['40%', '70%'], // 内半径和外半径，形成环形图
center: ['50%', '50%'],
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
],
// 高亮效果
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
玫瑰图：视觉冲击力更强
把 radius 改成 roseType: 'area' 或 'radius'，饼图就变成了玫瑰图：
series: [{
type: 'pie',
roseType: 'area', // 面积玫瑰图，或者 'radius' 为半径玫瑰图
radius: [20, 140],
data: [
{ value: 40, name: 'A' },
{ value: 38, name: 'B' },
{ value: 32, name: 'C' },
{ value: 30, name: 'D' }
]
}]
玫瑰图的优势在于，它让较小的扇区也能被看见，避免了普通饼图中小扇区被忽略的问题。
自定义 Tooltip：让数据会说话
这是 most requested 的功能。默认的 tooltip 只能显示 {b}: {c}，太单调了。我们可以通过回调函数，自定义 tooltip 的内容，甚至加 HTML 标签、图片、进度条。
基础自定义：拼接字符串
tooltip: {
trigger: 'axis',
formatter: function (params) {
// params 是一个数组，包含当前 axis 上的所有 series 数据
var res = '<div style="font-weight:bold;margin-bottom:5px;">' + params[0].name + '</div>';
params.forEach(function (item) {
res += '<div><span style="display:inline-block;width:10px;height:10px;background:' + item.color + ';margin-right:5px;"></span>';
res += item.seriesName + ': ' + item.value + '</div>';
});
return res;
}
}
高级自定义：添加表格和图片
假设你要做一个电商数据看板，鼠标悬停时显示商品图片和价格：
tooltip: {
trigger: 'item',
formatter: function (params) {
// 假设数据中有一个字段叫 img
var imgHtml = params.data.img
? '<img src="' + params.data.img + '" style="width:50px;height:50px;margin-right:10px;" />'
: '';
return '<div style="display:flex;align-items:center;">'
+ imgHtml
+ '<div><strong>' + params.name + '</strong><br/>'
+ '价格: ' + params.value + ' 元<br/>'
+ '库存: ' + params.data.stock + '</div></div>';
}
}
数据源需要预先准备好图片地址和库存信息：
data: [
{ value: 100, name: 'iPhone 15', img: 'https://example.com/iphone.jpg', stock: 50 },
{ value: 200, name: 'MacBook', img: 'https://example.com/macbook.jpg', stock: 20 }
]
实战技巧：根据数据动态改变颜色
有时候，如果数值异常高，你想让 tooltip 里的数字变红警示：
tooltip: {
formatter: function (params) {
var value = params.value;
var color = value > 1000 ? 'red' : 'black';
return '<span style="color:' + color + ';font-weight:bold;">' + value + '</span>';
}
}
常见问题排查：为什么我的图表不显示？
- 图表白屏：90% 的原因是容器没有高度。检查 CSS，确保
#main有height: 400px之类的明确高度。 - 数据不更新：
setOption的时候，如果只传部分配置，可能会覆盖之前的配置。使用myChart.setOption(option, true)，第二个参数notMerge设为true可以完全替换，但通常默认false是合并，注意区分。 - tooltip 显示乱码：检查 JSON 编码，确保服务器返回的数据是 UTF-8。
- 响应式失效：窗口大小改变时，图表没有自适应。需要在
resize事件中调用myChart.resize()。
window.addEventListener('resize', function () {
myChart.resize();
});
SEO 优化：让搜索引擎读懂你的图表
这是很多人忽略的一点。ECharts 生成的图表是 Canvas 或 SVG，搜索引擎爬虫根本看不懂里面画了什么。你的页面关于“销售数据”的关键词就没有权重。
解决方案：隐藏文本 + Schema.org 结构化数据
- 在 HTML 中添加隐藏的文本描述
<div id="main" style="height:400px;"></div>
<div style="display:none;" aria-hidden="true">
<h2>2023年销售数据概览</h2>
<p>周一销售额120元，周二200元，周三150元，周四80元，周五70元，周六110元，周日130元。线上销售整体呈上升趋势，周末销量明显高于工作日。</p>
</div>
- 使用 JSON-LD 结构化数据
在 <head> 中添加 Schema.org 标记，帮助搜索引擎理解数据：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Dataset",
"name": "2023年销售数据统计",
"description": "包含周一到周日的线上与线下销售额对比",
"distribution": [
{
"@type": "DataDownload",
"encodingFormat": "application/json",
"contentUrl": "https://api.example.com/sales-data"
}
],
"temporalCoverage": "2023-01-01/2023-12-31"
}
</script>
- 关键 SEO 关键词指南
在文章或页面标题、描述中嵌入以下关键词，能显著提升搜索排名：
- 核心词：
ECharts 教程,ECharts 实例,ECharts 配置项 - 长尾词：
ECharts 自定义 tooltip,ECharts 柱状图 教程,ECharts 饼图 环形图,ECharts 双 Y 轴 - 问题型词：
ECharts 图表不显示怎么办,ECharts tooltip 格式化
总结：从新手到高手的路径
学习 ECharts，不要试图一次性记住所有 API。我的建议是：
- 先跑通 Demo：复制上面的代码，在本地跑起来，亲眼看到图表变化。
- 按需查阅文档：遇到具体问题，再去官网文档找对应配置项。官方文档非常详细，记得切换到“示例”标签看代码。
- 多折腾样式：ECharts 的美感很大程度上来自于
itemStyle,label,tooltip的自定义。多试几个颜色、圆角、阴影，你会突然发现“原来可以这么好看”。 - 性能优化：数据量大时（超过几千条），考虑使用
large: true开启大数据模式，或者后端聚合数据，避免浏览器卡死。
最后，记住一点：ECharts 是一个工具，它的强大在于灵活。不要害怕改代码，报错是学习最快的方式。现在，打开你的编辑器，创建一个 index.html，把上面的代码贴进去，看看你的第一个图表是如何诞生的吧。