实现效果如图：

主要 series 中的配置：

series: [{label: {show: false},emphasis: {label: {show: true,formatter: function(params){return "{name|" + params.name +"}"+"\n"+"{unit|"+params.data.rate+"}"},textStyle: {	// 设置样式rich: {name: {fontSize: 18,// color: '#ffffff',fontWeight: 'bold',},unit: {fontSize: 14,color: '#ffffff'}}}}}}]

点击事件给与一个默认高亮，并且点击可以切换

drawCharts(){this.charts = this.$echarts.init(this.$refs.chart);const option = this.chartDataNew;this.charts.setOption(option, true);window.addEventListener("resize", this.charts.resize);this.$once("hook:beforeDestroy", () => {window.removeEventListener("resize", this.charts.resize);});// 默认选中第一项this.charts.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0 // 这里设置为0，表示默认选中第一项});let myChart = this.charts;myChart.on('mousemove', function (params) {// 根据点击的扇区更新中间文字if (params.componentType === 'series') {let newOption = myChart.getOption();// 更新 graphic 中的文字内容newOption.graphic[0].style = {text: `${params.name} - ${params.value}`,textAlign: 'center',fill: '#fff', // 文字颜色fontSize: 20};// 取消之前选中的扇形if (newOption.series[0].selectedDataIndex !== params.dataIndex) {myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: newOption.series[0].selectedDataIndex});}// 选中当前点击的扇形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex});// 更新选中的扇形索引newOption.series[0].selectedDataIndex = params.dataIndex;myChart.setOption(newOption);}});