关于echars 操作legend 解决方案

需求：
1、legend 图例需要是虚线
https://frontend.devrank.cn/traffic-information/7208578249369765947 （重点）
https://blog.csdn.net/weixin_48400717/article/details/128935213

2、可单选 和 多选

3、lengend 和 sever 数据name 保持一致

4、

legend:[{
        selectedMode:'single', // 单选
        itemWidth: 14,
        itemHeight: 4,
        top:20,
        icon:'rect',
        textStyle: {
          fontSize: 14,
          height: 12,
          color: '#fff',
          rich: {
            a: {
              verticalAlign: 'media',
            },
          },
        },
      }],

3、dom.vue 页面

<zmjEcharts ref="supHeiEcharts" title="支架压力" echartsId="supHeiEcharts" :isEchartAbsolute="true">
</zmjEcharts>

js 页面

import { echartsOptions } from '@/components'
import dragImg from '@/assets/image/line/line-9.png'
export const supHeiEcharts = (obj, haveFourCol) => {
  const worknce = 333
  console.log((obj[0]?obj[0][0]:null), haveFourCol, '--------')
  const markLine = {
    symbol: 'none',
    data: [{
      lineStyle: {
        type: 'dashed',
        color: '#FA7272',
      },
      label:{
        position: 'insideEndTop',
        fontSize: '10',
        formatter:`333: {c}`,
        color:'#FA7272',
      },
      yAxis: workingResistance || 'none',
    }],
  }
  const leg = {
    selectedMode:haveFourCol?'single':'',
    itemWidth: 14,
    itemHeight: 4,
    // top:0,
    icon:'rect',
    textStyle: {
      fontSize: 14,
      height: 12,
      color: '#fff',
      rich: {
        a: {
          verticalAlign: 'media',
        },
      },
    },
  }
  let defaultOption = JSON.parse(JSON.stringify(echartsDefaultOptions))
  const options2 = {
    xAxis:{
      ...defaultOption.xAxis[0],
      data: obj.finalSupportPressure?.map(item => {
        return item.dateTime
      }),
      type: 'category',
    },
    color:['#FFDB26', '#579AFF', '#FF5962'],
    legend: [
      {
        ...leg,
        right: '51%',
        data: [
          {
            name: '11',
            icon: 'roundRect',
          },
        ],
      },
      {
        ...leg,
        right: '47%',
        data: [
          {
            name: '22',
            icon: 'roundRect',
          },
        ],
      },
      {
        right: '40.8%',
        ...leg,
        itemWidth: 14, // 图例图形的宽度
        itemHeight: 1, // 图例图形的高度
        data: [
          {
            name: '33', // 图例文字内容
            icon: `image://${dragImg}`,
          },
        ],
      },
    ],
    series : [
      {
        data: obj.initialSupportPressure?.map(item => {
          return item.value
        }),
        type: 'line',
        name: '11',
      },
      {
        data: obj.finalSupportPressure?.map(item => {
          return item.value
        }),
        type: 'line',
        name: '22',
      },
      {
        name:'33',
        type:'line',
        markLine: markLine,
      },
    ],
  }

  const options4 = {
    xAxis:{
      ...defaultOption.xAxis[0],
      data: (obj[0]?obj[0][0]:null)?.data.map(item => {
        return item.time
      }),
      type: 'category',
    },
    color:['#FFDB26', '#579AFF', '#72BF68', '#01C8CF', '#FF5962'],
    legend:[
      {
        data:[
          {name: '11', icon: 'rect'},
          {name: '22', icon: 'rect'},
          {name: '33', icon: 'rect'},
          {name: '44', icon: 'rect'},
          // 重点设置
          {name: '55',
            itemStyle: { opacity: 0 },
            lineStyle:{
              type:'dotted',
            },
          },
        ],
        selectedMode:'multiple',
        itemWidth: 14,
        itemHeight: 4,
        top:20,
        textStyle: {
          fontSize: 14,
          height: 12,
          color: '#fff',
          rich: {
            a: {
              verticalAlign: 'media',
            },
          },
        },
      },
    ],
    series:[
      {
        data: (obj[0]?obj[0][0]:null)?.data.map(item => {
          return item.value
        }),
        type: 'line',
        name: '11',
      },
      {
        data: (obj[1]?obj[1][0]:null)?.data.map(item => {
          return item.value
        }),
        type: 'line',
        name: '22',
      },
      {
        data: (obj[2]?obj[2][0]:null)?.data.map(item => {
          return item.value
        }),
        type: 'line',
        name: '33',
      },
      {
        data: (obj[3]?obj[3][0]:null)?.data.map(item => {
          return item.value
        }),
        type: 'line',
        name: '44',
      },
      // 重点设置
      {
        name:'55',
        type:'line',
        symbol:'none',
        markLine: markLine,
      },
    ],
  }
  const options = !haveFourCol?options2:options4
  // 判断是 否存在 多数据
  const optionsBlo = !haveFourCol?
  (obj.finalSupportPressure && obj.finalSupportPressure.length):
  (obj[0] && obj[0].length)

  if (optionsBlo){
    return {
      dataZoom: [
        {
          type: 'inside',
        },
        {
          type: 'slider',
          show: false,
        },
      ],
      yAxis: {
        ...defaultOption.yAxis[0],
        type: 'value',
        max:haveFourCol?60:null,
      },
      grid: {
        left: 50,
        right: 25,
        top: 60,
        bottom: 30,
      },
      tooltip: {
        trigger: 'axis', // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
        axisPointer: {  // 坐标轴指示器，坐标轴触发有效，
          type: 'line', // 默认为line，line直线，cross十字准星，shadow阴影
          crossStyle: {
            color: '#fff',
        },
      },
      },
      ...options,
    }
  }else {
    return {
      title: {
        left: 'center',
        top: 'center',
        textStyle: {
          fontSize: 14,
        },
        subtext: '暂无数据！',
      },
    }
  }
}