快速参考索引
ECharts核心知识点速查表，开发时快速查阅
📊 图表类型速查
基础图表
| 图表类型 | type值 | 适用场景 | 关键配置 |
|---|---|---|---|
| 折线图 | 'line' | 趋势分析 | smooth, areaStyle |
| 柱状图 | 'bar' | 分类对比 | barWidth, stack |
| 饼图 | 'pie' | 占比分析 | radius, roseType |
| 散点图 | 'scatter' | 相关性 | symbolSize, large |
| K线图 | 'candlestick' | 金融数据 | - |
| 雷达图 | 'radar' | 多维评估 | shape: 'circle' |
高级图表
| 图表类型 | type值 | 适用场景 |
|---|---|---|
| 热力图 | 'heatmap' | 密度分析 |
| 关系图 | 'graph' | 社交网络 |
| 漏斗图 | 'funnel' | 转化分析 |
| 盒须图 | 'boxplot' | 统计分析 |
| 平行坐标 | 'parallel' | 多维数据 |
| 桑基图 | 'sankey' | 流量分析 |
| 树图 | 'tree' | 层级结构 |
🧩 组件配置速查
Grid (网格)
javascript
grid: {
left: '10%',
right: '10%',
top: '15%',
bottom: '10%',
containLabel: true // 防止标签被截断
}1
2
3
4
5
6
7
2
3
4
5
6
7
Axis (坐标轴)
javascript
xAxis: {
type: 'category', // category | value | time | log
data: ['A', 'B', 'C'],
axisLabel: {
rotate: 45,
formatter: '{value} 单位'
},
splitLine: { show: false }
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Legend (图例)
javascript
legend: {
orient: 'horizontal', // horizontal | vertical
left: 'center',
top: 'top',
data: ['系列1', '系列2']
}1
2
3
4
5
6
2
3
4
5
6
Tooltip (提示框)
javascript
tooltip: {
trigger: 'axis', // item | axis | none
formatter: '{b}: {c}'
}1
2
3
4
2
3
4
DataZoom (缩放)
javascript
dataZoom: [{
type: 'slider', // slider | inside
start: 0,
end: 100
}]1
2
3
4
5
2
3
4
5
🎨 样式配置速查
颜色配置
单色:
javascript
itemStyle: { color: '#5470c6' }1
渐变:
javascript
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 1, color: '#188df0' }
])
}1
2
3
4
5
6
2
3
4
5
6
主题色:
javascript
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666']1
标签格式化
javascript
label: {
show: true,
position: 'top', // top | bottom | left | right | inside
formatter: '{b}: {c}',
fontSize: 12,
color: '#333'
}1
2
3
4
5
6
7
2
3
4
5
6
7
格式化器变量:
{a}- 系列名{b}- 数据名{c}- 数据值{d}- 百分比(饼图)
⚡ API方法速查
初始化
javascript
// 基本初始化
const chart = echarts.init(dom);
// 指定主题
const chart = echarts.init(dom, 'dark');
// 指定渲染器
const chart = echarts.init(dom, null, {
renderer: 'canvas' // canvas | svg
});1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
设置选项
javascript
// 增量更新(默认)
chart.setOption(option);
// 完全替换
chart.setOption(option, true);
// 合并策略
chart.setOption(option, {
replaceMerge: ['series']
});1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
事件监听
javascript
// 点击事件
chart.on('click', 'series', (params) => {
console.log(params);
});
// 鼠标悬停
chart.on('mouseover', (params) => {
console.log(params);
});
// 移除监听
chart.off('click');1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
图表控制
javascript
// 调整大小
chart.resize();
// 销毁实例
chart.dispose();
// 清空画布
chart.clear();
// 导出图片
const url = chart.getDataURL({
type: 'png',
pixelRatio: 2,
backgroundColor: '#fff'
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
数据更新
javascript
// 动态添加数据
chart.appendData({
seriesIndex: 0,
data: newData
});
// 显示加载动画
chart.showLoading();
chart.hideLoading();1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
🔧 常用工具函数
注册主题
javascript
echarts.registerTheme('my-theme', {
backgroundColor: '#f4cccc',
color: ['#c23531', '#2f4554']
});1
2
3
4
2
3
4
注册地图
javascript
echarts.registerMap('china', chinaGeoJSON);1
颜色工具
javascript
// 线性渐变
new echarts.graphic.LinearGradient(x, y, x2, y2, [
{ offset: 0, color: '#fff' },
{ offset: 1, color: '#000' }
]);
// 径向渐变
new echarts.graphic.RadialGradient(x, y, r, [
{ offset: 0, color: '#fff' },
{ offset: 1, color: '#000' }
]);1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
📱 响应式适配
监听resize
javascript
window.addEventListener('resize', () => {
chart.resize();
});1
2
3
2
3
防抖优化
javascript
let timer;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => chart.resize(), 100);
});1
2
3
4
5
2
3
4
5
移动端检测
javascript
const isMobile = window.innerWidth < 768;
chart.setOption({
legend: {
orient: isMobile ? 'horizontal' : 'vertical',
bottom: isMobile ? 0 : 'center'
}
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
🚀 性能优化速查
Large模式
javascript
{
large: true,
largeThreshold: 2000
}1
2
3
4
2
3
4
渐进式渲染
javascript
{
progressive: 1000,
progressiveThreshold: 10000
}1
2
3
4
2
3
4
采样算法
javascript
{
sampling: 'lttb' // lttb | average | max | min
}1
2
3
2
3
关闭动画
javascript
{
animation: false,
hoverAnimation: false
}1
2
3
4
2
3
4
🐛 常见问题速查
Q1: 图表不显示？
检查清单:
- [ ] 容器是否有宽高？
- [ ] DOM是否加载完成？
- [ ] option配置是否正确？
- [ ] 控制台是否有报错？
Q2: 数据更新不生效？
解决方案:
javascript
// 使用notMerge强制替换
chart.setOption(option, true);
// 或指定replaceMerge
chart.setOption(option, {
replaceMerge: ['series']
});1
2
3
4
5
6
7
2
3
4
5
6
7
Q3: 内存泄漏？
解决方案:
javascript
// 页面卸载时销毁
onUnmounted(() => {
chart.dispose();
chart = null;
});1
2
3
4
5
2
3
4
5
Q4: 标签被截断？
解决方案:
javascript
grid: {
containLabel: true
}1
2
3
2
3
📚 详细文档
💡 使用建议
- 收藏本页: 开发时快速查阅
- 结合文档: 详细配置参考官方文档
- 实践验证: 所有配置都要在实际项目中测试
- 持续更新: 关注ECharts版本更新
祝开发顺利！🚀