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>