点击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 = nullif(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,}