记录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)

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐