ECharts提供了丰富的事件处理机制，包括鼠标事件（如click、mouseover）和组件交互行为事件（如legendselectchanged、datazoom）。用户可以通过on方法绑定回调函数，例如在柱状图点击时弹出对话框。此外，事件参数params包含了图形数据信息，通过query可以定位到特定组件。ECharts的组件交互，如图例切换和数据区域缩放，也会触发相应事件，便于实现复杂的交互逻辑。
观看ECharts 官网的笔记
事件处理
在Android和Web 中，都有按钮点击事件，点击按钮，就会进行相应的操作
在ECharts 中，我们可以通过 on 方法监听用户的操作行为来回调对应的函数。比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。
ECharts 中事件分为两种类型:
-
用户鼠标操作点击，如 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
-
还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），数据区域缩放时触发的 ‘datazoom’ 事件等等。
如：
myChart.on('click', function (params) {
// 在用户点击后控制台打印数据的名称
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});
chart.on('click', 'series.line', function (params) {
console.log(params);
});
chart.on('mouseover', {
seriesIndex: 1, name: 'xx'}, function (params) {
console.log(params);
});
鼠标事件
ECharts 支持的鼠标事件类型，包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
以下实例在点击柱形图时会弹出对话框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
alert(params.name);
});
</script>
</body>
</html>
所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，格式如下：
{
// 当前点击的图形元素所属的组件名称，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType
最低0.47元/天 解锁文章
扫一扫
9484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
