echarts点击时添加markline可能出现的问题

问题

当只有一个图表显示的时候，直接setOption点击位置的markline是ok的，原有的markline不会被覆盖；但是如果是多个图表实例，第二个图表原有的markline就会被覆盖掉。
（不知道什么原因，两个图表实例，不同的id，共用一套markline数据，第二个图表实例的markline会被setOption覆盖？）

// 这样写，创建多个图表实例时，第二个图表实例原有的markline会消失
let setMarkLine = function (xAxis, chartInstance) {
  let data = [
    {
      name: xAxis,
      xAxis: xAxis, //表示标注 x=xAxis的线, 具体配置项可以参考 https://www.echartsjs.com/zh/option.html#series-line.markLine
      lineStyle: {
        color: '#046bff'
      },
      label: {
        color: '#046bff',
        silent: true
        // position: 'end' // label位置
      }
    }
  ]
  chartInstance.setOption(
    {
      series: [
        {
          markLine: {
            data
          }
        }
      ]
    },
    false,
    true,
    false
  )
}

解决

在click中，let option = myChart.getOption()，把点击位置的markline添加进option中,再setOption(option)。这样会避免掉图表原有的markline被覆盖等问题，写法如下：

const setMarkLine = function (xAxis, chartInstance) {
  let o = chartInstance.getOption()
  o.series[0].markLine.data = o.series[0].markLine.data.map((obj) => {
    if (obj.id === 'clickMarkLine') {
      return {
        id: 'clickMarkLine',
        name: xAxis,
        xAxis: xAxis, //表示标注 x=xAxis的线, 具体配置项可以参考 https://www.echartsjs.com/zh/option.html#series-line.markLine
        lineStyle: {
          type: 'solid',
          color: '#046bff'
        },
        label: {
          color: '#046bff',
          silent: true
          // position: 'end' // label位置
        }
      }
    } else {
      return obj
    }
  })
  chartInstance.setOption(o)
  // 这里只setoption当前点击位置有bug：当v-for显示多个图表的时候，第二个图表setoption点击的markline之后，会丢失其他的markline
  // 解决：全部setOption
}