引言
ECharts 是一个由百度开源的数据可视化库，以其强大的功能、丰富的图表类型和良好的兼容性而广受欢迎。对于零基础的学习者来说，从安装到实战可能会遇到一些困惑。本文将为你提供一个完整的学习路径，从基础安装到实战应用，并解析常见问题，帮助你快速上手 ECharts。
1. ECharts 简介
ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等，并且支持高度定制化。
1.1 为什么选择 ECharts？
- 开源免费：ECharts 是完全开源的，可以免费使用。
- 功能强大：支持多种图表类型和交互功能。
- 兼容性好：兼容主流浏览器，包括 IE8+。
- 文档完善：官方文档详细，社区活跃。
2. 安装与引入
2.1 通过 CDN 引入
对于初学者，最简单的方式是通过 CDN 引入 ECharts。你只需要在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2.2 通过 npm 安装
如果你使用现代前端框架（如 Vue、React），可以通过 npm 安装 ECharts：
npm install echarts --save
然后在你的项目中引入：
// 引入 ECharts 主模块
import * as echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
2.3 通过模块化引入（推荐）
为了减小打包体积，推荐使用模块化引入：
// 引入 ECharts 核心模块和组件
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// 注册必要的组件
echarts.use([
BarChart,
LineChart,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
CanvasRenderer
]);
// 初始化图表
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
3. 基础概念与配置
3.1 图表实例
在 ECharts 中，每个图表都是一个实例。通过 echarts.init() 方法初始化一个图表实例：
// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));
3.2 配置项（Option）
ECharts 的配置项是一个 JavaScript 对象，用于定义图表的样式、数据和交互行为。配置项包含多个部分：
- title：标题组件
- tooltip：提示框组件
- legend：图例组件
- xAxis：直角坐标系中的 x 轴
- yAxis：直角坐标系中的 y 轴
- series：系列列表，每个系列通过 type 决定图表类型
3.3 数据格式
ECharts 支持多种数据格式，最常用的是数组格式。例如，柱状图的数据格式：
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
对于更复杂的数据，可以使用对象数组格式：
series: [{
name: '销量',
type: 'bar',
data: [
{value: 5, name: '衬衫'},
{value: 20, name: '羊毛衫'},
{value: 36, name: '雪纺衫'},
{value: 10, name: '裤子'},
{value: 10, name: '高跟鞋'},
{value: 20, name: '袜子'}
]
}]
4. 常见图表类型实战
4.1 柱状图
柱状图是最常用的图表之一，用于比较不同类别的数据。
// 柱状图配置
const barOption = {
title: {
text: '月度销售数据',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['产品A', '产品B'],
top: 30
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产品A',
type: 'bar',
data: [120, 132, 101, 134, 90, 230],
itemStyle: {
color: '#5470c6'
}
},
{
name: '产品B',
type: 'bar',
data: [220, 182, 191, 234, 290, 330],
itemStyle: {
color: '#91cc75'
}
}
]
};
4.2 折线图
折线图常用于展示数据随时间变化的趋势。
// 折线图配置
const lineOption = {
title: {
text: '温度变化趋势',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高温度', '最低温度'],
top: 30
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '最高温度',
type: 'line',
data: [22, 24, 26, 28, 25, 23, 21],
smooth: true,
itemStyle: {
color: '#ee6666'
}
},
{
name: '最低温度',
type: 'line',
data: [12, 14, 16, 18, 15, 13, 11],
smooth: true,
itemStyle: {
color: '#5470c6'
}
}
]
};
4.3 饼图
饼图用于展示各部分占总体的比例。
// 饼图配置
const pieOption = {
title: {
text: '市场份额分布',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['产品A', '产品B', '产品C', '产品D', '产品E']
},
series: [
{
name: '市场份额',
type: 'pie',
radius: '50%',
data: [
{ value: 335, name: '产品A' },
{ value: 310, name: '产品B' },
{ value: 234, name: '产品C' },
{ value: 135, name: '产品D' },
{ value: 154, name: '产品E' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
4.4 散点图
散点图用于展示两个变量之间的关系。
// 散点图配置
const scatterOption = {
title: {
text: '身高与体重关系',
left: 'center'
},
tooltip: {
formatter: function (params) {
return `身高: ${params.value[0]}cm<br/>体重: ${params.value[1]}kg`;
}
},
xAxis: {
name: '身高(cm)',
type: 'value',
scale: true
},
yAxis: {
name: '体重(kg)',
type: 'value',
scale: true
},
series: [{
name: '样本',
type: 'scatter',
symbolSize: 10,
data: [
[160, 50], [165, 55], [170, 60], [175, 65], [180, 70],
[162, 52], [168, 58], [172, 62], [178, 68], [182, 72]
],
itemStyle: {
color: '#5470c6'
}
}]
};
5. 高级功能与交互
5.1 动态数据更新
ECharts 支持动态更新数据，这对于实时数据展示非常有用。
// 动态更新数据示例
let data = [5, 20, 36, 10, 10, 20];
let index = 0;
// 每隔2秒更新一次数据
setInterval(() => {
// 随机生成新数据
const newData = data.map(item => Math.floor(Math.random() * 50) + 10);
// 更新图表
myChart.setOption({
series: [{
data: newData
}]
});
data = newData;
index++;
}, 2000);
5.2 事件监听与交互
ECharts 提供了丰富的事件监听机制，可以响应用户的交互行为。
// 监听点击事件
myChart.on('click', function(params) {
console.log('点击了:', params.name, params.value);
alert(`你点击了 ${params.name}，数值为 ${params.value}`);
});
// 监听数据区域缩放事件
myChart.on('dataZoom', function(params) {
console.log('数据缩放:', params);
});
// 监听图例切换事件
myChart.on('legendselectchanged', function(params) {
console.log('图例切换:', params);
});
5.3 响应式布局
为了确保图表在不同设备上都能正常显示，需要实现响应式布局。
// 响应式布局示例
function resizeChart() {
if (myChart) {
myChart.resize();
}
}
// 监听窗口大小变化
window.addEventListener('resize', resizeChart);
// 如果使用 Vue/React 等框架，可以在组件挂载和卸载时处理
// Vue 示例：
// mounted() {
// this.initChart();
// window.addEventListener('resize', this.resizeChart);
// },
// beforeDestroy() {
// window.removeEventListener('resize', this.resizeChart);
// if (this.myChart) {
// this.myChart.dispose();
// }
// }
6. 常见问题解析
6.1 图表不显示
问题描述：图表区域空白，没有任何内容。
可能原因：
- DOM 元素不存在或尺寸为0
- ECharts 文件未正确引入
- 配置项错误
- 数据格式错误
解决方案：
- 确保 DOM 元素存在且设置了宽高：
<div id="main" style="width: 600px;height:400px;"></div> - 检查 ECharts 文件是否成功加载（在浏览器开发者工具中查看 Network 标签）
- 检查控制台是否有错误信息
- 确保数据格式正确，特别是
series.data的格式
6.2 图表显示不全或变形
问题描述：图表显示不完整，部分区域被遮挡或变形。
可能原因：
- 容器尺寸变化后未调用
resize()方法 - 布局问题导致容器尺寸计算错误
- CSS 样式影响了容器尺寸
解决方案：
- 在窗口大小变化时调用
myChart.resize()：window.addEventListener('resize', function() { myChart.resize(); }); - 确保容器有明确的宽高，避免使用百分比导致计算错误
- 检查 CSS 样式，确保容器没有被其他元素遮挡
6.3 数据更新后图表不刷新
问题描述：调用 setOption 后图表没有变化。
可能原因：
- 配置项对象引用未改变，ECharts 未检测到变化
- 数据格式不正确
- 图表实例未正确初始化
解决方案：
- 确保每次调用
setOption时传入新的配置对象： “`javascript // 错误示例：直接修改原对象 option.series[0].data = newData; myChart.setOption(option);
// 正确示例：创建新对象 const newOption = {
...option,
series: [{
...option.series[0],
data: newData
}]
}; myChart.setOption(newOption);
2. 确保数据格式符合图表类型要求
3. 检查图表实例是否已正确创建
### 6.4 内存泄漏问题
**问题描述**：在单页应用中，频繁创建和销毁图表实例导致内存泄漏。
**可能原因**：
1. 未正确销毁图表实例
2. 事件监听器未移除
3. 定时器未清除
**解决方案**：
1. 在销毁组件前调用 `dispose()` 方法：
```javascript
// Vue/React 组件销毁时
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
- 移除所有事件监听器：
myChart.off('click'); myChart.off('dataZoom'); // 或者使用 myChart.off() 移除所有事件 - 清除所有定时器：
clearInterval(this.timer);
6.5 性能优化问题
问题描述：大数据量时图表渲染缓慢或卡顿。
可能原因：
- 数据量过大
- 未使用数据采样或聚合
- 未启用渐进式渲染
解决方案：
- 对大数据进行采样或聚合：
// 数据采样示例 function sampleData(data, sampleRate) { const result = []; for (let i = 0; i < data.length; i += sampleRate) { result.push(data[i]); } return result; } - 启用渐进式渲染：
const option = { series: [{ type: 'scatter', data: largeData, progressive: 1000, // 每帧渲染1000个点 progressiveThreshold: 10000 // 超过10000个点时启用渐进式渲染 }] }; - 使用 Canvas 渲染器（默认）而不是 SVG 渲染器，因为 Canvas 在大数据量下性能更好
7. 实战项目：销售数据仪表盘
7.1 项目需求
创建一个销售数据仪表盘，包含以下图表：
- 月度销售趋势（折线图）
- 产品类别占比（饼图）
- 区域销售对比（柱状图）
- 销售人员业绩（散点图）
7.2 完整代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>销售数据仪表盘</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 300px 300px;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.chart-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 15px;
}
.chart-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.chart {
width: 100%;
height: calc(100% - 30px);
}
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 250px);
}
}
</style>
</head>
<body>
<h1 style="text-align: center; color: #333;">销售数据仪表盘</h1>
<div class="dashboard">
<div class="chart-container">
<div class="chart-title">月度销售趋势</div>
<div id="lineChart" class="chart"></div>
</div>
<div class="chart-container">
<div class="chart-title">产品类别占比</div>
<div id="pieChart" class="chart"></div>
</div>
<div class="chart-container">
<div class="chart-title">区域销售对比</div>
<div id="barChart" class="chart"></div>
</div>
<div class="chart-container">
<div class="chart-title">销售人员业绩</div>
<div id="scatterChart" class="chart"></div>
</div>
</div>
<script>
// 初始化所有图表
const lineChart = echarts.init(document.getElementById('lineChart'));
const pieChart = echarts.init(document.getElementById('pieChart'));
const barChart = echarts.init(document.getElementById('barChart'));
const scatterChart = echarts.init(document.getElementById('scatterChart'));
// 月度销售趋势（折线图）
const lineOption = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['产品A', '产品B'],
top: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产品A',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210, 234, 290, 330, 310, 350],
smooth: true,
itemStyle: {
color: '#5470c6'
}
},
{
name: '产品B',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310, 350, 390, 430, 410, 450],
smooth: true,
itemStyle: {
color: '#91cc75'
}
}
]
};
// 产品类别占比（饼图）
const pieOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
top: 'middle'
},
series: [
{
name: '销售额',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 16,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '电子产品' },
{ value: 735, name: '服装' },
{ value: 580, name: '食品' },
{ value: 484, name: '家居' },
{ value: 300, name: '其他' }
]
}
]
};
// 区域销售对比（柱状图）
const barOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['华北', '华东', '华南', '华中', '西南', '西北', '东北']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销售额',
type: 'bar',
data: [320, 450, 380, 290, 250, 180, 150],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
}
}
]
};
// 销售人员业绩（散点图）
const scatterOption = {
tooltip: {
formatter: function (params) {
return `${params.value[2]}<br/>销售额: ${params.value[0]}万<br/>客户数: ${params.value[1]}个`;
}
},
xAxis: {
name: '销售额(万)',
type: 'value',
scale: true
},
yAxis: {
name: '客户数',
type: 'value',
scale: true
},
series: [{
name: '销售人员',
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[0]) * 2;
},
data: [
[150, 30, '张三'], [180, 45, '李四'], [200, 50, '王五'],
[120, 25, '赵六'], [220, 60, '钱七'], [160, 35, '孙八'],
[190, 40, '周九'], [140, 28, '吴十'], [210, 55, '郑十一'],
[170, 38, '王十二']
],
itemStyle: {
color: '#ee6666'
}
}]
};
// 设置选项
lineChart.setOption(lineOption);
pieChart.setOption(pieOption);
barChart.setOption(barOption);
scatterChart.setOption(scatterOption);
// 响应式布局
window.addEventListener('resize', function() {
lineChart.resize();
pieChart.resize();
barChart.resize();
scatterChart.resize();
});
// 添加交互：点击饼图扇形显示详细信息
pieChart.on('click', function(params) {
alert(`产品类别: ${params.name}\n销售额: ${params.value}万\n占比: ${params.percent}%`);
});
</script>
</body>
</html>
7.3 项目扩展建议
- 添加数据刷新功能：模拟实时数据更新
- 增加数据筛选：按时间范围、产品类别筛选数据
- 添加导出功能：将图表导出为图片
- 集成后端API：从后端获取真实数据
- 添加动画效果：使用 ECharts 的动画功能增强视觉效果
8. 学习路径建议
8.1 第一阶段：基础入门（1-2周）
- 学习 HTML/CSS/JavaScript 基础
- 掌握 ECharts 的安装和引入
- 理解配置项（Option）的基本结构
- 练习创建基础图表（柱状图、折线图、饼图）
8.2 第二阶段：进阶应用（2-3周）
- 学习高级图表类型（散点图、雷达图、热力图等）
- 掌握数据格式转换和处理
- 学习事件监听和交互功能
- 实现响应式布局
8.3 第三阶段：实战项目（2-3周）
- 开发数据可视化仪表盘
- 集成真实数据源（API、数据库）
- 优化性能和用户体验
- 学习 ECharts 与前端框架（Vue/React）的集成
8.4 第四阶段：高级主题（持续学习）
- 学习 ECharts 的扩展和自定义
- 掌握三维可视化（ECharts GL）
- 学习大数据量优化技巧
- 参与开源社区，贡献代码
9. 资源推荐
9.1 官方资源
- ECharts 官方文档：https://echarts.apache.org/zh/document.html
- ECharts 示例库：https://echarts.apache.org/examples/zh/index.html
- ECharts GitHub：https://github.com/apache/echarts
9.2 学习平台
- ECharts 官方教程：https://echarts.apache.org/zh/tutorial.html
- Bilibili 视频教程：搜索 “ECharts 教程”
- 慕课网/极客时间：相关数据可视化课程
9.3 社区与论坛
- ECharts 官方论坛：https://github.com/apache/echarts/discussions
- Stack Overflow：搜索 ECharts 相关问题
- 掘金/知乎：关注数据可视化相关文章
10. 总结
ECharts 是一个功能强大且易于上手的数据可视化库。通过本文的学习路径，你可以从零开始逐步掌握 ECharts 的使用。记住以下关键点：
- 从基础开始：先掌握基本图表的创建，再逐步学习高级功能
- 多实践：通过实际项目巩固所学知识
- 善用文档：官方文档和示例是最好的学习资源
- 关注性能：在大数据量时注意优化
- 保持更新：ECharts 版本更新较快，关注新特性
数据可视化是一个不断发展的领域，ECharts 也在持续更新。保持学习的热情，不断实践和探索，你一定能成为一名优秀的数据可视化开发者。
祝你学习顺利！