Echarts图表不显示tooltip提示框

方法1：// 若只将tooltip的触发方式改为 'item', 那么点击线上的点，能有提示框弹出tooltip: {trigger: 'item'},方法2：// tooltip的触发方式仍为 'axis'，改变echarts实例的赋值语句//charts.chart = echarts.init(chartContainer.value as HTMLElement)// 保存echarts

前端老实人

15136人浏览 · 2022-03-14 16:07:58

前端老实人 · 2022-03-14 16:07:58 发布

方法1：

// 若只将tooltip的触发方式改为 'item', 那么点击 线上的点，能有提示框弹出
 tooltip: {
    trigger: 'item'
  },

方法2：

// tooltip的触发方式仍为 'axis'，改变echarts实例的赋值语句
//    charts.chart = echarts.init(chartContainer.value as HTMLElement)  // 保存echarts 实例，赋值给 reactive 响应式对象
//    charts.chart.setOption(options, true)

// 改为如下语句，tooltip 显示正常
    const chart = echarts.init(chartContainer.value as HTMLElement)  // 这样赋值，不直接将 echarts 实例 赋值给 reactive 响应式对象
    chart.setOption(options, true)
    charts.chart = chart

方法3：

 const charts = reactive({ chart: null})  // charts.chart 是个Proxy对象

// 如果 charts 不是 响应式的， 没问题。
const charts  = { chart: null }
charts.chart = echarts.init(chartContainer.value as HTMLElement) 
charts.chart.setOption(options, true)