vue3.0+echarts, 图正常渲染, 但tooltip不显示

原创已于 2022-09-30 14:46:44 修改 · 4.5k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

于 2022-09-30 14:45:03 首次发布

在使用 Vue3 和 ECharts 创建统计图表时遇到一个问题，即图表能够正常显示，但配置的 tooltip 在鼠标悬浮时无法显示。问题源于将 echarts 实例赋值给了一个 ref 响应式代理对象。解决方案是改用普通变量存储 echarts 实例，避免使用 ref。更新后的代码中，echarts 初始化和设置选项的操作不再涉及 ref，从而解决了 tooltip 显示问题。

问题

使用vue3+echarts画统计图时, 图能正常显示, 但配置的tooltip不显示

代码

<template>
  <div ref="chartDom" class="chartDom">
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, watch } from 'vue'
const chartDom = ref()

const option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
}
const chart = ref()

onMounted(() => {
  chart.value = echarts.init(chartDom.value)
  chart.value.setOption(option)
})
</script>

<style>
.chartDom{
  height: 500px;
  width: 500px;
}
</style>

在这里插入图片描述

鼠标悬浮, tooltip不显示

解决方案

原因: echarts实例赋值给ref响应式Proxy对象，导致tooltip不显示

解决办法：echarts实例赋值给普通变量

<template>
  <div ref="chartDom" class="chartDom">
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, watch } from 'vue'
const chartDom = ref()

const option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
}
// 不赋值给ref响应式Proxy对象
let chart

onMounted(() => {
  chart = echarts.init(chartDom.value)
  chart.setOption(option)
})
</script>

<style scoped lang='scss'>
.chartDom{
  height: 500px;
  width: 500px;
}
</style>