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 2022/09/05 12:36:12 UTC
[GitHub] [echarts] 1078195353 opened a new issue, #17619: Vue3绑定ECharts实例为data数据导致，tooltip和legend组件失效[Bug]
1078195353 opened a new issue, #17619:
URL: https://github.com/apache/echarts/issues/17619
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
1. 在vue data中定义变量接收图表实例
```
export default {
data() {
return {
chart: null
}
},
}
```
2. 将图表实例赋值给data的chart
```
var chartDom = document.getElementById('my-echart');
this.chart = echarts.init(chartDom, null, {
width: 600,
height: 400
});
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true
},
dataset: {
source: [
['product', 'Email', 'Union Ads'],
['Mon', 150, 220],
['Tue', 230, 182],
['Wed', 224, 191],
['Thu', 218, 234],
['Fri', 135, 290],
['Sat', 147, 330],
['Sun', 260, 310]
]
},
xAxis: { type: 'category'},
yAxis: {},
series: [{ type: 'line' }, { type: 'line' }]
}
this.chart.setOption(option);
```
3. 页面渲染的图表无法显示tooltip面板，同时legend组件交互失效
### Current Behavior
1. 绑定实例给data变量后tooltip和legend组件失效
2. 当处理成普通变量接收组件正常
```
var chartDom = document.getElementById('my-echart');
const chart = echarts.init(chartDom, null, {
width: 600,
height: 400
});
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true
},
dataset: {
source: [
['product', 'Email', 'Union Ads'],
['Mon', 150, 220],
['Tue', 230, 182],
['Wed', 224, 191],
['Thu', 218, 234],
['Fri', 135, 290],
['Sat', 147, 330],
['Sun', 260, 310]
]
},
xAxis: { type: 'category'},
yAxis: {},
series: [{ type: 'line' }, { type: 'line' }]
}
chart.setOption(option);
```
### Expected Behavior
绑定data变量应当正常显示
### Environment
```markdown
- OS: windows
- Browser: Chrome
- Framework: Vue3
```
### Any additional comments?
怀疑与proxy兼容有关
--
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.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] echarts-bot[bot] commented on issue #17619: [Bug] Vue3绑定ECharts实例为data数据导致，tooltip和legend组件失效
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17619:
URL: https://github.com/apache/echarts/issues/17619#issuecomment-1236954198
@1078195353 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Bug] Vue3 binds the ECharts instance to data data, causing the tooltip and legend components to fail
**BODY**
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
1. Define variables in vue data to receive chart instances
````
export default {
data() {
return {
chart: null
}
},
}
````
2. Assign the chart instance to the chart of data
````
var chartDom = document.getElementById('my-echart');
this.chart = echarts.init(chartDom, null, {
width: 600,
height: 400
});
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true
},
dataset: {
source: [
['product', 'Email', 'Union Ads'],
['Mon', 150, 220],
['Tue', 230, 182],
['Wed', 224, 191],
['Thu', 218, 234],
['Fri', 135, 290],
['Sat', 147, 330],
['Sun', 260, 310]
]
},
xAxis: { type: 'category'},
yAxis: {},
series: [{ type: 'line' }, { type: 'line' }]
}
this.chart.setOption(option);
````
3. The chart rendered on the page cannot display the tooltip panel, and the interaction of the legend component fails.
### Current Behavior
1. The tooltip and legend components fail after binding the instance to the data variable
2. When it is processed as a normal variable, the receiving component is normal
````
var chartDom = document.getElementById('my-echart');
const chart = echarts.init(chartDom, null, {
width: 600,
height: 400
});
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true
},
dataset: {
source: [
['product', 'Email', 'Union Ads'],
['Mon', 150, 220],
['Tue', 230, 182],
['Wed', 224, 191],
['Thu', 218, 234],
['Fri', 135, 290],
['Sat', 147, 330],
['Sun', 260, 310]
]
},
xAxis: { type: 'category'},
yAxis: {},
series: [{ type: 'line' }, { type: 'line' }]
}
chart.setOption(option);
````
### Expected Behavior
The bound data variable should display normally
### Environment
````markdown
- OS: windows
- Browser: Chrome
- Framework: Vue3
````
### Any additional comments?
Suspected to be related to proxy compatibility
</details>
--
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 closed issue #17619: [Bug] Vue3绑定ECharts实例为data数据导致，tooltip和legend组件失效
Posted by GitBox <gi...@apache.org>.
plainheart closed issue #17619: [Bug] Vue3绑定ECharts实例为data数据导致，tooltip和legend组件失效
URL: https://github.com/apache/echarts/issues/17619
--
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 #17619: [Bug] Vue3绑定ECharts实例为data数据导致，tooltip和legend组件失效
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #17619:
URL: https://github.com/apache/echarts/issues/17619#issuecomment-1237368603
是的。按照 Vue 的建议，除 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.
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