vue3 echars中，重新赋值后，出现tooltip.trigger=‘axis‘,提示框不显示，且不触发tooltip的formatter的问题和markPoint的data数据不显示的问题

记录vue3中使用echars，出现的2个问题。

1.出现tooltip.trigger=‘axis‘,提示框不显示，且不触发tooltip的formatter的问题，但是有提示线，也就是只有虚线

解决方案：不要用ref 和 reactive

<div id="chartContainer" style="width: 100%; height: 500px"></div>


import * as echarts from 'echarts'


var chartDom = document.getElementById('chartContainer')
  myChart = echarts.init(chartDom)
  const option = {}
 myChart.setOption(option)

//这样就解决问题。至于为什么，不清楚。

2.markPoint的data数据不显示的问题

// 更新图表数据
const updateChartData = (message) => {
  let data1 = [20, 60, 90, 120, 130, 140, 150, 10]
  let xdata1 = ['8:30', '10:30', '12:30', '14:30', '16:30', '18:30', '20:30', '22:30']
  console.log(message)

  // 调用 setOption 更新图表
  if (myChart) {
    myChart.setOption({
      xAxis: {
        data: xdata1
      },
      series: [
        {
          data: data1,
          //就这，又重新设置了一次数据
          markPoint: {
            data: markPointData(data1)
          }
        }
      ]
    })
  }
}

const markPointData = (data) =>
  data
    .map((value, index) => {
      if (value > upperLimit || value < lowerLimit) {
        return {
          name: '异常',
          value: value,
          xAxis: index,
          yAxis: value
        }
      }
      return null
    })
    .filter(Boolean)