在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，如果對您有幫助，點個贊給點鼓勵吧~

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