ECharts 中的事 件和行为.docVIP

ECharts 中的事件和行为 在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。 在 ECharts 3 中绑定事件跟 2 一样都是通过? on?方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。 myChart.on(click, function (params) { // 控制台打印数据的名称 console.log(); }); 在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的? legendselectchanged?事件（这里需要注意切换图例开关是不会触发legendselected事件的），数据区域缩放时触发的? datazoom?事件等等。 鼠标事件的处理 ECharts 支持常规的鼠标事件类型，包括?click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout?事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。 // 基于准备好的dom，初始化ECharts实例 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) { window.open(/s?wd= + encodeURIComponent()); }); 所有的鼠标事件包含参数?params，这是一个包含点击图形的数据信息的对象，如下格式： { // 当前点击的图形元素所属的组件名称， // 其值如 series、markLine、markPoint、timeLine 等。 componentType: string, // 系列类型。值可能为：line、bar、pie 等。当 componentType 为 series 时有意义。 seriesType: string, // 系列在传入的 option.series 中的 index。当 componentType 为 series 时有意义。 seriesIndex: number, // 系列名称。当 componentType 为 series 时有意义。 seriesName: string, // 数据名，类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, // 传入的原始数据项 data: Object, // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data， // dataType 的值会是 node 或者 edge，表示当前点击在 node 还是 edge 上。 // 其他大部分图表中只有一种 data，dataType 无意义。 dataType: string, // 传入的数据值 value: number|Array // 数据图形的颜色。当 componentType 为 series 时有意义。 color: string } 如何区分鼠标点击到了哪里： myChart.on(click, function (params) { if (ponentType === markPoint) { // 点击到了 markPoint 上 if (params.seriesIndex === 5) {