chart 中 legend标签 自定义事件 和 解绑事件

点击legend 标签触发事件

let chartObj = echarts.init(this.$refs["chartOpts"]);  //  初始化 chart 
...
let opts = {
        legend: {
          inactiveColor:"#e93030", // 点击后 文字的颜色  默认 #999 
          selected:{  // 设置 标签是否显示 默认 true
             "first":true, 
          },
          left: "center",
          textStyle: {
            padding: [0, 0, 0, 0],
            color: "#999" ,  //  标签 文字颜色 
          },
          data: [
             {
              name: 'first',
              textStyle: {
                color:"#e93030"  //  单独设置 对应的标签文字颜色 
              },
            },
            { name: "second",}
          ],
        },
   }
   // 解绑 事件
   // 在实际使用过程中 chart图 可能被更新几次，在定义点击事件时，很有可能被覆盖，或者事件响应 几次 ，需要提前解除绑定的事件 
chartObj.off('legendselectchanged')
   // 仅点击legend 标签 触发
chartObj.on('legendselectchanged', (e) => { //  标签的点击事件
    //  设置 点击 不同的标签 标签变暗的颜色 不同
   if(e.name == "first"){
        opts.legend.inactiveColor = "#e93030"  // 这里都设置为 原本的颜色
     }else {
        opts.legend.inactiveColor = '#999'  // 这里都设置为 原本的颜色
     } 
     // do something...
     
     // 事件的效果 类似于 重置了 点击标签后的字体和 图形的改变
     chartObj.setOption(opts, true); 
})
      
    chartObj.clear();
    chartObj.setOption(opts, true); 

在实际使用过程中 chart图 可能被更新几次，在定义事件时，很有可能被覆盖，或者事件响应 几次 ，需要提前解除绑定的事件 chartObj.off('legendselectchanged') 官网详情

取消legend点击事件

legend官网文档配置

let opt ={
  legend :{
      selectedMode: false,
  },
}

legend 标签 换行居中

 let legendData = [[],[]]
 let colorList = []
 series.forEach((item,i)=>{
     colorList.push(item.lineStyle.color)
     //  这里 假定第四个 就换行
     if(series.length>4){
         if(i<3){
             legendData[0].push({
                 name: item["name"],
             })
         }else{
             legendData[1].push({
                 name: item["name"],
             })
         }
     }
 })
 let legendOpts={
      show:true, 
      icon:"rect", 
      itemHeight:2, 
      itemWidth:10,
      textStyle:{
          color:   "#666" ,
          fontSize: 13 , 
      }
  }
 let legend = null
  if(legendData[1].length>0){
      legend = [
          {
              top:5,
              bottom:15, 
              data:legendData[0],
              ...legendOpts,
          },
          {
              top:30,
              bottom:15,
              data:legendData[1],
               ...legendOpts,
          }
      ]
  }else{
      legend={
          top:5,
          ...legendOpts
      }
  }

  let options = {
      color:colorList,
      legend:legend,
      series:series,
   }