1. Tooltip（提示框）： 提供鼠标悬停在图表上时显示的提示信息。
option = {
tooltip: {
trigger: 'axis', // 触发类型，可以是 'item', 'axis', 'none'
axisPointer: {
type: 'cross' // 十字准星指示器
}
},
// ...
};
2. Legend（图例）： 用于切换数据系列的显示和隐藏。
option = {
legend: {
data: ['Series1', 'Series2']
},
// ...
};
3. DataZoom（数据区域缩放）： 允许用户缩放和漫游图表的数据区域。
option = {
dataZoom: [
{
type: 'slider', // 滑动条型
start: 0,
end: 100
},
{
type: 'inside', // 内部缩放
start: 0,
end: 100
}
],
// ...
};
4. Toolbox（工具箱）： 包含了一系列图表操作工具，例如保存图片、数据视图、刷新等。
option = {
toolbox: {
feature: {
saveAsImage: {},
dataZoom: {},
dataView: {}
// ...其他工具
}
},
// ...
};
5. Grid（网格）： 控制图表在容器中的位置和大小。
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// ...
};
6. MarkPoint（标注点）： 在图表中标注特殊的点。
option = {
series: [{
type: 'line',
data: [10, 20, 30, 40],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}],
// ...
};
7. MarkLine（标注线）： 在图表中标注特殊的线段。
option = {
series: [{
type: 'line',
data: [10, 20, 30, 40],
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}],
// ...
};
8. VisualMap（视觉映射）： 将数值映射成颜色，可以用于呈现数据的分布情况。
option = {
visualMap: {
min: 0,
max: 100,
inRange: {
color: ['#F5A623', '#F8E71C']
}
},
// ...
};
这只是一小部分 ECharts 的交互组件和配置选项。你可以根据需要结合实际情况选择使用不同的组件，通过调整配置来实现更灵活的图表交互。详细的配置信息可以在 ECharts 的[官方文档](https://echarts.apache.org/zh/index.html)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5063/ECharts