关于vue.js:自定义pie外圈及内部icon等

效果图

代码：

<template>
  <div class="emergency-pie" :class="domClass"></div>
</template>
<script>
export default {
  props: {
    domClass: {
      type: String,
      default: 'emergency-pie'
    }
  },
  mounted () {this.init()
  },
  methods: {init () {var uploadedDataURL = require('../../../../assets/images/manage/nei-circle.png')
      var uploadedDataURL2 = require('../../../../assets/images/manage/police-waiyuan.png')
      var seriesData = [
        {
          name: '待处理事件',
          value: '400'
        },
        {
          name: '已处理事件',
          value: '70'
        }
      ]
      var colorList = ['#FEE394', '#7DF6F6']
      const option = {
        grad: {left: '2%'},
        title: {
          text: '应急指挥',
          x: '43.5%',
          y: '55%',
          textStyle: {
            fontSize: 14,
            color: '#7DF6F6'
          }
        },
        tooltip: {
          trigger: 'item',
          borderColor: 'rgba(255,255,255,.3)',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          padding: 5,
          textStyle: {color: 'rgba(255,255,255,1)'
          },
          formatter: function (parms) {
            var str =
              parms.marker +
              '' +
              parms.data.name +
              '</br>' +
              '数量：' +
              parms.data.value +
              '</br>' +
              '占比：' +
              parms.percent +
              '%'
            return str
          }
        },
        graphic: [
          {
            type: 'image',
            id: 'logo',
            left: '40%',
            top: '30%',
            z: -10,
            bounding: 'raw',
            rotation: 0, // 旋转
            origin: [60.5, 30.5], // 中心点
            scale: [1.0, 1.0], // 缩放
            style: {
              image: uploadedDataURL,
              width: 80,
              border: '1px solid red',
              height: 80,
              opacity: 1
            }
          },
          {
            type: 'image',
            id: 'logo2',
            left: '32%',
            top: '8%',
            z: -10,
            bounding: 'raw',
            rotation: 0, // 旋转
            origin: [60, 30], // 中心点
            scale: [1.0, 1.0], // 缩放
            style: {
              image: uploadedDataURL2,
              width: 170,
              border: '1px solid red',
              height: 170,
              opacity: 1
            }
          }
        ],
        series: [
          {
            type: 'pie',
            z: 3,
            center: ['47%', '50%'],
            radius: ['50%', '63%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {color: function (params) {return colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function (param) {if (param) {
                  return ['{a|' + param.name + '}',
                    '{b|' + param.percent + '%}'
                  ].join(' ')
                }
              },
              rich: {
                a: {color: '#7DF6F6'},
                b: {color: '#fff'}
              }
            },
            labelLine: {
              // color: '#fff',
              normal: {
                length: 20,
                length2: 20,
                lineStyle: {width: 1}
              }
            },
            data: seriesData
          }
        ]
      }
      var myChart = this.$echarts.init(document.getElementsByClassName(this.domClass)[0]
      )
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.emergency-pie {
  width: 100%;
  height: 200px;
  display: flex;
  color: #fff;
}
</style>