これを読んだ後、円グラフに画像を挿入するのはとても簡単であることがわかりました。

1. このケースは Vue3+ts に基づいており、効果が表示されます。

2. 単一の属性の値:

series.radius: [ ' パーセント ' , ' パーセント ' ]

最初の値はデバイスの内側の円のサイズを設定し、2 番目の値は外側の円のサイズを設定します。

2 つの値を組み合わせると円の太さを設定できます

シリーズ.センター: [ ' パーセント ' 、 ' パーセント ' ]

最初の値は水平位置を調整し、2 番目の値は垂直位置を調整します

グラフィック 円グラフの中央に画像を挿入します

  要素: [

        {

          タイプ: '画像',

          スタイル: {

            画像: 「base64 形式の画像」、

           //画像サイズを設定

            幅: 50、

            身長: 50、

          }、

          // 位置を調整する

          左: '39.5%'、

          トップ: '46.5%'、

        }、

      ]、

画像を Base64 に変換するオンライン ツール:

画像から BASE64 エンコード | 新人ツール

3. 完全なコードは次のとおりです。

<template>
	<div class="container" ref="echartsRef" @resize="onResize"></div>
</template>
<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>

おすすめ

転載: blog.csdn.net/weixin_48082900/article/details/134026848