内存泄漏 - Githubissues

evinLiang commented 3 years ago

Version

3.8.5

Steps to reproduce

Version

3.8.5

Steps to reproduce

vue项目引入echarts出现内存泄漏问题，页面放置15到30分钟，内存飙升什么严重这张是30分钟的这张是刚打开的 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?

解决内存泄漏问题

What is expected?

解决内存泄漏问题

What is actually happening?

解决内存泄漏问题

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

echarts-bot[bot] commented 3 years ago

@evinLiang It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** Memory leak **BODY** ### Version 3.8.5 ### Steps to reproduce ### Version 3.8.5 ### Steps to reproduce The vue project introduces echarts with memory leaks, pages placed for 15 to 30 minutes, and memory soaring what's serious This one is 30 minutes ! [image] (https://user-images.githubusercontent.com/32260962/110600768-43227380-81bf-11eb-8149-8d1a0df858aa.png) This one just opened ! [image] (https://user-images.githubusercontent.com/32260962/110600896-65b48c80-81bf-11eb-8031-6e663e4152d9.png) vue component code ``` ``` ### What is expected? Fix a memory leak ### What is actually happening? Fix a memory leak ### What is expected? Fix a memory leak ### What is actually happening? Fix a memory leak

echarts-bot[bot] commented 3 years ago

@evinLiang Please provide a demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.