看完才发现饼图插入图片so easy!

一、此案例基于Vue3+ts，效果展示：

二、单个属性的值:

series.radius：[ ' 百分比 ' , ' 百分比 ' ]

第一个值设置内圈的大小，第二个值设备外圈的大小

两个值配合可以设置圆圈的粗细

series.center：[ ' 百分比 ' , ' 百分比 ' ]

第一个值调整水平位置，第二个值调整垂直位置

graphic 饼图中间插入图片

  elements: [

        {

          type: 'image',

          style: {

            image: 'base64格式的图片',

           // 设置图片大小

            width: 50,

            height: 50,

          },

          // 调整位置

          left: '39.5%',

          top: '46.5%',

        },

      ],

图片转base64在线工具：

图片转 BASE64 编码 | 菜鸟工具

三、完整代码如下：

<script setup lang="ts" name="highTemperature-pie">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
 
const echartsRef = ref();
let myChart: any = null; // echarts实例对象
 
onMounted(() => {
	initCharts();
});
 
// 变化尺寸
const onResize = (resize: any) => {
	console.log('resize: ', resize);
	myChart && myChart.resize();
};
window.addEventListener('resize', onResize);
 
const initCharts = () => {
	const eChartsData = [
		{
			name: '正常',
			value: 87,
		},
		{
			name: '异常',
			value: 13,
		},
	];
	// 中间图片必须是base64格式
	const giftImageUrl =
		'data:image/png;base64,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';
	let option = {
		color: ['#FFF500', '#00FFFF'],
		// 中间图片
		graphic: {
			elements: [
				{
					type: 'image',
					style: {
						image: giftImageUrl,
						width: 50,
						height: 50,
					},
					left: '39.5%',
					top: '46.5%',
				},
			],
		},
		tooltip: {
			show: false,
		},
		legend: {
			icon: 'rect',
			itemWidth: 12, // 图例标记的图形宽度。[ default: 25 ]
			itemHeight: 12, // 图例标记的图形高度。[ default: 14 ]
			// itemGap: 5, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
			textStyle: {
				fontSize: 14,
				color: '#D3D3D3',
			},
			formatter(name: any) {
				let res = eChartsData.filter((v) => v.name === name);
				return res[0].name + ' : ' + res[0].value + '%';
			},
		},
		series: [
			{
				type: 'pie',
				name: '内层细圆环1',
				radius: ['38%', '38%'], // 调整圆的大小
				center: ['50%', '60%'], // 调整圆的位置
				hoverAnimation: false,
				clockWise: false,
				itemStyle: {
					normal: {
						borderColor: '#284c5a',
						borderWidth: 3,
					},
				},
				label: {
					show: false,
				},
				data: [100],
			},
			{
				type: 'pie',
				name: '最外层细圆环',
				hoverAnimation: false,
				clockWise: false,
				radius: ['75%', '75%'],
				center: ['50%', '60%'],
				itemStyle: {
					normal: {
						borderColor: 'rgba(50, 74, 91, 1)',
						borderWidth: 3,
					},
				},
				label: {
					show: false,
				},
				data: [100],
			},
			{
				name: '饼图内容区',
				type: 'pie',
				clockWise: false,
				radius: ['50%', '65%'],
				center: ['50%', '60%'],
				data: eChartsData,
				label: {
					show: false,
				},
				itemStyle: {
					borderWidth: 5,
					borderColor: '#0e1e27',
				},
			},
		],
	};
 
	myChart = echarts.init(echartsRef.value as HTMLDivElement);
	myChart.setOption(option, true);
};
script>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
}
style>