一、教程概述
ECharts 是由百度开源、现为 Apache 基金会孵化项目的高性能 JavaScript 数据可视化库，支持主流浏览器（IE8+、Chrome、Firefox、Safari 等）及移动端，底层基于矢量图形引擎 ZRender，具备丰富的图表类型、灵活的配置体系与强大的交互能力，广泛应用于商业智能（BI）、数据监控、大屏展示等场景。
二、环境准备
2.1 引入方式（三种主流方案）
表格
| 方式 | 适用场景 | 引入代码示例 |
|---|---|---|
| CDN 引入 | 快速原型、学习演示 | <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"> |
| NPM 安装 | 项目工程化开发 | npm install echarts --save import * as echarts from 'echarts'; |
| 按需引入 | 优化打包体积（推荐生产） | js<br>import * as echarts from 'echarts/core';<br>import {<br> BarChart,<br> LineChart,<br> PieChart<br>} from 'echarts/charts';<br>import {<br> TitleComponent,<br> TooltipComponent,<br> GridComponent,<br> LegendComponent<br>} from 'echarts/components';<br>import { CanvasRenderer } from 'echarts/renderers';<br><br>echarts.use([<br> TitleComponent,<br> TooltipComponent,<br> GridComponent,<br> LegendComponent,<br> BarChart,<br> LineChart,<br> PieChart,<br> CanvasRenderer<br>]);<br> |
✅ 建议 ：生产环境优先使用 按需引入，可将包体积减少 70% 以上。
三、基础使用流程
3.1 核心三步法
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>ECharts 基础示例</title>
<!-- 引入 ECharts -->
<script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js">
</head>
<body>
<!-- 1. 准备 DOM 容器 -->
<div id="main" style="width: 800px; height: 500px;"></div>
<script>
// 2. 初始化实例
const myChart = echarts.init(document.getElementById('main'));
// 3. 指定配置项与数据
const option = {
title: {
text: 'ECharts 入门柱状图'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 4. 应用配置
myChart.setOption(option);
</script>
</body>
</html>🔍 关键点：
echarts.init()必须在 DOM 加载完成后调用- 容器必须设置明确的
width和height（建议使用像素或百分比）setOption()是唯一渲染入口，每次数据更新均需调用
四、核心配置项详解
4.1 组件层级结构
表格
| 组件 | 作用 | 常用属性 |
|-------------------------|-------|---------------------------------------------------------------|---------------------------------------------|--------------------------------------|
| **title | 图表标题 | text, subtext, left, top, textStyle |
| tooltip | 数据提示框 | `trigger: 'item' | 'axis', formatter` |
| legend | 图例 | data: [...], `orient: 'horizontal' | 'vertical', top: 'top'` |
| xAxis / yAxis | 坐标轴 | `type: 'category' | 'value', name, axisLabel, splitLine` |
| series | 数据系列 | `type: 'bar' | 'line' | 'pie', data, name, itemStyle` |
| toolbox | 工具箱 | show: true, feature: { saveAsImage, dataView, magicType } |
| dataZoom | 数据缩放 | `type: 'slider' | 'inside', start: 0, end: 100` |
| grid** | 绘图区域 | left, right, top, bottom, containLabel |
4.2 示例：带交互的折线图配置
javascript
const option = {
title: {
text: '月度销售趋势',
left: 'center',
textStyle: { fontSize: 18, fontWeight: 'bold' }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['线上', '线下'],
top: '5%'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLabel: { rotate: 0 }
},
yAxis: {
type: 'value',
name: '销售额（万元）',
splitLine: { show: true, lineStyle: { type: 'dashed' } }
},
series: [
{
name: '线上',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330],
smooth: true,
itemStyle: { color: '#5470C6' }
},
{
name: '线下',
type: 'line',
data: [620, 732, 701, 734, 1090, 1130],
smooth: true,
itemStyle: { color: '#91CC75' }
}
],
toolbox: {
show: true,
feature: {
saveAsImage: {},
dataView: {},
magicType: { type: ['line', 'bar'] }
}
},
dataZoom: [
{
type: 'slider',
start: 0,
end: 50
}
]
};五、主流图表类型实战
表格
| 图表类型 | 类型标识 | 适用场景 | 关键配置 |
|-----------|-------------|-------|-------------------------------------------------------|-----|
| 柱状图 | 'bar' | 数值对比 | stack: 'total' 实现堆叠，barWidth 控制宽度 |
| 折线图 | 'line' | 趋势分析 | smooth: true 平滑曲线，symbol: 'circle' 数据点样式 |
| 饼图 | 'pie' | 比例分布 | radius: ['40%', '70%'] 环形图，roseType: 'area' 南丁格尔图 |
| 地图 | 'map' | 地理分布 | 需引入 echarts/map/js/china.js，itemStyle 控制区域颜色 |
| 散点图 | 'scatter' | 相关性分析 | symbolSize: data => data 控制点大小（三维数据） |
| 混合图 | 多 series | 复合分析 | 同一图表中组合 bar + line，使用 `yAxisIndex: 0 | 1` |
5.1 饼图（环形 + 南丁格尔）示例
javascript
series: [{
type: 'pie',
radius: ['40%', '70%'],
roseType: 'area', // 扇区半径展示数值，角度统一
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: { show: true, formatter: '{b}\n{c} ({d}%)' }
}]六、高级特性与最佳实践
6.1 按需引入（性能优化）
javascript
// ✅ 推荐：仅引入所需模块
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
CanvasRenderer
]);⚡ 效果 ：从
~200KB（全量）降至~40KB（仅柱状图）
6.2 主题定制
javascript
// 使用内置主题
const myChart = echarts.init(dom, 'dark');
// 自定义主题（JSON 格式）
echarts.registerTheme('customTheme', {
color: ['#5470C6', '#91CC75', '#EE6666', '#73C0DE', '#3FC1C9'],
textStyle: { fontFamily: 'Microsoft YaHei' }
});
const myChart = echarts.init(dom, 'customTheme');6.3 响应式适配
javascript
window.addEventListener('resize', () => {
myChart.resize();
});✅ 必须 ：在容器尺寸变化时调用
resize()，避免图表变形
6.4 动画与加载状态
javascript
// 显示加载动画
myChart.showLoading({
text: '数据加载中...',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)'
});
// 数据加载完成后隐藏
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 1500);七、常见问题与解决方案
表格
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 图表不显示 | 容器未设置宽高 | 明确设置 style="width: 600px; height: 400px" |
| 数据不更新 | 未调用 setOption() |
每次数据变更后必须调用 setOption(newOption, true) |
| 性能卡顿 | 引入全量库 | 使用按需引入 + CanvasRenderer |
| 图例错位 | legend 位置冲突 |
明确设置 top, left，避免与 title 重叠 |
| 地图空白 | 未加载地理数据 | 引入 echarts/map/js/china.js 或使用 mapType: 'world' |
八、扩展方向
8.1 扩展方向
- 与前端框架集成 ：Vue 3 + ECharts（
vue-echarts）、React + ECharts（react-echarts） - 动态数据流：WebSocket 实时更新图表
- 导出与打印 ：
myChart.getDataURL()导出 PNG/SVG - 自定义系列 ：使用
custom类型绘制复杂图形 - **服务端渲染（SSR）**：适用于 Next.js、Nuxt.js 等框架