echarts dashed lines connect invalid or special values

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
  })}

 

Guess you like

Origin blog.csdn.net/qq_51389137/article/details/132845014