vue中同一个页面多次使用同一个echarts中饼图或者柱状图组件的导致不渲染的问题...

在做后台管理的时候，很多时候会用到数据展示，一般有饼状图，柱状图，折线图以及雷达图等(我列举的是较为常用的)

那么有时候也会出现同一个页面里会有不止一个饼图或者柱状图，这个时候，写两个组件吧，太麻烦，而且内容一模一样，也失去了写组件最初的意义。

但是一个组件调用两次，你渲染的时候会发现，他只会渲染一次，就是说另一个柱状图的位置是空白，emmmmmmmmm，这可怎么解决呢？

当然是有办法的啦，

首先我们要了解echarts是根据什么来初始化的 $echarts.init(document.querySelector(`#henan`)), 没错，他是根据id来渲染的，当你一个组件调用两次的时候，id是只有一个的，当渲染的时候，发现id已经被渲染过了，当然就不会渲染第二个相同的id了。

所以这时候，当id不同的时候，相同的柱状图，你想要几个就可以渲染几个。

下面我来详细讲解：

<v-row style="padding:10px;">
      <v-col :cols="6">
        <Time></Time> ----这是我调用的其他组件，与重复组件无关
      </v-col>
      <v-col :cols="2">
        <radar></radar> ----这是我调用的其他组件，与重复组件无关
　　　</v-col>
　　 <v-col :cols="2"> 
　　　　<annular id='channel' title='报名渠道分布' :bar='channelBar' :data='channelData'></annular> 
　　 </v-col>
    <v-col :cols="2">
      <annular id='group' title='报名组别-队伍分布' :bar='groupBar' :data='groupData'></annular> 
   </v-col>
</v-row>

id：我传递到子组件中的id

title：饼图的title

bar:你的数据项

data：数据

 channelData:[123,212,44,78,221],//渠道
 groupData:[52],//组别
 channelBar:['微信公众号','微信小程序','网站','线下','其他'],
 groupBar:['广场舞大赛']

下面我贴上饼图的全部代码

<template>
  <div class="annularChart" :id="id"></div>
</template>
<script>
export default {
  props: ["id", "title", "bar", "data"],
  data() {
    return {
      arr: []
    };
  },
  methods: {
    getAnnular() {
      let charts = this.$echarts.init(document.querySelector(`#${this.id}`));
      charts.setOption({
        title: {
          text: this.title,
          y: "bottom",
          x: "center",
          textStyle: {
            //标题内容的样式
            color: "#333",
            fontStyle: "normal",
            fontWeight: "lighter",
            fontSize: 14
          }
        },
        color: ["#FF6384", "#36A2EB", "#FF9F40", "#4BC0C0", "#FFCD56"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: this.bar
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["60%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: this.arr
          }
        ]
      });
      window.addEventListener("resize", function() {
        charts.resize();
      });
    }
  },
  mounted() {
    this.getAnnular();
  },
  created() {
data和bar在这里循环，生成渲染所需要的对象
    this.bar.forEach((val, i) => {
      this.data.forEach((item, index) => {
        if (i == index) {
          this.arr.push({
            value: item,
            name: val
          });
        }
      });
    });
  }
};
</script>
<style scoped>
.annularChart {
  height: 275px;
  background-color: #fff;
}
</style>

 根据以上，你就可以只使用一个组件，获得多个饼图了。效果即为如图