解决Vue 中使用Echarts 报There is a chart instance already initialized on the dom.的错误

解决Vue 中使用Echarts 报There is a chart instance already initialized on the dom.的错误问题:在已经写好的echarts上面改动数据，回到页面发现，整个echarts 都没了！控制台报： There is a chart instance already initialized on the dom.大概意思就是dom上已经初始化

文章共706字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

记录文章

7546人浏览 · 2021-09-15 14:17:38

记录文章 · 2021-09-15 14:17:38 发布

解决Vue 中使用Echarts 报There is a chart instance already initialized on the dom.的错误

问题:
在已经写好的echarts上面改动数据，回到页面发现，整个echarts 都没了！

控制台报： There is a chart instance already initialized on the dom.

大概意思就是 dom上已经初始化了一个图表实例。
然后我也上网搜索的一些答案，基本都是一个人解决，是个人传。

	大家看如下网上方法
	
echarts.dispose(document.getElementById('chart3'))

if (rateChart != null && rateChart != "" && rateChart != undefined) {
        rateChart.dispose();//销毁
 }

几乎都是在init 初始化之前销毁它，这样就可以了，不知道你们成功了没有，反正我是没有成功。

那么真正解决的办法就是，在mounted 生命周期里面再次调用你那获取数据的方法就行了。

大家可以参考下我的代码片段。

<template>
    <div class="index-pay4" id="index14">
    </div>
</template>

<script>
export default {
  name: 'PortSucc',
  data() {
    return {
      totNumList: [],
      rateList: [],
      succesList: [],

      listAll:{}
    }
  },
  props:['portSucc1'],
  created() {
  },
  watch:{
    portSucc1:{
      handler(a,b) {
        if (JSON.stringify(a) !== '{}') {
          this.listAll = Object.assign({}, a)
          this.lists()
        }
      },
      immediate: true,
      deep: true
    }
  },

  mounted() {
     this.lists() // [再次调用 就可以了,就这简单的一句话!!!]
  },
  methods: {
    lists() {
          this.rateList = this.listAll.rateList
          this.succesList = this.listAll.succesList
          this.totNumList = this.listAll.totNumList
          this.echartsList()
    },
    echartsList() {
        const myEcharts = this.$echarts.init(document.getElementById('index14'))
        const options = {
            title: {
              text: '接口调用成功率',
              textStyle: {
                color: '#fff'
              },
              subtextStyle: {
                color: 'blue'
              },
              padding: [15, 0, 0, 10]
            },
            legend: {
              data: ['百分比', '总和', '数量'],
              show: false
            },
            xAxis: {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18','19','20', '21', '22','23','24'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: '.5'
                }
              },
              axisTick: {// x轴刻度线
                show: false
              },
              splitLine: { show: false }, // 隐藏网格
            },
            yAxis: {
              type: 'value',
              axisTick: {// x轴刻度线
                show: false
              },
              axisLabel: {
                formatter: '{value}%'
              },
              splitLine: { show: false }, // 隐藏网格
              axisLine: {
                // show: false,
                lineStyle: {
                  color: '#fff',
                  width: '0.5'
                }
              },
            },
            series: [
              {
                name: '百分比',
                type: 'line',
                data: this.rateList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              {
                name: '成功数',
                type: 'line',
                data: this.succesList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              {
                name: '总数',
                type: 'line',
                data: this.totNumList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              // smooth: true
            ],
            // 鼠标移动上面 显示数据
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            }
          }
        myEcharts.setOption(options)
    }
  }
}
</script>

<style scoped lang="scss">
  .index-pay4 {
    width: 100%;
    height: 300px;
    /*border: 1px solid #000;*/
    box-sizing: border-box;
  }
</style>