echarts饼图封装

效果图

vue封装echarts饼图

<template>
<!--为echarts准备一个具备大小的容器dom-->
<div class="pie" :id="pie"  :style="{height:'100%',width:'100%'}" />
</template>
<script>
// 自行导入echarts
import echarts from 'echarts'

export default {
  name: 'pie',
  props: ['id', 'getData'],   // 满足一个页面有多个饼图，建议传入不同id
  data () {
    return {
      pie: this.id || 'pie',
      charts: ''
    }
  },
  // 实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图
  watch: {
    getData: {
      handler (value) {
        this.drawPie(value)
      },
      deep: true
    }
  },
  mounted () {
    this.drawPie()
  },
  methods: {
    drawPie ({
      opinion = [],
      nameTitle = '',
      opinionData = [],
      colorArray = []
    } = {}) {
      this.charts = echarts.init(document.getElementById(this.pie))
      this.charts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'pin',        // 指示icon， 可以引入自定义图片
          bottom: 10,      
          left: 'center',
          itemWidth: 16,   // 指示icon大小
          itemHeight: 6,
          data: opinion
        },
        series: [
          {
            name: nameTitle,
            type: 'pie',
            radius: ['50%', '70%'], // 饼图空心
            center: ['50%', '40%'],  // 饼图占整个容器的大小
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'blod'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: opinionData,
            itemStyle: {
              normal: {
                borderWidth: 5,           // 每一个类型之间空隙
                borderColor: '#fff',
                color: function (params) {
                  const colorList = colorArray
                  return colorArray.length > 0 ? colorList[params.dataIndex] : '#EA8187'
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

使用

<template>
    <!--性别分析 -->
      <div>
       <--宽度，高度-->
        <pie :get-data="objectData" id="agesId" style="height: 250px"></pie>
      </div>
</template>
<script>
export default {
   data ()  {
	   return {
	       objectData: {
		        opinion: ['男', '女', '未知'],
		        nameTitle: '性别',
		        opinionData: [27, 16, 1],
		        colorArray: ['#38A1F7', '#59CECE', '#5ECE7D']
     		 }
	  	 }
     }
</script>