echarts常用方法，item小坑（二）

在echarts折线图使用过程中，我们会遇到折线拐点symbol的问题。这个问题是在版本3.8.5引用时发现的。折线图在支持legend显示的情况下需要考虑。

问题描述如下：如果采用echarts提供的symbol类型方式做拐点，且拐点为自定义图片。当你支持legend的点击事件时，会发现某个legend被取消之后，再次选中，折线上面的symbol图片并没有被再次渲染上去。当你重新刷新之后，又会是正常的。

1.echarts提供的symbol类型做拐点的写法如下：

var serieData = [];
......
for(var v=0; v < legendData.length ; v++){
    var serie = {
        name:legendData[v],
        type: 'line',
        symbol:"circle",
        symbolSize:10,
        data: metaDate[v]
    };
    serieData.push(serie)
}
var option = {
    .......
    series:serieData
};

symbol做拐点，可以把指定类型换做图片。鼠标移上去之后，item默认会有放大的效果。但是就会出现上述问题。

2.采用markPoint做拐点，会解决上述问题，但是鼠标移上item就没有放大效果了。

seriesArr.push({
       name: dataKinds[ind],
       type:'line',
       data:item,
       symbolSize:0,
       markPoint:{
              symbol: `image://${_point[pth]}`,
              symbolSize:(value,params)=>{
                    let val = params.data.coord[1] +'';
                    let ratio = (maxArr.indexOf(val) === params.seriesIndex)? 30: 20;
                    return ratio
              },
              label:{
                    normal:{
                         show:false
                    }
              },
              data:_markPoint[ind]
       },
       lineStyle:{
            normal:{
                        color: colors[pth],
                        shadowColor:colors[pth],
                        shadowBlur: 20,
                        shadowOffsetX: 1,
                        shadowOffsetY: 0,
                        opacity:1
            }
                 
       },
                
})

以上是主要代码。

这个是我自己写的例子链接：https://gallery.echartsjs.com/editor.html?c=xSxeKHdXJT，如果对您有帮助，点个赞给点鼓励吧~

转载于:https://www.cnblogs.com/lmxHome/p/10761143.html