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>