ECharts 图表库
Apache ECharts 是百度开源、Apache 基金会孵化的企业级图表库，20+ 种图表类型开箱即用，配置式 API 比 D3 简单 10 倍，是国内最流行的前端可视化方案，也能通过 pyecharts 在 Python 中使用。
核心知识点
| 知识点 | 说明 |
|---|
| 工具定位 | 企业级 JavaScript 图表库 |
| 最新版本 | v6.0.0（2025 年 7 月发布） |
| 开发团队 | Apache 基金会（原百度 EFE） |
| 核心优势 | 配置式 API、20+ 图表类型、移动端适配、大数据渲染 |
| 渲染引擎 | Canvas + SVG 双引擎，支持 SSR |
| Python 绑定 | pyecharts（Python 封装） |
安装配置
# npm 安装
npm install echarts # 安装 ECharts
# CDN 引入（快速使用）
# <script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
# Python 用户安装 pyecharts
pip install pyecharts # Python 封装版本
基本使用
1. 第一个柱状图
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width:600px;height:400px;"></div> <!-- 容器 -->
<script>
// 初始化图表实例
const chart = echarts.init(document.getElementById('chart')); // 绑定容器
// 配置项（ECharts 的核心就是写配置）
const option = {
title: { text: '物种丰度' }, // 标题
tooltip: { trigger: 'axis' }, // 悬停提示
xAxis: {
type: 'category', // 分类轴
data: ['Bacteroidetes', 'Firmicutes', 'Proteobacteria',
'Actinobacteria', 'Fusobacteria'] // X 轴标签
},
yAxis: { type: 'value' }, // 数值轴
series: [{
type: 'bar', // 柱状图
data: [35, 28, 15, 12, 10], // 数据
itemStyle: { color: '#5470c6' } // 柱子颜色
}]
};
chart.setOption(option); // 渲染图表
</script>
</body>
</html>
2. 饼图
const pieOption = {
title: { text: '菌群组成', left: 'center' }, // 标题居中
tooltip: { trigger: 'item' }, // 悬停显示
legend: { bottom: '5%' }, // 图例在底部
series: [{
type: 'pie', // 饼图
radius: ['40%', '70%'], // 环形饼图（内外半径）
data: [
{ value: 35, name: 'Bacteroidetes' }, // 数据项
{ value: 28, name: 'Firmicutes' },
{ value: 15, name: 'Proteobacteria' },
{ value: 12, name: 'Actinobacteria' },
{ value: 10, name: '其他' }
],
emphasis: { // 高亮效果
itemStyle: {
shadowBlur: 10, // 阴影
shadowColor: 'rgba(0,0,0,0.3)'
}
}
}]
};
chart.setOption(pieOption); // 渲染
3. 多系列折线图
const lineOption = {
title: { text: '样本多样性变化' },
tooltip: { trigger: 'axis' }, // 联动提示
legend: { data: ['Shannon', 'Simpson'] }, // 图例
xAxis: {
type: 'category',
data: ['T0', 'T1', 'T2', 'T3', 'T4'] // 时间点
},
yAxis: { type: 'value' },
series: [
{
name: 'Shannon', // 系列名
type: 'line', // 折线图
data: [3.2, 3.5, 2.8, 3.1, 3.6], // Shannon 指数
smooth: true // 平滑曲线
},
{
name: 'Simpson',
type: 'line',
data: [0.85, 0.88, 0.75, 0.82, 0.90],
smooth: true
}
]
};
高级用法
1. 热力图（适合基因表达矩阵）
const heatmapOption = {
title: { text: '基因表达热图' },
tooltip: { position: 'top' },
grid: { top: '10%', bottom: '15%' },
xAxis: {
type: 'category',
data: ['样本1', '样本2', '样本3', '样本4', '样本5'] // 样本
},
yAxis: {
type: 'category',
data: ['GeneA', 'GeneB', 'GeneC', 'GeneD'] // 基因
},
visualMap: { // 颜色映射
min: 0, max: 10,
calculable: true, // 可拖拽
inRange: { color: ['#313695', '#ffffbf', '#a50026'] } // 蓝白红
},
series: [{
type: 'heatmap', // 热力图
data: [ // [x索引, y索引, 值]
[0, 0, 5], [0, 1, 8], [0, 2, 3], [0, 3, 7],
[1, 0, 2], [1, 1, 6], [1, 2, 9], [1, 3, 4],
[2, 0, 7], [2, 1, 3], [2, 2, 5], [2, 3, 8],
[3, 0, 4], [3, 1, 9], [3, 2, 2], [3, 3, 6],
[4, 0, 8], [4, 1, 5], [4, 2, 7], [4, 3, 3]
],
label: { show: true } // 显示数值
}]
};
2. pyecharts（Python 用户推荐）
from pyecharts.charts import Bar # 导入柱状图
from pyecharts import options as opts # 导入配置
# 创建柱状图
bar = (
Bar() # 柱状图实例
.add_xaxis(["Bacteroidetes", "Firmicutes", "Proteobacteria"]) # X 轴
.add_yaxis("丰度 (%)", [35, 28, 15]) # Y 轴数据
.set_global_opts(
title_opts=opts.TitleOpts(title="物种丰度"), # 标题
tooltip_opts=opts.TooltipOpts(trigger="axis"), # 提示
)
)
bar.render("abundance.html") # 生成 HTML 文件
# 在 Jupyter 中直接显示
bar.render_notebook() # Jupyter 内联显示
3. ECharts 6 新特性：和弦图
// ECharts 6.0 新增和弦图，适合展示菌群间关系
const chordOption = {
series: [{
type: 'chord', // 和弦图（v6 新增）
data: [
{ name: 'Bacteroidetes' },
{ name: 'Firmicutes' },
{ name: 'Proteobacteria' }
],
links: [
{ source: 'Bacteroidetes', target: 'Firmicutes', value: 30 },
{ source: 'Firmicutes', target: 'Proteobacteria', value: 20 },
{ source: 'Bacteroidetes', target: 'Proteobacteria', value: 15 }
]
}]
};
4. 响应式与主题
// 响应式：窗口变化时自动调整
window.addEventListener('resize', () => {
chart.resize(); // 自动适应容器
});
// 使用深色主题
const darkChart = echarts.init(
document.getElementById('chart'),
'dark' // 内置深色主题
);
常见报错与解决
| 报错信息 | 原因 | 解决方法 |
|---|
bindbindbindbindbindto requires dom | 容器不存在 | 确保 DOM 元素已加载再 init |
| 图表不显示 | 容器没有宽高 | 给容器设置 CSS width 和 height |
| 数据更新不生效 | 没调用 setOption | 数据变更后重新 chart.setOption(newOption) |
| 内存泄漏 | 没销毁实例 | 页面卸载时 chart.dispose() |
速查表
// ===== ECharts 速查表 =====
// 初始化
echarts.init(dom) // 创建图表
echarts.init(dom, 'dark') // 深色主题
chart.setOption(option) // 设置配置
chart.resize() // 响应式调整
chart.dispose() // 销毁实例
// 常用图表类型
type: 'bar' // 柱状图
type: 'line' // 折线图
type: 'pie' // 饼图
type: 'scatter' // 散点图
type: 'heatmap' // 热力图
type: 'boxplot' // 箱线图
type: 'treemap' // 矩形树图
type: 'graph' // 关系图
type: 'chord' // 和弦图（v6 新增）
// 配置结构
// option = { title, tooltip, legend, xAxis, yAxis, series, visualMap }
// pyecharts（Python）
pip install pyecharts
from pyecharts.charts import Bar, Line, Pie, Scatter
chart.render("output.html") // 生成 HTML
chart.render_notebook() // Jupyter 显示
// ECharts vs D3.js
// ECharts: 配置式，上手快，图表类型丰富
// D3.js: 编程式，自由度高，学习曲线陡
// 建议：常规图表用 ECharts，极致定制用 D3