[GitHub] [echarts] evinLiang opened a new issue #14443: 内存泄漏

[GitBox]

evinLiang opened a new issue #14443:
URL: https://github.com/apache/echarts/issues/14443


   <!--
   Please Use https://ecomfe.github.io/echarts-issue-helper to create the issue.
   Otherwise, it will be closed immediately.
   Questions in the form of *How to use ...* should be at Stack Overflow rather 
than GitHub issue list.
   
   请注意，所有 issue 必须由 https://ecomfe.github.io/echarts-issue-helper/ 
创建，不然将会被直接关闭。建议使用英文提问。
   Issues 中不要问「如何使用 ECharts 实现……功能」的问题，相关问题请到 SegmentFault 或 Stack Overflow 
提问，详见上面的链接。
   -->
   
   vue项目引入echarts出现内存泄漏问题，页面放置15到30分钟，内存飙升什么严重
   这张是30分钟的
   
![image](https://user-images.githubusercontent.com/32260962/110600768-43227380-81bf-11eb-8149-8d1a0df858aa.png)
   这张是刚打开的
   
![image](https://user-images.githubusercontent.com/32260962/110600896-65b48c80-81bf-11eb-8031-6e663e4152d9.png)
   vue 组件代码
   ```
   <template> 
       <div :class="className" :style="{height:height,width:width}"></div>
   </template>
   
   <script>
   import echarts from 'echarts'
   require('echarts/theme/macarons') // echarts theme
   require('echarts/map/js/china') // echarts theme
   import { debounce } from '@/utils'
   
   export default {
     props: {
       className: {
         type: String,
         default: 'chart'
       },
       width: {
         type: String,
         default: '100%'
       },
       height: {
         type: String,
         default: '720px'
       },
       autoResize: {
         type: Boolean,
         default: true
       },
       chartData: {
         type: Object
       }
     },
     data() {
       return {
         chart: null
       }
     },
     mounted() {
       this.initChart()
       if (this.autoResize) {
         this.__resizeHanlder = debounce(() => {
           if (this.chart) {
             this.chart.resize()
           }
         }, 100)
         window.addEventListener('resize', this.__resizeHanlder)
       }
   
       // 监听侧边栏的变化
       // const sidebarElm = 
document.getElementsByClassName('sidebar-container')[0]
       // sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
     },
     beforeDestroy() {
       if (!this.chart) {
         return
       }
       if (this.autoResize) {
         window.removeEventListener('resize', this.__resizeHanlder)
       }
   
       // const sidebarElm = 
document.getElementsByClassName('sidebar-container')[0]
       // sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
   
       this.chart.dispose()
       this.chart = null
     },
     watch: {
       chartData: {
         deep: true,
         handler(val) {
           this.chart.clear()
           this.setOptions(val)
         }
       }
     },
     methods: {
       resize() {
         this.chart.resize()
       },
       updateOptions({ title, data, dataRange } = { title: '分布', data: [], 
dataRange: { min: 0, max: 100 }}) {
         this.chart.setOption({
           title: {
             text: title
           },
           dataRange: {
             min: dataRange.min,
             max: dataRange.max
           },
           series: [
             {
               data: data
             }
           ]
         })
       },
       setOptions({ title, data, dataRange } = { title: '分布', data: [], 
dataRange: { min: 0, max: 100 }}) {
         this.chart.setOption({
           title: {
             text: title,
             padding: [15, 0, 0, 30],
             textStyle: {
               color: '#000',
               fontSize: 22
             }
           },
           dataRange: {
             orient: 'horizontal',
             min: dataRange.min,
             max: dataRange.max,
             inRange: {
               color: ['#fee090', '#fdae61', '#f46d43', '#d73027']
             },
             text: ['高', '低'], // 文本，默认为数值文本
             splitNumber: 0
           },
           toolbox: {
             show: false,
             orient: 'vertical',
             x: 'left',
             y: 'center',
             feature: {
             }
           },
           series: [
             {
               name: '坐席数据',
               type: 'map',
               mapType: 'china',
               mapLocation: {
   
               },
               selectedMode: false,
               itemStyle: {
                 normal: { label: { show: true, formatter: function(params) {
                   return `${params.name}${(params.value && '\n' + 
params.value) || ''}`
                 } }},
                 emphasis: { label: { show: true }}
               },
               data: data
             }
           ],
           animation: true
         })
       },
       initChart() {
         this.chart = echarts.init(this.$el, 'macarons')
         this.setOptions(this.chartData)
         console.log(this.chartData)
       }
     }
   }
   </script>
   <style scoped>
     .count-title{
       line-height: 48px;
       font-size: 32px;
       display: inline-block;
       margin-right: 32px;
     }
   </style>
   
   
   ```
   
   


----------------------------------------------------------------
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:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org