父组件：

  <pieChartNormal :opt="contractStatics" style="width: 100%;height: 100%;" />import pieChartNormal from "./components/pieChartNormal";data() {return {contractStatics: {seriesData: [{name: '技术服务类',value: 30.5,itemStyle: {color: '#3562D4',},},{name: '监理监测类',value: 41.4,itemStyle: {color: '#2BC4CD',},},{name: '工程总承包类',value: 21.1,itemStyle: {color: '#E68B29',},}],}}
}

子组件：

<template><div style="width: 100%;height: 100%;"><ChartPanel ref="chart" :option="options" :style="opt.yAxisName ? 'height:calc(100% - 16px)' : ''"></ChartPanel></div>
</template><script>
import * as echarts from 'echarts'
import ChartPanel from '@/components/ChartPanel';
export default {components: {ChartPanel},props: {opt: {type: Object,default() {return {}}}},data() {return {options: null}},watch: {opt: {deep: true,immediate: true,handler(val) {// if (val && val.seriesData) {this.getOpt(val)// }}}},methods: {getOpt(val) {let {seriesData} = vallet color = ['#3666E0', '#26D7E0', '#F0922E']this.options = {animation: true,legend: {orient: 'vertical',show: true,x: '40%',y: 'center',itemWidth: 0,itemHeight: 0,textStyle: {color: '#595D64',fontSize: 14,lineHeight: 20,rich: {percent0: {color: color[0],fontSize: 14,fontWeight: 700},percent1: {color: color[1],fontSize: 14,fontWeight: 700},percent2: {color: color[2],fontSize: 14,fontWeight: 700},},},formatter: name => {let dataIndex = 0let obj = (seriesData.filter((item, index) => {if (item.name == name) {dataIndex = indexreturn item}}))[0]return obj.name + ' {percent'+ dataIndex +'|' + obj.value + '亿元} ' +' {percent' + dataIndex + '|30%}'},},tooltip: {borderWidth: 0,show: true,formatter: params => {if (params.seriesName != '内边线') {return `<div style="font-weight:700">${params.name}</div><div><span style="color:${params.color};font-weight:700">${params.value}亿元 ${params.percent}%</span>  </div>`}}},series: [{type: 'pie',roseType: 'area',radius: ['45%', '90%'],center: ['15%', '50%'],hoverAnimation: false,z: 10,color: color,label: {show: false,},data: seriesData,labelLine: {show: false,},},{type: "pie",name: '内边线',center: ["15%", "50%"],radius: ["89%", "90%"],label: {show: false},hoverAnimation: false,data: [{value: 1,itemStyle: {normal: {color: 'rgba(242, 244, 247, 1)'}}}]},],};this.$nextTick(() => {this.$refs.chart.initChart(echarts, chart => {// chart.setOption(this.options)this.options && chart.setOption(this.options, true);});})}}
}
</script>