Echarts图表不显示tooltip提示框

x33g5p2x  于2022-03-14 转载在 其他  
字(0.6k)|赞(0)|评价(0)|浏览(960)

方法1:

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

方法2:

  1. // tooltip的触发方式仍为 'axis',改变echarts实例的赋值语句
  2. // charts.chart = echarts.init(chartContainer.value as HTMLElement) // 保存echarts 实例,赋值给 reactive 响应式对象
  3. // charts.chart.setOption(options, true)
  4. // 改为如下语句,tooltip 显示正常
  5. const chart = echarts.init(chartContainer.value as HTMLElement) // 这样赋值,不直接将 echarts 实例 赋值给 reactive 响应式对象
  6. chart.setOption(options, true)
  7. charts.chart = chart

方法3:

  1. const charts = reactive({ chart: null}) // charts.chart 是个Proxy对象
  2. // 如果 charts 不是 响应式的, 没问题。
  3. const charts = { chart: null }
  4. charts.chart = echarts.init(chartContainer.value as HTMLElement)
  5. charts.chart.setOption(options, true)

相关文章