You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/02/25 03:23:24 UTC
[GitHub] [echarts] LinsRock opened a new issue #14342: Vue3项目中使用折线图出现tooltip不显示
LinsRock opened a new issue #14342:
URL: https://github.com/apache/echarts/issues/14342
### 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. 当我将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不显示
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] SupaFan commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
SupaFan commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-800732369
我用vite vue3也遇到这个问题了 保存实例的变量不要放到data里面就解决了 这具体原因是什么呢？
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] LinsRock closed issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
LinsRock closed issue #14342:
URL: https://github.com/apache/echarts/issues/14342
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-785548045
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] LinsRock commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
LinsRock commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-785559343
> 可能是 `ref` 的原因，`chartInstance` 实际上并不需要 `ref`，建议声明一个普通变量。
谢谢，还真是这个问题。一时没注意这个问题，还以为是options配置错误
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-785555993
可能是 `ref` 的原因，`chartInstance` 实际上并不需要 `ref`，建议声明一个普通变量。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] SupaFan edited a comment on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
SupaFan edited a comment on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-800732369
我用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>
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] HomyeeKing commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
HomyeeKing commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-797219465
我也遇到了这个问题，但是好像是canvas的原因，换成div元素就ok了
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-833990180
@susiwen8 嗯 感觉可以
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-833998307
@susiwen8 拿issue的例子来说，似乎只有 `trigger: axis` 时才会有问题，`trigger: item` 则不会，还需要进一步看下。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart removed a comment on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
plainheart removed a comment on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-833998307
@susiwen8 拿issue的例子来说，似乎只有 `trigger: axis` 时才会有问题，`trigger: item` 则不会，还需要进一步看下。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-833981543
@alleluya-young 这个 warn 是因为在相同的 DOM 上重复 init ECharts，不太清楚你具体是如何写的。DOM 用 `ref`，echarts 实例用普通变量或者 `shallowRef`。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] YangYmimi commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
YangYmimi commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-800748206
本来打算用mixin将公用的一些方法提出来的。
现在data内定义的instance就当成一个缓存了。
`const dom = document.getElementById(this.dom);
if (dom) {
const instance = echarts.init(dom);
if (instance) {
this.setOption(instance);
}
// cache
this.instance = instance;
}`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] YangYmimi edited a comment on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
YangYmimi edited a comment on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-800748206
本来打算用mixin将公用的一些方法提出来的。
现在data内定义的instance就当成一个缓存了。
```
const dom = document.getElementById(this.dom);
if (dom) {
const instance = echarts.init(dom);
if (instance) {
this.setOption(instance);
}
// cache
this.instance = instance;
}
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] alleluya-young commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
alleluya-young commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-833382086
> 可能是 `ref` 的原因，`chartInstance` 实际上并不需要 `ref`，建议声明一个普通变量。
如果声明的实例变量不用ref包裹, 我这会一直有"There is a chart instance already initialized on the dom"这个warn提示 应该怎么去写判断比较好呢?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on issue #14342: Vue3项目中使用折线图出现tooltip不显示
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-833985075
感觉是不是需要在 Doc上说明一下 Vue 项目上使用的 FAQ？ 很多人问了 @plainheart
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org