[GitHub] [echarts] echarts-bot[bot] commented on issue #17619: [Bug] Vue3绑定ECharts实例为data数据导致，tooltip和legend组件失效

[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