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

[GitBox]

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


   ### Version
   3.8.5
   
   ### Steps to reproduce
   ### Version
   3.8.5
   
   
   
   
   
   
   
   
   
   ### Steps to reproduce
   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>
   
   
   ```
   
   
   
   
   
   ### What is expected?
   解决内存泄漏问题
   
   ### What is actually happening?
   解决内存泄漏问题
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   
   ### What is expected?
   解决内存泄漏问题
   
   ### What is actually happening?
   解决内存泄漏问题
   
   <!-- This issue is generated by echarts-issue-helper. 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:
us...@infra.apache.org



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