vue项目，浏览器报错：Too many active WebGL contexts. Oldest context will be lost

报错原因：在项目中使用了echarts-gl组件，切换页面后组件不销毁，一直累积

解决方法：在每次初始化图表之前，把之前的组件销毁掉

// 销毁之前的echarts
if (chart != null && chart !== '' && chart !== undefined) {
  chart.dispose() // 销毁
}

全部代码如下,echarts-gl用法来自于vue echarts 三维折线图：

<template>
  <div :id="chartId" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'

//需要在这里新建变量
let chart
export default {
  name: 'Line3DChart',
  data() {
    return {}
  },
  mounted() {
    this.drewLine()
  },
  props: {
    chartId: {
      type: String,
      required: true
    }
  },
  methods: {
    drewLine() {
      // 数据处理
        const data = [
        [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [
          0, 0, 1, 1, 5, 7, 9, 11, 12, 13, 17, 17, 17, 17, 17, 17, 17, 17, 17,
          17, 17, 17
        ],
        [
          5, 6, 9, 9, 9, 11, 11, 11, 13, 13, 14, 14, 14, 16, 16, 16, 16, 16, 18,
          18, 18, 18
        ],
        [
          13, 17, 22, 22, 26, 33, 34, 36, 36, 37, 39, 40, 40, 42, 42, 42, 43,
          43, 44, 44, 44, 44
        ],
        [
          13, 16, 17, 27, 35, 45, 49, 53, 58, 61, 65, 66, 68, 69, 71, 73, 73,
          73, 74, 74, 74, 74
        ]
      ]
      const dataX = [
        '1/27',
        '1/28',
        '1/29',
        '1/30',
        '1/31',
        '2/1',
        '2/2',
        '2/3',
        '2/4',
        '2/5',
        '2/6',
        '2/7',
        '2/8',
        '2/9',
        '2/10',
        '2/11',
        '2/12',
        '2/13',
        '2/14',
        '2/15',
        '2/16',
        '2/17'
      ]
      const dataY = ['生产', '收购', '运输', '销售', '消费']
      const vdata = []
      for (let i = 0; i < dataY.length; i++) {
        vdata[i] = []
      }
      for (let t = 0; t < dataY.length; t++) {
        const y = dataY[t]
        for (let k = 0; k < data[0].length; k++) {
          for (let p = 0; p < dataX.length; p++) {
            const x = dataX[p]
            const z = data[t][p]
            vdata[t].push([x, y, z])
          }
        }
      }
      // 销毁之前的echarts
      if (chart != null && chart !== '' && chart !== undefined) {
        chart.dispose() // 销毁
      }
      chart = echarts.init(document.getElementById(this.chartId))
      chart.setOption({
        xAxis3D: {
          type: 'category',
          name: '',
          data: dataX,
          axisLabel: {
            show: true,
            interval: 0 // 使x轴都显示
          }
        },
        yAxis3D: {
          type: 'category',
          name: '',
          data: dataY,
          axisLabel: {
            show: true,
            interval: 0 // 使y轴都显示
          }
        },
        zAxis3D: {
          type: 'value',
          name: ''
        },
        tooltip: {
          show: true
        },
        grid3D: {
          boxWidth: 300,
          boxHeight: 120,
          boxDepth: 200,
          axisLine: {
            show: true,
            interval: 0,
            lineStyle: {
              color: '#2c3e50'
            }
          },
          viewControl: {
            distance: 400
          }
        },
        series: [
          {
            type: 'line3D', // 当type为line3D时有label没有作用，官网没有label这个配置项
            name: '生产',
            lineStyle: {
              width: 2, // 线的宽度
              color: 'rgb(72,65,240)' // 线的颜色
            },
            data: vdata[0] // 线数据和点数据所需要的格式一样
          },
          {
            type: 'line3D',
            name: '收购',
            lineStyle: {
              color: 'rgb(72,65,240)', // 线的颜色
              width: 2 // 线的宽度
            },
            data: vdata[1]
          },
          {
            type: 'line3D',
            name: '运输',
            lineStyle: {
              color: 'rgb(72,65,240)',
              width: 2
            },
            data: vdata[2]
          },
          {
            type: 'line3D',
            name: '销售',
            lineStyle: {
              color: 'rgb(72,65,240)',
              width: 2
            },
            data: vdata[3]
          },
          {
            type: 'line3D',
            name: '消费',
            lineStyle: {
              color: 'rgb(72,65,240)',
              width: 2
            },
            data: vdata[4]
          }
        ]
      })
      window.addEventListener('resize', function () {
        chart.resize()
      })
    }
  }
}
</script>

<style scoped>
</style>