ecahrts餅狀圖vue封裝

效果圖如下：

新建一個pie.vue文件

<template>
  <div class="common-wrapper">
    <div class="common-wrapper" id="pie"></div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    m2R2Data: {
      type: Array
    }
  },
  data () {
    return {
    }
  },

  components: {},

  computed: {},

  beforeMount () {},

  mounted () {
    this.drawPie()
  },

  methods: {
    drawPie () {
      let myChart = this.$echarts.init(document.getElementById('pie'))
      let _that = this
      let _totalNum = this.getTotal(this.m2R2Data)
      myChart.setOption({
        backgroundColor: '#fff',
        title: [
          {
            text: _totalNum,
            subtext: '總數',
            textStyle: {
              fontSize: 28,
              color: '#666666'
            },
            subtextStyle: {
              fontSize: 16,
              color: '#666666'
            },
            textAlign: 'center',
            x: '34.5%',
            y: '44%'
          }],
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            var str = parms.seriesName + '</br>' +
                    parms.marker + '' + parms.data.name + '</br>' + '數量：' + parms.data.value + '</br>' + '佔比：' + parms.percent + '%'
            return str
          }
        },
        legend: {
          type: 'scroll',
          icon: 'circle',
          orient: 'vertical',
          left: '70%',
          align: 'left',
          top: 'middle',
          textStyle: {
            color: '#8C8C8C'
          },
          height: 250,
          formatter: function (name) {
	        	let oa = _that.m2R2Data
	        	// let num = oa[0].value
	        	for (var i = 0; i < _that.m2R2Data.length; i++) {
              if (name == oa[i].name) {
                return name + '     ' + oa[i].value + '     ' + (oa[i].value / _totalNum * 100).toFixed(1) + '%'
              }
	        	}
	        }
        },
        series: [
          {
            name: '標題',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['70%', '85%'],
            clockwise: false, // 餅圖的扇區是否是順時針排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            data: this.m2R2Data
          }
        ]
      })
    },
    getTotal (val) {
      let totalNum = 0
      for (let i = 0; i < val.length; i++) {
        totalNum = totalNum + val[i].value
      }
      return totalNum
    }
  },

  watch: {}

}

</script>
<style lang='' scoped>

</style>

在父組件引入

import pie from '@/components/echarts/pie.vue'

別忘記在父組件components中加入pie

在父組件需要引入的地方寫下：

<pie :m2R2Data=ecahrtsData></pie>

最後數據格式

ecahrtsData: [

{ value: 10, name: '在線', itemStyle: { color: '#36d996' } },

{ value: 10, name: '離線', itemStyle: { color: '#fcd800' } }

],