ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。
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); }); myChart.on('click', 'series.line', function (params) { console.log(params); }); myChart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) { console.log(params); });
实例之鼠标事件:
以下实例在点击柱形图时会弹出对话框:
// 基于准备好的dom,初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { data: ["电脑","手表","手机","ipad","录像机"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [143, 433, 655, 666, 1020] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 处理点击事件并且弹出数据名称 myChart.on('click', function (params) { alert(params.name); });