图表会导致内存泄漏

Question

该页面将打开很长时间。

预期行为

内存保持稳定

实际行为

一晚后，内存泄漏和浏览器崩溃。

随着组件的切换，图表实例未销毁。似乎echarts-gl是原因。

谢谢您的时间。

App.vue

<template>
  <div id="app">
    <component :is="currComp"></component>
  </div>
</template>

<script>
import EchartsView from '@/components/EchartsView'
import HighChartsView from '@/components/HighChartsView'

export default {
  name: 'app',
  components: {
    EchartsView,
    HighChartsView
  },
  data () {
    return {
      allComps: ['EchartsView', 'HighChartsView'],
      currInd: 1
    }
  },
  computed: {
    currComp () {
      return this.allComps[this.currInd];
    }
  },
  mounted () {
    setInterval(() => {
      this.currInd++;
      this.currInd > 1 && (this.currInd = 0);
    }, 3000)
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-left: 60px;
  margin-top: 60px;
  width: 500px;
  height: 400px;
}
</style>

echartsView.vue

<template>
  <div ref="chart" style="width:100%;height:100%"></div>
</template>
<script>
import echarts from 'echarts'
import 'echarts-gl'
import chinaJson from '@/china.json'

const geoCoordMap = {
  '黑龙江': [127.9688, 45.368],
  '内蒙古': [110.3467, 41.4899],
  '吉林': [125.8154, 44.2584],
  '北京': [116.4551, 40.2539],
  '辽宁': [123.1238, 42.1216],
  '河北': [114.4995, 38.1006],
  '天津': [117.4219, 39.4189],
  '山西': [112.3352, 37.9413],
  '陕西': [109.1162, 34.2004],
  '甘肃': [103.5901, 36.3043],
  '宁夏': [106.3586, 38.1775],
  '青海': [101.4038, 36.8207],
  '新疆': [87.9236, 43.5883],
  '西藏': [91.11, 29.97],
  '四川': [103.9526, 30.7617],
  '重庆': [108.384366, 30.439702],
  '山东': [117.1582, 36.8701],
  '河南': [113.4668, 34.6234],
  '江苏': [118.8062, 31.9208],
  '安徽': [117.29, 32.0581],
  '湖北': [114.3896, 30.6628],
  '浙江': [119.5313, 29.8773],
  '福建': [119.4543, 25.9222],
  '江西': [116.0046, 28.6633],
  '湖南': [113.0823, 28.2568],
  '贵州': [106.6992, 26.7682],
  '云南': [102.9199, 25.4663],
  '广东': [113.12244, 23.009505],
  '广西': [108.479, 23.1152],
  '海南': [110.3893, 19.8516],
  '上海': [121.4648, 31.2891]
}

export default {
  name: 'EChartsView',
  mounted () {
    echarts.init(this.$refs.chart)
    echarts.registerMap('china', chinaJson)
    this.setOpt()
  },
  methods: {
    setOpt () {
      let chartOpt = {
        tooltip: {},
        geo3D: {
          map: 'china',
          itemStyle: {
            color: '#1d5e98',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: '#000'
          },
          label: {
            show: true,
            textStyle: {
              color: '#f00',
              fontSize: 8,
              opacity: 1,
              backgroundColor: 'rgba(0,23,11,0)'
            }
          },
          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 3,
                backgroundColor: 'rgba(0,23,11,0)'
              }
            }
          }
        },
        series: [
          {
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: 'pin',
            symbolSize: 20,
            opacity: 1,
            data: [{
              name: '北京',
              value: [...geoCoordMap['北京'], 10],
              itemStyle: {
                color: 'blue'
              }
            }]
          }
        ]
      }
      let myChart = echarts.getInstanceByDom(this.$refs.chart)
      myChart.setOption(chartOpt)
    }
  }
}
</script>

highChartsView.vue

<template>
  <charts ref="chart" style="width:100%;height:100%" :options="chartOpt"></charts>
</template>
<script>
import Highcharts from 'highcharts'
import { Chart } from 'highcharts-vue'
import wordcloud from 'highcharts/modules/wordcloud'

wordcloud(Highcharts)

export default {
  name: 'HighChartsView',
  components: {
    Charts: Chart
  },
  data () {
    return {
      chartOpt: {
        chart: {
          backgroundColor: ''
        },
        credits: {
          enabled: false
        },
        title: {
          text: ''
        },
        series: [{
          type: 'wordcloud',
          data: [],
          rotation: {
            from: 0,
            to: 0
          }
        }]
      }
    }
  },
  mounted () {
    this.createWords()
    console.log(Highcharts.charts)
  },
  methods: {
    createWords () {
      let data = []
      for (let i = 0; i < 10; i++) {
        data.push({
          accessPlace: '北京', accessTime: new Date().toDateString()
        })
      }
      let words = []
      for (let i = 0; i < data.length; i++) {
        let { accessPlace, accessTime } = data[i]
        words.push({
          name: accessPlace + '<br/>' + accessTime,
          weight: data.length - i
        })
      }
      this.chartOpt.series[0].data = words
    }
  }
}
</script>

产品版本

"echarts": "^4.6.0",
"echarts-gl": "^1.1.1",
"highcharts": "^8.0.0",
"highcharts-vue": "^1.3.5",
"vue": "^2.6.10"

受影响的浏览器

全部

Answer 1

您需要在beforeDestroy（）中调用dispose方法。 https://vuejs.org/v2/cookbook/avoiding-memory-leaks.html

但是，即使实例在处置后仍存在于内存中，所以为了解决此问题，您应在处置后调用chart = null。https://medium.com/@kelvinau4413/memory-leak-from-echarts-occurs-if-not-properly-disposed-7050c5d93028。

希望这会有所帮助。 ：）

如果此解决方案不起作用，我认为问题是此问题：https://github.com/apache/incubator-echarts/issues/7002。