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>

 

 根據以上，你就可以只使用一個組件，獲得多個餅圖了。效果即為如圖