vue+echarts 環狀圖

 父頁面引用

 <RingGraph class="margin-t50" :getData="EquipmentQuantityAnalysis" title="教學設備種類佔比" />

 data

 EquipmentQuantityAnalysis: [
        { value: 105, name: "電子黑板" },
        { value: 82, name: "電子班牌" },
        { value: 66, name: "會議一體機" },
        { value: 50, name: "教學一體機" }
      ],

封裝 

<template>
  <div class="kanBan-box position-r">
    <div class="kanBan-title">{{title}}</div>
    <div class="kanBan-content-box">
      <div id="RingGraph" :style="{width:width,height:'100%'}" />
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { mapGetters } from "vuex";
require("echarts/lib/chart/bar");
export default {
  data() {
    //  餅狀圖
    name: "RingGraph";
    return {
      chart: null
    };
  },
  computed: {
    ...mapGetters(["screenWidth"])
  },
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    getData: {
      type: Array,
      default: []
    },
    title: {
      type: String
    }
  },
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      setTimeout(() => {
        _this.initChart();
      }, 2000);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.clear();
    this.chart = null;
  },
  methods: {
    initChart() {
      let _this = this;
      this.chart = echarts.init(document.getElementById("RingGraph"));

      // console.log(_this.title)
      this.chart.setOption({
        title: {
          show: false
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["直接訪問", "郵件營銷", "聯盟廣告", "視頻廣告", "搜索引擎"]
        // },

        series: [
          {
            name: "面積模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "area",
            data: _this.getData
          }
        ],
        color: [
          "rgb(1,209,253)",
          "rgb(5,127,241)",
          "rgb(1,253,149)",
          "rgb(246,0,208)"
        ]
      });
    }
  },
  watch: {
    screenWidth: function(el) {
      let _this = this;
      if (_this.chart) {
        _this.chart.dispose();
      }

      setTimeout(() => {
        _this.initChart();
      }, 2000);
    }
  }
};
</script>
<style scoped>
</style>

效果圖