[JavaScript知识库]Vue页面多次渲染echarts封装的组件但只出现一个（原因分析，多方案解决，最后附上源码）

前言

最近写项目，写到可视化的部分，有一个水球图的部分我已经封装好了，但是需要在页面多次渲染的时候只能渲染一个水球图，这篇记录一下解决的办法：
对于在页面多次使用封装好的echarts组件均可适用

原因分析

首先我们要知道echart实例的创建方式
通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形

<div id="liquidFill" style="width:100%; height: 300px;"></div>

var myChart = echarts.init(document.getElementById("liquidFill"))

解决方案

上面已经得出了 因为id相同导致渲染不出来的 原因，所以经过验证有目前我想出了两个方案：

1.切换为ref获取元素

dom只有一个id，所以会出现覆盖的情况。我们需要把id改为通过ref获取到组件

<div ref="echarts" style="width:300px; height: 300px;"></div>
var myChart = echarts.init(this.$refs.echarts)

使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。

2.给组件绑定动态id

因为两个相同的id所以会覆盖，故我们设置不同的id即可。
关于id的设置，我们可以使用父组件传过来的不同的值，也可以写个不重复的随机数进行赋值，主要是能保证两个组件id不同就行

<div :id="this.num" style="width:300px; height: 300px;"></div>
var myChart = echarts.init(document.getElementById(this.num))

这两种方法都能到达我们多次渲染echarts组件的目的，如图：

如果还有别的解决办法欢迎留言讨论~

最后这个水球图附上源码

<template>
  <div class="liquid">
    <el-card>
      <div ref="echarts" style="width:300px; height: 300px;"></div>
    </el-card>
  </div>
</template>

<script>
import 'echarts-liquidfill'
import * as echarts from "echarts";
export default {
  props:['msg'],
  data() {
    return {
      serverInfo: [],
      num:this.msg,
      idnum: '',
      option:{
        title:{
          text: '内存占用率'
        },
        tooltip: {
          show: true,
        },
        series: [{
          type: 'liquidFill',
          data: [],
          outline: {
            show: false
          },
          label: {
            fontSize: 32,
            color: '#43b3ef',
            insideColor: '#ffffff'
          },
        }]
      }
    }
  },
  created() {
  },
  watch:{
    msg(val){
      this.num = val
      this.initchart()
    },
  },
  methods: {
    initchart(){
      console.log(this.num)
      let myChart = echarts.getInstanceByDom(this.$refs.echarts);
      if(myChart == null) {
        myChart = echarts.init(this.$refs.echarts)
      }
      myChart.hideLoading();
      
      this.option.series[0].data.shift()
      this.option.series[0].data.push(this.num)
      myChart.setOption(this.option,true);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      
      
    }
  },
  mounted() {
    let myChart = echarts.init(this.$refs.echarts)
    myChart.showLoading();
    
  }
}
</script>

<style lang="scss" scoped>

</style>