Vue3项目中使用折线图出现tooltip不显示
LinsRock opened this issue · comments
Version
5.0.2
Reproduction link
https://codesandbox.io/s/magical-smoke-vyigt?file=/src/components/chart.vue
Steps to reproduce
- 当我将tooltip设置成一个空对象时，tooltip显示
- 当我给tooltip设置值时，tooltip不显示
- 但我将相同的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不显示
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! 🍵
@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
- When I set the tooltip to an empty object, the tooltip displays
- When I set a value for the tooltip, the tooltip does not display
- 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
可能是 ref 的原因，chartInstance 实际上并不需要 ref，建议声明一个普通变量。
可能是
ref的原因，chartInstance实际上并不需要ref，建议声明一个普通变量。
谢谢，还真是这个问题。一时没注意这个问题，还以为是options配置错误
我也遇到了这个问题，但是好像是canvas的原因，换成div元素就ok了
我用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>
可能是
ref的原因，chartInstance实际上并不需要ref，建议声明一个普通变量。
如果声明的实例变量不用ref包裹, 我这会一直有"There is a chart instance already initialized on the dom"这个warn提示 应该怎么去写判断比较好呢?
@alleluya-young 这个 warn 是因为在相同的 DOM 上重复 init ECharts，不太清楚你具体是如何写的。DOM 用 ref，echarts 实例用普通变量或者 shallowRef。
感觉是不是需要在 Doc上说明一下 Vue 项目上使用的 FAQ？ 很多人问了 @plainheart
@susiwen8 嗯 感觉可以
可能是
ref的原因，chartInstance实际上并不需要ref，建议声明一个普通变量。
感谢，我也遇到这个问题了
vue3中的echart实例需要通过普通声明一个变量来保存，不然tooltip这些不是响应式的
我艹 还真是这样，天坑啊
我也遇到了这个问题，但是好像是canvas的原因，换成div元素就ok了
还真是，换成div就好了，找了一堆解决方案都是不要用ref，就是没效果