点击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点击事件
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,
}