echarts中出现There is a chart instance already initialized on the dom的错误
echarts中出现There is a chart instance already initialized on the dom的错误
·
解决这个警告非常简单,原因是因为你的dom元素渲染了两次echarts图表,具体代码如下,注释很详细,具体方案就是在data中定义全局的echarts实例化对象来进行判断
<template>
<div>
<el-button :type="xinxi1S" size="mini" @click="clickXinxi1"
>信息1</el-button
>
<el-button :type="xinxi2S" size="mini" @click="clickXinxi2"
>信息2</el-button
>
<div id="main" style="width: 800px; height: 600px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
data: null,
title: '',
xAxis: [],
series: [],
xinxi1S: '',
xinxi2S: '',
name1: '',
name2: '',
chartsDom: null, //定义全局变量
}
},
mounted() {
this.getData() //获取默认加载的数据
this.clickXinxi1() //将默认获取的数据显示到echarts图表中
},
methods: {
clickXinxi1() {
this.xinxi1S = 'primary'
this.xinxi2S = ''
this.title = '笔记本销售情况'
this.xAxis = [
'00:00',
'02:00',
'04:00',
'06:00',
'08:00',
'10:00',
'12:00',
'16:00',
'18:00',
'20:00',
]
this.series = [
{
name: this.name1,
type: 'line',
data: [1, 3, 9, 27, 22, 33, 33, 44, 32, 43, 21],
},
{
name: this.name2,
type: 'line',
data: [1, 2, 4, 8, 16, 32, 23, 25, 34, 27, 11],
},
]
this.draw()
},
clickXinxi2() {
this.xinxi1S = ''
this.xinxi2S = 'primary'
this.title = '信息2'
this.series = [
{
name: this.name1,
type: 'line',
data: [1, 3, 9],
},
{
name: this.name2,
type: 'line',
data: [1, 2, 4, 27, 11],
},
]
this.draw()
},
draw() {
if (
//判断是否存在echarts实例化对象,如果存在则销毁
this.chartsDom != null &&
this.chartsDom != '' &&
this.chartsDom != undefined
) {
this.chartsDom.dispose()
}
var chartDom = document.getElementById('main')
this.chartsDom = echarts.init(chartDom) //创建echarts实例化对象
this.chartsDom.clear() //清空画布数据
this.chartsDom.setOption(this.option()) //设置对应的参数,标题,x轴,y轴坐标,以及显示的数据
},
option() {
var option = {
title: {
text: this.title,
left: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
},
legend: {
left: 'left',
},
xAxis: {
type: 'category',
name: 'x',
splitLine: { show: false },
data: this.xAxis,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'value',
name: 'y',
minorSplitLine: {
show: true,
},
},
series: this.series,
}
return option
},
getData() {
this.axios.get('data/product/index.php').then(res => {
console.log(res)
this.name1 = res.data.newArrivalItems[0].title
this.name2 = res.data.newArrivalItems[1].title
})
},
},
}
</script>
<style lang="scss" scoped></style>
更多推荐
已为社区贡献2条内容
所有评论(0)