效果图
代码：
<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>