Vue3项目中使用折线图出现tooltip不显示

[LinsRock]

Version

5.0.2

Reproduction link

https://codesandbox.io/s/magical-smoke-vyigt?file=/src/components/chart.vue

Steps to reproduce

1. 当我将tooltip设置成一个空对象时，tooltip显示
2. 当我给tooltip设置值时，tooltip不显示
3. 但我将相同的options复制到官方示例中，又可以正常显示tooltip，不确定是不是Vue3环境的问题

options = {
   grid: { left: 10, bottom: 20, top: 10, right: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [11, 12, 13, 14, 15, 16, 17]
    },
    yAxis: {
      type: 'value',
      position: 'right'
      // min: 213,
      // max: 416
    },
    // tooltip: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        animation: false,
        label: {
          backgroundColor: '#ccc',
          borderColor: '#aaa',
          borderWidth: 1,
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          color: '#222'
        }
      },
      formatter: function(params: any) {
        console.log(params)
        return params.name   '：'   params.value;
      }
    },
    series: [
      {
        type: 'line',
        symbolSize: 6,
        // showSymbol: false,
        // hoverAnimation: false,
        lineStyle: {
          color: ' #76A9FF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(159, 195, 255, 0.61)'
            },
            {
              offset: 1,
              color: 'rgba(157, 194, 255, 0)'
            }
          ])
        },
        data: [312.23, 366.21, 355.21, 310.2, 370.11, 300, 360.99]
      }
    ]
}

What is expected?

期望鼠标hover时可以显示tooltip

What is actually happening?

当我给tooltip设置值时，tooltip不显示

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[echarts-bot]

@LinsRock It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

Tooltip does not display when using line chart in Vue3 project

BODY

Version

5.0.2

Reproduction link

[https://codesandbox.io/s/magical-smoke-vyigt?file=/src/components/chart.vue](https://codesandbox.io/s/magical-smoke-vyigt?file=/src/ components/chart.vue)

Steps to reproduce

1. When I set the tooltip to an empty object, the tooltip displays
2. When I set a value for the tooltip, the tooltip does not display
3. But I copied the same options to the official example, and the tooltip can be displayed normally, not sure if it is a problem with the Vue3 environment

options = {
   grid: {left: 10, bottom: 20, top: 10, right: 30 },
    xAxis: {
      type:'category',
      boundaryGap: false,
      data: [11, 12, 13, 14, 15, 16, 17]
    },
    yAxis: {
      type:'value',
      position:'right'
      // min: 213,
      // max: 416
    },
    // tooltip: {},
    tooltip: {
      trigger:'axis',
      axisPointer: {
        type:'cross',
        animation: false,
        label: {
          backgroundColor:'#ccc',
          borderColor:'#aaa',
          borderWidth: 1,
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          color:'#222'
        }
      },
      formatter: function(params: any) {
        console.log(params)
        return params.name':' params.value;
      }
    },
    series: [
      {
        type:'line',
        symbolSize: 6,
        // showSymbol: false,
        // hoverAnimation: false,
        lineStyle: {
          color: '#76A9FF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color:'rgba(159, 195, 255, 0.61)'
            },
            {
              offset: 1,
              color:'rgba(157, 194, 255, 0)'
            }
          ])
        },
        data: [312.23, 366.21, 355.21, 310.2, 370.11, 300, 360.99]
      }
    ]
}

What is expected?

Tooltip can be displayed when the mouse is hovered

What is actually happening?

When I set a value for the tooltip, the tooltip does not display

[plainheart]

可能是 ref 的原因，chartInstance 实际上并不需要 ref，建议声明一个普通变量。

[LinsRock]

可能是 ref 的原因，chartInstance 实际上并不需要 ref，建议声明一个普通变量。

谢谢，还真是这个问题。一时没注意这个问题，还以为是options配置错误

[HomyeeKing]

我也遇到了这个问题，但是好像是canvas的原因，换成div元素就ok了

[SupaFan]

我用vite vue3也遇到这个问题了 保存实例的变量不要放到data里面就解决了 这具体原因是什么呢？
===================割===================
后续 封装了组件 单单定义一个变量多图表会出现问题

<template>
  <div class="echarts" ref="chart" />
</template>

<script >
import * as echarts from "echarts";
let chart = {};

export default {
  name: "chart",
  data() {
    return {
      resizeTimer: null,
      version: "1.0",
      chartTemp: null,
    };
  },

  props: {
    // 图表参数
    options: Object,
    initOptions: Object,
  },

  options: {
    deep: true,
    handler(options) {
      if (Object.prototype.toString.call(options) === "[object Object]") {
        this.setOption(options);
      }
    },
  },
  methods: {
    // 初始化
    init() {
      const { options, initOptions } = this.$props;
      if (chart[this.chartTemp]) {
        chart[this.chartTemp].dispose();
        chart[this.chartTemp] = null;
      }
      chart[this.chartTemp] = echarts.init(
        this.$refs.chart,
        {},
        initOptions
      );
      if (options) {
        chart[this.chartTemp].setOption(options);
      }
    },

    // 调整尺寸
    resize(options = {}) {
      this.resizeTimer = clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
      this.init()
      }, 300);
    },
  },
  mounted() {
    this.chartTemp = Math.random();
    this.$nextTick(() => {
      this.init();
    });
    window.addEventListener("resize", this.resize);
  },
  beforeUnmount() {
    if (chart[this.chartTemp]) {
      window.removeEventListener("resize", this.resize);
      this.resizeTimer = clearTimeout(this.resizeTimer);
      chart[this.chartTemp].dispose();
      chart[this.chartTemp] = null;
    }
  },
};
</script>

[alleluya7519]

可能是 ref 的原因，chartInstance 实际上并不需要 ref，建议声明一个普通变量。

如果声明的实例变量不用ref包裹, 我这会一直有"There is a chart instance already initialized on the dom"这个warn提示 应该怎么去写判断比较好呢?

[plainheart]

@alleluya-young 这个 warn 是因为在相同的 DOM 上重复 init ECharts，不太清楚你具体是如何写的。DOM 用 ref，echarts 实例用普通变量或者 shallowRef。