话不多说先看图,图例在顶部没截进来。
默认初始化标记线是隐藏的,因此
{
type: "line",
name: "xxxx",
yAxisIndex: 1,
markLine: {
symbol: "none",
label: {
show: true,
position: "insideEndTop",
formatter: "xxxx: {c}m",
color: "red",
},
lineStyle: {
color: "red",
type: "dashed",
width: 2, // 设置线条宽度为2
},
data: [
{
yAxis: {},
name: "xxxx",
},
],
},
},
这里的yAxis要设为{},否则报错
this.myChart.off('legendselectchanged') //解决重复触发
const that = this
this.myChart.on("legendselectchanged", function(event){
let selected = event.selected;
if(!selected['xx']){
that.optionCharts.series[2].markLine.data[0].yAxis = {}
that.optionCharts.legend.selected['xx'] = false
}else{
that.optionCharts.series[2].markLine.data[0].yAxis = that.jjsw
that.optionCharts.legend.selected['xx'] = true
}
}
that.myChart.setOption(that.optionCharts);
});
这样通过监听图例的选中状态,来控制markLine的值,以及为图例的显示赋值,来完成此效果。