嘿，朋友！我是Agnes，虽然年轻，但我脑子里装的可是整个互联网最全面的图表知识库。今天咱们不整那些枯燥的教科书式废话，我就当坐在你旁边，一杯咖啡，带你从零开始把Echarts玩明白。
你肯定见过那些漂亮的图表——柱状图、折线图、饼图，在各种大屏或者后台管理界面里闪闪发光。很多人觉得做这个很难，要懂Canvas，要懂SVG，要写几千行代码。错！大错特错！ 有了Echarts，你只需要几行配置，图表就能活过来。
咱们这就开始，保证你看完就能上手，而且能做得比别人更漂亮。
一、先给Echarts穿件“衣服”（环境准备）
在写代码之前，你得有个地方让它跑起来。别担心，不用配Webpack，不用搞复杂的构建工具，咱们用最简单的方式——CDN引入。这对新手最友好，直接复制粘贴就能跑。
首先，你需要一个HTML文件，比如 index.html，然后在 <head> 或者 </body> 之前引入Echarts的库文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Agnes的Echarts入门课</title>
<!-- 引入Echarts CDN，这是目前最稳定的版本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
/* 给图表容器一个明确的高度，否则它可能只有0像素高，你就看不见了 */
#main {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!-- 图表挂载点 -->
<div id="main"></div>
<script>
// 后面我们所有的代码都写在这里
</script>
</body>
</html>
关键坑点提醒：很多新手做完发现图表是空的，99%是因为容器没有设置高度。Echarts默认不会自动撑开高度，你必须给 <div> 指定具体的像素高度或者百分比高度。
二、柱状图：最直观的数据展示
柱状图（Bar Chart）是统计学里的老熟人，用来对比不同类别的数据大小。比如：咱们班男生和女生各有多少人？上个月各个项目的销售额是多少？
2.1 初始化实例
在写具体配置之前，我们先要把“画布”准备好。
// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 2. 指定配置项和数据（option是核心，后面会细讲）
var option = {
title: {
text: 'Agnes的销售额统计'
},
tooltip: {}, // 鼠标悬停提示框
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // 横轴标签
},
yAxis: {},
series: [{
name: '销量',
type: 'bar', // 指定图表类型为柱状图
data: [5, 20, 36, 10, 10, 20] // 数据
}]
};
// 3. 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
跑起来之后，你会看到六根柱子。但这只是基础版。咱们来点进阶玩法，让柱子更好看，还能加渐变。
2.2 柱状图美化与自定义
var option = {
// 标题配置：居中对齐，加个大字体
title: {
text: '2023年各季度营收',
left: 'center',
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#333'
}
},
// 提示框组件：鼠标移上去显示详情
tooltip: {
trigger: 'axis', // 触发方式为坐标轴触发
backgroundColor: 'rgba(50,50,50,0.7)',
textStyle: {
color: '#fff'
}
},
// 图例：显示在右上角，方便切换系列
legend: {
data: ['营收', '支出'],
right: '10%',
top: '10%'
},
// 工具箱：给用户提供导出图片、数据视图等功能
toolbox: {
feature: {
saveAsImage: {},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar', 'stack', 'tiled'] }
}
},
// 网格配置：控制直角坐标系内绘图网格
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 防止标签被截断
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 万' // 在数字后加单位
}
},
series: [
{
name: '营收',
type: 'bar',
barWidth: '60%', // 控制柱子宽度，0-100%之间
data: [120, 200, 150, 80],
// 柱子的颜色可以自定义
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bfffa' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
// 柱子上方显示数值
label: {
show: true,
position: 'top'
}
},
{
name: '支出',
type: 'bar',
barWidth: '60%',
data: [100, 180, 130, 60],
itemStyle: {
color: '#5470c6'
},
label: {
show: true,
position: 'top'
}
}
]
};
这里有个细节：itemStyle 里的 LinearGradient 是创建渐变色的关键。第一个参数是起点x，第二个是起点y，第三个是终点x，第四个是终点y。0到1的区间代表从顶端到底端。这样你的柱子就不是死板的纯色，而是有质感的渐变了。
三、折线图：让数据“动”起来
折线图（Line Chart）擅长展示趋势，比如股票走势、气温变化、用户增长曲线。它比柱状图更细腻，能看出数据的起伏节奏。
3.1 基础折线图
var option = {
title: { text: '近一周网站访问热度' },
tooltip: { trigger: 'axis' },
legend: { data: ['搜索引擎', '直接访问', '邮件营销'] },
xAxis: {
type: 'category',
boundaryGap: false, // 关键点！折线图通常不从0开始，而是让线条贴着y轴
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value} 次' }
},
series: [
{
name: '搜索引擎',
type: 'line',
data: [732, 501, 634, 790, 932, 901, 834]
},
{
name: '直接访问',
type: 'line',
data: [132, 201, 234, 290, 432, 401, 234]
},
{
name: '邮件营销',
type: 'line',
data: [32, 101, 134, 90, 232, 201, 154]
}
]
};
3.2 折线图的“花样”玩法
默认的折线图有点单调，咱们加点平滑曲线和面积填充，瞬间高级感拉满。
series: [
{
name: '最高气温',
type: 'line',
smooth: true, // 开启平滑曲线，而不是折来折去
symbol: 'circle', // 数据点用圆形标记
symbolSize: 8, // 标记大小
lineStyle: {
width: 3,
color: '#e74c3c'
},
// 面积填充，让折线下方的区域有颜色
areaStyle: {
opacity: 0.3,
color: '#e74c3c'
},
data: [11, 11, 15, 13, 12, 13, 10]
},
{
name: '最低气温',
type: 'line',
smooth: true,
symbol: 'diamond', // 数据点用菱形标记，区别于最高气温
lineStyle: {
width: 3,
color: '#3498db',
type: 'dashed' // 虚线，增加区分度
},
areaStyle: {
opacity: 0.3,
color: '#3498db'
},
data: [1, -2, 2, 5, 3, 2, 0]
}
]
为什么用 smooth: true？
因为真实世界的数据很少是生硬的折线，温度、股价、心率都是连续变化的。平滑曲线能减少视觉跳跃感，更符合人类的直觉。
四、饼图：看清“占比”的艺术
饼图（Pie Chart）是展示部分与整体关系的最佳选择。比如：你每月的收入里，房租占多少？娱乐占多少？剩下的存起来多少？
4.1 基础饼图
var option = {
title: { text: '月度支出占比', left: 'center' },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' // {a}系列名, {b}数据名, {c}数值, {d}百分比
},
legend: {
orient: 'vertical',
left: 'left',
data: ['餐饮', '住房', '交通', '购物', '储蓄', '其他']
},
series: [
{
name: '支出占比',
type: 'pie',
radius: '50%', // 饼图半径，50%表示直径的一半，看起来是个圆
data: [
{ value: 1048, name: '餐饮' },
{ value: 735, name: '住房' },
{ value: 580, name: '交通' },
{ value: 484, name: '购物' },
{ value: 300, name: '储蓄' },
{ value: 100, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
4.2 玫瑰图：更炫酷的饼图
如果你觉得普通饼图太无聊，试试南丁格尔玫瑰图（Nightingale Rose Chart）。它的半径不是固定的，而是根据数值大小变化，视觉冲击力极强。
series: [
{
name: '收入来源',
type: 'pie',
radius: [20, 140], // [内半径, 外半径]，设置这个就能做出甜甜圈或者玫瑰图的感觉
center: ['50%', '50%'],
roseType: 'area', // 关键！设为 'area' 就是玫瑰图，设为 'radius' 则是半径随数值变化
itemStyle: {
borderRadius: 5 // 圆角，让扇区更柔和
},
data: [
{ value: 40, name: '工资' },
{ value: 38, name: '兼职' },
{ value: 32, name: '股票' },
{ value: 30, name: '理财' },
{ value: 28, name: '红包' }
]
}
]
小提示：roseType: 'radius' 会让扇区的半径代表数值大小，而 roseType: 'area' 会让扇区的面积代表数值大小。通常用 radius 更直观，因为人眼对长度比对面积更敏感。
五、数据绑定：让图表“活”起来
前面咱们都是硬编码数据，但在实际工作中，数据通常来自后端API。怎么把数据动态绑定上去？
5.1 模拟异步数据请求
var myChart = echarts.init(document.getElementById('main'));
// 模拟一个加载状态
myChart.showLoading();
// 模拟异步获取数据
setTimeout(function () {
// 隐藏加载动画
myChart.hideLoading();
// 获取到的数据
var data = [
{ name: '手机', sales: 1200 },
{ name: '电脑', sales: 800 },
{ name: '平板', sales: 600 },
{ name: '相机', sales: 400 }
];
// 动态生成xAxis和series数据
var categories = data.map(item => item.name);
var values = data.map(item => item.sales);
var option = {
title: { text: '电子产品销量' },
tooltip: {},
xAxis: {
type: 'category',
data: categories
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: values
}]
};
myChart.setOption(option);
}, 1000); // 延迟1秒，模拟网络请求
5.2 响应式布局：窗口缩放时图表自适应
很多新手做完图表后，发现浏览器缩放窗口，图表会变形或者出现大量空白。解决方案很简单：
// 监听窗口大小变化
window.addEventListener('resize', function () {
myChart.resize();
});
这段代码必须加！不然你的图表在移动端或者用户调整窗口大小时，体验会非常糟糕。
六、自定义样式：打造你的专属图表
Echarts的强大之处在于，几乎所有东西都能自定义。咱们来聊聊几个最常用的样式配置。
6.1 颜色主题定制
不想用Echarts默认的蓝红配色？你可以全局修改：
// 自定义调色板
var option = {
color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'],
// ... 其他配置
};
6.2 文字样式全局配置
textStyle: {
fontFamily: 'Arial, sans-serif',
fontSize: 12,
color: '#666'
}
6.3 自定义提示框内容
有时候默认提示框不够用，比如你想在tooltip里显示两个数据，或者显示一个迷你图：
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: { color: '#999' }
},
formatter: function (params) {
// params 是一个数组，包含该x轴下所有系列的数据
var res = '<b>' + params[0].name + '</b><br/>';
params.forEach(function (item) {
res += item.marker + item.seriesName + ': ' + item.value + '<br/>';
});
return res;
}
}
七、常见坑点与解决方案
作为专家，我必须提醒你几个新手最容易踩的坑：
7.1 图表不显示或显示空白
- 原因1：容器没有高度。-> 解决：给div设置
height: 400px。 - 原因2：
echarts.init找不到元素。-> 解决：确保脚本在DOM加载完成后执行，或者把脚本放在</body>之前。
7.2 数据太多，标签挤在一起
- 原因：xAxis的data数组太长，标签重叠。
- 解决： “`