在数据可视化的世界里，ECharts 无疑是最耀眼的明星之一。作为 Apache 基金会旗下的顶级开源项目，ECharts 凭借其丰富的图表类型、流畅的动画效果、强大的数据处理能力以及优秀的跨平台兼容性，已经成为数据可视化领域的首选工具。
ECharts 最初由百度前端团队开发，于 2013 年开源。经过十多年的发展，它已经从最初的一个简单的图表库，成长为功能全面、生态完善的可视化解决方案。根据官方统计数据，ECharts 的周下载量超过 100 万次，GitHub Star 数超过 5 万，被广泛应用于各类商业项目、政府系统、学术研究等领域。
本文将系统全面地介绍 ECharts 的核心知识点，从基础概念到高级特性，从图表类型到性能优化，帮助读者建立完整的知识体系，能够熟练运用 ECharts 构建专业的数据可视化应用。
一、ECharts 概述
1.1 什么是 ECharts
ECharts 是一个基于 JavaScript 的开源可视化库，它可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari 等），底层依赖轻量级的矢量图形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。
ECharts 的核心特性可以概括为以下几个关键词：
1.2 ECharts 的版本演进
ECharts 经历了多个重要版本的迭代，了解版本差异有助于技术选型：
目前在 2026 年的新项目中，建议使用 V6+ 版本以获得最佳性能和最新特性。v5.x 版本依然在维护中，适合对稳定性要求极高的存量项目。
1.3 ECharts 的核心优势
1.丰富的图表类型
ECharts 支持 50+ 种图表类型，几乎涵盖了所有常见的数据可视化场景：
常规图表：折线图、柱状图、饼图、散点图、面积图、K线图
关系数据图：关系图、树图、旭日图、矩形树图
地理数据图：地图、地理坐标系图、3D 地图
仪表盘类：径向仪表盘、进度条
特殊图表：漏斗图、桑基图、平行坐标图、箱线图、水球图
2.强大的交互能力
ECharts 提供了丰富的交互组件，让用户能够深入探索数据：
图例开关：点击图例可以控制系列显示/隐藏
数据区域缩放：鼠标框选或滑动条选择数据范围
数据刷选：支持多维度数据筛选
提示框：鼠标悬停显示数据详情
工具箱：内置保存为图片、数据视图、缩放还原等工具
视觉映射：将数据映射到颜色、大小、形状等视觉通道
3.高性能数据处理
ECharts 针对大数据量场景进行了深度优化。对于百万级数据点的散点图，通过渐进式渲染可以保持流畅的交互体验。其底层使用的 ZRender 图形库支持 Canvas 和 SVG 双引擎，开发者可以根据场景选择最适合的渲染方式。
4.无障碍访问支持
ECharts 自 v5.0.0 起注重提升无障碍性能，为图表增加了 ARIA 属性支持，允许开发者提供图表的文字描述，帮助视障人士更好地理解数据内容。
5.丰富的扩展生态
ECharts 拥有庞大的开发者社区，提供了大量的扩展插件：
图表扩展：水球图、词云图、地图扩展
框架集成：Vue-ECharts、React-ECharts、NGX-ECharts
服务端渲染：node-echarts 等服务端渲染方案
1.4 ECharts vs 其他图表库的对比
选型建议：
选择 ECharts：需要丰富的图表类型、大数据量渲染、功能全面
选择 Highcharts：追求稳定性，对商业授权有预算
选择 D3.js：需要高度定制化、实现独特的可视化效果
选择 Chart.js：轻量级场景，只需要基础图表
二、安装与基础入门
2.1 安装方式
ECharts 提供了多种安装方式，适应不同的开发环境。
方式一：CDN 引入（最简单）
<!-- 引入最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
<!-- 或使用国内镜像 -->
<script src="https://unpkg.com/echarts@6.0.0/dist/echarts.min.js"></script>
方式二：npm 安装（推荐用于工程化项目）
npm install echarts --save
然后在项目中引入：
// 完整引入
import * as echarts from 'echarts';
// 按需引入（优化打包体积）
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
方式三：按需引入的优势
按需引入可以将打包体积从完整版的 800KB 减少到 200KB 左右，对于对性能要求高的项目十分必要。
2.2 基础概念
在使用 ECharts 之前，理解其核心概念非常重要。
1.实例（Instance）
实例是 ECharts 图表的容器，每个 DOM 容器只能初始化一个 ECharts 实例。
const myChart = echarts.init(document.getElementById('chart'));
2.选项（Option）
选项是 ECharts 图表的配置对象，通过设置不同的属性来定义图表的外观和行为。
const option = {
title: { text: '示例图表' },
xAxis: { data: ['A', 'B', 'C'] },
yAxis: {},
series: [{ type: 'bar', data: [10, 20, 30] }]
};
myChart.setOption(option);
3.系列（Series）
系列是图表的“图层”，一个图表可以包含多个系列。例如，一个折线图可以显示多条线，每条线就是一个系列。
series: [
{ name: '2023年', type: 'line', data: [10, 20, 30] },
{ name: '2024年', type: 'line', data: [15, 25, 35] }
]
4.组件（Component）
组件是图表的组成部分，包括标题（Title）、图例（Legend）、网格（Grid）、坐标轴（Axis）、提示框（Tooltip）、工具箱（Toolbox）等。
2.3 第一个 ECharts 图表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts 入门示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px;"></div>
<script>
// 1. 初始化图表
const chart = echarts.init(document.getElementById('chart'));
// 2. 配置选项
const option = {
title: {
text: '销售额趋势',
subtext: '2024年第一季度',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['销售额', '利润'],
top: 30
},
grid: {
left: '10%',
right: '10%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {},
dataZoom: {},
restore: {}
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月'],
axisLabel: { rotate: 0 }
},
yAxis: {
type: 'value',
name: '金额（万元）'
},
series: [
{
name: '销售额',
type: 'bar',
data: [120, 200, 150],
itemStyle: {
borderRadius: [4, 4, 0, 0],
color: '#5470c6'
},
label: { show: true, position: 'top' }
},
{
name: '利润',
type: 'line',
data: [30, 50, 40],
smooth: true,
lineStyle: { width: 3, color: '#fac858' },
symbol: 'circle',
symbolSize: 8
}
]
};
// 3. 渲染图表
chart.setOption(option);
// 4. 响应窗口大小变化
window.addEventListener('resize', () => {
chart.resize();
});
</script>
</body>
</html>
2.4 实例方法详解
ECharts 实例提供了丰富的 API 方法，用于动态控制图表。
来源：
https://www.bgnno.cn/
