（2）Echarts图表绑定特殊事件-图表元素绑定选中事件

在上篇文章中，介绍了Echarts关于元素绑定特殊事件需要做的处理和操作。而本文手把手教大家如何在源码中添加自己定义的事件。

需求介绍 ：假设有个需求，一个图表有多根y轴，当用户点击某根轴的范围时，需要显示一个矩形框，表示用户选中了这根轴。如图1所示。第二根y轴区域被选中。又或者如图2所示，图中曲线被选中。

图1 y轴被选中

图2 曲线被选中

本文以图2为例，实现曲线的选中事件。
（1）曲线的绘制前处理代码大概在Echarts源码3.6.2版本的27329行左右。我们可以在此处加入选中事件处理代码，然后选中图形跟随曲线的绘制一起进行。

//selectEvent配置项是自定义的，为true表示元素绑定选中事件
var selectEvent = seriesModel.get('selectEvent');
if (selectEvent) {polyline.silent = false;//选中事件回调处理var onElementClick = zrUtil.curry(setSelectEvent, {that: that,selectRectPainter: selectRectPainter,buildSelectElem: buildSelectElem,points: points,isAreaChart: isAreaChart,group: group,stackedOnPoints: stackedOnPoints,seriesModel: seriesModel,graphic: graphic});//选中除曲线外的其他地方回调处理var onOtherElementClick = zrUtil.curry(setOtherEvent, {that: that,selectRectPainter: selectRectPainter,                                       group: group                    });group.off('click');group.on('click', onElementClick);group.__zr.on('click', onOtherElementClick);
}
/*** 选中曲线后的回调处理* 主要负责构建曲线的选中状态或者显示选中状态* @param {Object} params: set params* @parsm {Object.<Event Object>} event
*/
function setSelectEvent (params, event) {// 已经存在隐藏的选中状态，直接显示if (params.that.selectGroup) {params.selectRectPainter.show(params.that.selectGroup);             } else {//不存在隐藏的选中状态，需要构造选中状态params.buildSelectElem.call(params.that, params.group, params.points, params.graphic);params.isAreaChart && params.buildSelectElem.call(params.that, params.group, params.stackedOnPoints, params.graphic);}// 加入选中后的事件参数params.selectRectPainter.setEventData(params.group, {series: params.seriesModel,selectMode: true}, params.that);event.event.preventDefault();event.event.stopPropagation();
}
/*** 选中除曲线外的图表其他地方后的回调处理，* 主要负责隐藏选中状态* @param {Object} params: set params* @parsm {Object.<Event Object>} event
*/
function setOtherEvent (params, event) {//判断是否是曲线if ((params.that.selectGroup && !params.selectRectPainter.isChildFromGroup(params.group, event.target, params.that)) || event.outerClick) { if (!params.that.selectGroup) {return;}params.selectRectPainter.hide(params.that.selectGroup); // 加入选中后的事件参数params.selectRectPainter.setEventData(params.group, {selectMode: false}, params.that);        }
}

（2）第一步中有一个重要的步骤是构建选中状态，主要有一下代码生成

    /*** param {Object.<Echarts class>}  group* param {Array} points: 组成曲线的点的坐标*/function buildSelectElem(group, points) {var selectGroup = this.selectGroup;var coordinate = {};if (!selectGroup) {this.selectGroup = selectGroup = new graphic.Group();group.add(selectGroup);}for (var i = 0; i < points.length; i++ ) {coordinate.x = points[i][0];coordinate.y = points[i][1];selectRectPainter.painterSelectElems(coordinate, selectGroup);  }this.selectGroup = selectGroup;}           /**@param {Object} group*/selectRectPainter.show = function (group) {group.traverse(function (elem) {elem.setStyle && elem.setStyle({opacity: 1});elem.z = 3;});return this;};/**@param {Object} group*/selectRectPainter.hide = function (group) {if (!group) {return;}group.eachChild(function (elem) {elem.setStyle({opacity: 0});elem.z = 0;});return this;};/**@param {Object} coordinate @param {Object} group*/selectRectPainter.painterSelectElems = function (coordinate, group, flag) {var rect, circle, x , y;x = coordinate.x;y = coordinate.y;if (flag) {circle = new graphic.Circle({shape:{cx: x ,cy: y ,r: 4},z:3,style:{fill:'rgba(0, 128, 0, 0.5)'},silent:false                });group.add(circle);return;}rect = new graphic.Rect({shape: {x: x - 6,y: y - 6,height: 12,width: 12},z:3,style: {fill: 'rgba(255, 255, 255, 0)',stroke: '#000',linewidth: 1},silent: false});group.add(rect);for (var i = 0; i < 4; i++) {circle = new graphic.Circle({shape:{cx: x + (i % 2) * 12 - 6,cy: y + (i >= 2 ? 12 : 0) - 6,r: 4},z:3,style:{fill:'rgba(0, 128, 0, 0.5)'},silent:false                });group.add(circle);}return this;};

（3）配置option参数，初始化图表。如下所示：

var chart = echarts.init(document.getElementById("content"));
var colors = ['#5793f3', '#d14a61', '#675bba'];var option = {color: colors,tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},grid: {right: '20%'},toolbox: {feature: {dataView: {show: true, readOnly: false},restore: {show: true},saveAsImage: {show: true}}},legend: {data:['蒸发量','降水量','平均温度']},xAxis: [{type: 'category',axisTick: {alignWithLabel: true},splitLine: {show: true},silent: false,triggerEvent: true,selectEvent:true,data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis: [{type: 'value',name: '蒸发量',min: 0,max: 250,position: 'right',axisLine: {show: true,lineStyle: {color: colors[0]}},splitLine: {show: true},silent: false,triggerEvent: true,selectEvent: true,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '降水量',min: 0,max: 250,position: 'right',offset: 80,splitLine: {show:true},silent: false,triggerEvent: true,selectEvent:true,axisLine: {show: true,lineStyle: {color: colors[1]}},axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '温度',min: 0,max: 25,splitLine: {show: true},silent: false,triggerEvent: true,selectEvent: true,position: 'left',axisLine: {show: true,lineStyle: {color: colors[2]}},axisLabel: {formatter: '{value} °C'}}],series: [{name:'蒸发量',type:'bar',selectEvent: true,data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',selectEvent: true,yAxisIndex: 1,data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'平均温度',type:'line',selectEvent: true,yAxisIndex: 2,data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]
};chart.setOption(option);chart.on('contextmenu',function (params) {console.log(params);
});

以上，差不多就是选中事件的处理代码，由于在代码中还调用了其他接口，故难免有些地方让人看不懂，详细的源码，我会上传到csdn，有兴趣的可以下载下来。源码地址如下：http://download.csdn.net/download/mulumeng981/9975060
谢谢。

（2）Echarts图表绑定特殊事件-图表元素绑定选中事件相关推荐

js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...
在html上绑定touch,实现html元素跟随touchmove事件的event.touches[0].clientX移动
主要是使用了transform:translateX 实现 newWaterChart * { padding:0; margin:0; -webkit-box-sizing: border-box; ...
[Vue]点击事件获取元素本身及事件
<button @click = "clickfun($event)">点击</button>methods: {clickfun(e) {// e.tar ...
html 点击文本框则选中,JS事件内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
java多次点击时事件_click事件的累加绑定，绑定一次点击事件，执行多次
我的github(PS:希望star):https://github.com/thWinterSun/v-admin 最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素 ...
click事件的累加绑定
click事件的累加绑定,绑定一次点击事件,执行多次. 在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定一个点击事件,这样第二次点击就会执行两次,以此类推. 如 ...
JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
Visual Event插件----查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

（2）Echarts图表绑定特殊事件-图表元素绑定选中事件

（2）Echarts图表绑定特殊事件-图表元素绑定选中事件相关推荐

最新文章

热门文章