在页面引用同一个组件，相互影响的问题

 

只有第一个图可以显示，下面的图都不能显示出来，操作任何一个第一个图都会跟着变化。

echarts.init有问题，如果用了class或者id选择器选择元素来init了

错误示范：

<template>
  <div class="liquid-fill-water">
    <div
      class="liquid-fill-health"
      id="liquid-fill-health"
      ref="chartsliquid"
      :style="{ width: width, height: height }"
    ></div>
  </div>
</template>
<script>
import EchartsLiquidfill from "echarts-liquidfill";
import * as echarts from "echarts";

export default{

 mounted(){
      this.chart = this.$echarts.init( document.getElementById("liquid-fill-health") );
      this.chart.setOption(this.options);
}

</script>

正确解：使用ref进行实例化

<template>
  <div class="liquid-fill-water">
    <div
      class="liquid-fill-health"
      id="liquid-fill-health"
      ref="chartsliquid"
      :style="{ width: width, height: height }"
    ></div>
  </div>
</template>
<script>
import EchartsLiquidfill from "echarts-liquidfill";
import * as echarts from "echarts";

export default{

 mounted(){
      this.chart = echarts.init(this.$refs.chartsliquid);//使用ref进行实例化
}

</script>

最终3个图正常显示。