zRender 曲线点击事件

ZRender 曲线点击事件

代码实现：使用ZRender绘制曲线，并给每条曲线都添加上对应的点击事件

学习，查询ZRender 相关信息时候，拜读到了一篇介绍ZRender 的博客，给了我很大的启发。

博客链接 https://blog.youkuaiyun.com/cc_fys/article/details/78854741

首先是初次绘制曲线，绘制的时候就给每个曲线加上相应的点击事件。

var polyline = new zrender.Polyline(
    {
        style: {
            stroke:eveItem.color,
            lineDash:dash,
            lineWidth:eveItem.lineWidth,
        },
        shape:{
            points:data, //点击直接跳转参看[官方文档](https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpolyline)
            smooth:0.3,
            smoothConstraint:[[0, 0], [maxWidth, maxHeight]],
        },
        relateData:eveItem,//当前曲线上的相关信息，包括曲线的颜色，线宽等~
        cursor:'default'   //鼠标在曲线的点击范围内时，鼠标样式改变，提醒用户可以点击。
    });
self.clickEle(polyline);//添加上点击事件
group.add(polyline);

clickEle:function(zrPlEle){
        	var self=this;
        	zrPlEle.on('click',()=>{ 
        		//这里写上 点击曲线之后要做的事情，比如说更改曲线的样式属性等~
                zrPlEle.relateData.color = ... ... ;
                update();
        	});        
        }

当对曲线进行操作之后，更新曲线绘制

update:function(){
childs.forEach(function(item,index){
    if(item.type=='polyline'){
        //如果是对data进行更新了,就使用attr更新数据
        item.attr({
            shape:{
                points:data
            }});
        //如果是对style进行了更新，也是一样的
        item.attr({
            style:{
                ... ...
            }
        })
    }
})
}