ECharts 交互组件详解
ECharts 提供了丰富的交互组件，让图表支持缩放、漫游、提示、工具箱、数据区域选择等功能，大幅提升用户体验。以下是常用交互组件的介绍和配置示例。
1. tooltip（提示框组件）
鼠标悬停时显示数据信息，最常用交互组件。
tooltip: {
trigger: 'axis', // 'item'（散点/饼图） 或 'axis'（坐标轴触发）
axisPointer: { // 坐标轴指示器
type: 'cross', // 'line' | 'shadow' | 'cross'
label: { backgroundColor: '#6a7985' }
},
formatter: function (params) {
// 自定义提示内容
return params[0].name + '<br/>' +
params.map(p => `${p.marker}${p.seriesName}: ${p.value}`).join('<br/>');
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: { color: '#fff' }
}2. toolbox（工具箱）
右上角工具栏，支持保存图片、数据视图、切换图表类型、缩放等。
toolbox: {
feature: {
saveAsImage: { show: true, title: '保存为图片' }, // 保存图片
dataView: { show: true, readOnly: false }, // 数据视图
dataZoom: { show: true, yAxisIndex: 'none' }, // 区域缩放
magicType: { // 动态切换图表类型
show: true,
type: ['line', 'bar', 'stack']
},
restore: { show: true }, // 还原
brush: { // 选框工具
type: ['rect', 'polygon', 'lineX', 'keep', 'clear']
}
},
right: 20,
top: 20
}3. dataZoom（数据区域缩放）
支持滑动条、框选缩放、内置缩放（inside），常用于大数据量图表。
dataZoom: [
{ // 滑动条型（slider）
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100
},
{ // 内置型（inside，支持鼠标滚轮/双指缩放）
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 100
}
]4. visualMap（视觉映射组件）
根据数据值映射颜色、大小、透明度等，常用于热力图、散点图。
visualMap: {
type: 'continuous', // 'continuous' 连续型 或 'piecewise' 分段型
min: 0,
max: 100,
calculable: true, // 是否显示拖拽手柄
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
orient: 'horizontal',
bottom: 20
}5. legend（图例组件）交互
支持点击图例切换系列显示。
legend: {
data: ['系列1', '系列2'],
selectedMode: 'multiple', // 'single' 单选，'multiple' 多选，false 禁用
selected: { // 默认选中状态
'系列1': true,
'系列2': false
}
}6. brush（选框组件）
配合 toolbox 使用，支持区域选择数据。
brush: {
toolbox: ['rect', 'polygon', 'keep', 'clear'],
brushLink: ['all'], // 多图联动选择
outOfBrush: { colorAlpha: 0.1 }
}7. graphic（自定义图形元素交互）
添加可点击的按钮、文字等。
graphic: [
{
type: 'text',
left: 'center',
top: 10,
style: { text: '点击刷新', fill: '#333', fontSize: 16 },
onclick: function () {
// 自定义点击事件
fetchDataAndUpdateChart();
}
}
]完整示例：多交互组件组合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 交互组件示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: 'ECharts 交互组件演示' },
tooltip: { trigger: 'axis' },
toolbox: { feature: { saveAsImage: {}, dataZoom: {}, restore: {} } },
dataZoom: [{ type: 'slider' }, { type: 'inside' }],
legend: { data: ['销量', '利润'] },
xAxis: { type: 'category', data: ['一月','二月','三月','四月','五月','六月'] },
yAxis: { type: 'value' },
series: [
{ name: '销量', type: 'bar', data: [120, 200, 150, 80, 70, 110] },
{ name: '利润', type: 'line', data: [80, 120, 100, 60, 50, 90] }
]
});
</script>
</body>
</html>官方文档推荐：
- 交互组件总览：https://echarts.apache.org/handbook/zh/concepts/interaction/
- tooltip 配置：https://echarts.apache.org/zh/option.html#tooltip
- toolbox 配置：https://echarts.apache.org/zh/option.html#toolbox
如果你想了解某个组件的更多高级用法（如 dataZoom 联动、visualMap 分段、事件监听），或者需要特定场景示例，随时告诉我！
