1. Divide a line into two solid lines on top and a dotted line on the bottom.
In the solid line data, the invalid value is changed to '-', and the dotted line is the original array.
Set tooltips individually and set the dotted line to false
The legend is selected, use echarts to monitor the selection time, and re-setOption to legend.
option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
color:['red','red'],
legend: {
selectedMode:true,
selected: {
'实线': true,
'虚线': test
},
data: ["实线"],
},
tooltip: {
trigger: "axis",
},
series: [
{
name:'实线',
data: [ '-',
'-',
0,
0,
0,
0,
1,
1,],
type: 'line',
tooltip: {
trigger: "axis",
show:true,
},
},
{
name:'虚线',
data: [ 2,
2,
0,
0,
0,
0,
1,
1,
],
type: 'line',
tooltip: {
trigger: "axis",
show:false,
},
itemStyle: {
normal: {
lineStyle: {
width: 2,
type:'dashed'
}
}
}
},
]
}
legend//After the echarts rendering is completed, call the changed function to listen for the event, vue's nextTick
function valveLegend(params) {
let myChart = proxy.$refs.valveChart.myChart
let setOption = proxy.$refs.valveChart.setOption
myChart.on('legendselectchanged', function(params) {
const value = params.selected[params.name]
option.valve.legend.selected['实线'] = value
option.valve.legend.selected['虚线'] = value
console.log(option.valve.legend,6666)
setOption({
legend:option.valve.legend
})
// key.value = !key.value
})}