【echarts水球图】动态展示百分比数值

效果图：

使用技术：echarts5.2.0+echarts-liquidfill3.1.0(必需)

注：echarts5必须liquidfill3以上；liquidfill2使用echarts4

使用：

<template><div id="circleChart1" style="width: 80%; height: 100px;"/></template>

<script setup lang="ts">
import {createChartOptions} from './CircleChart';
import * as echarts from 'echarts';

const fillPercentage = ref<number>(0.66);
onMounted(() => {
	const circleChart1 = echarts.init(document.getElementById("circleChart1") as HTMLDivElement);
	circleChart1.setOption(createChartOptions(fillPercentage.value));
})
</script>

ts部分：

import 'echarts-liquidfill';

type ItemStyle = {
	normal: {
		color: string;
		borderWidth: number;
		borderColor: string;
	};
};

type DataItem = {
	name: string;
	value: number;
	itemStyle: ItemStyle;
};

function Pie(): DataItem[] {
	const dataArr: DataItem[] = [];
	for (let i = 0; i < 150; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 50,
				itemStyle: {
					normal: {
						color: "red",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)",
					},
				},
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 100,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)",
					},
				},
			});
		}
	}
	return dataArr;
}

function createChartOptions(fillPercentage:number) {
	return {
		backgroundColor: 'transparent', // 画布背景色
		series: [
			{
				type: 'liquidFill',
				radius: '85%',
				center: ['50%', '50%'],
				data: [
					fillPercentage,
					{
						value: fillPercentage,
						direction: 'left',
					},
				],
				backgroundStyle: {
					borderWidth: 1,
					color: 'rgb(255,255,255,0.2)',
				},
				amplitude: '6%',
				color: [
					{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 1,
								color: '#FFB200',
							},
							{
								offset: 0,
								color: '#FF8A83',
							},
						],
						globalCoord: false,
					},
				],
				label: {
					normal: {
						formatter: `${fillPercentage * 100}{d|%}`,
						rich: {
							d: {
								fontSize: 20,
							},
						},
						textStyle: {
							fontSize: 18,
							color: '#FFFFFF',
						},
					},
				},
				outline: {
					show: false,
				},
			},


			{
				type: 'pie',
				z: 1,
				zlevel: -2,
				radius: ['97%', '100%'],
				center: ['50%', '50%'],
				hoverAnimation: false,
				clockWise: false,
				itemStyle: {
					normal: {
						borderWidth: 1,
						color: 'rgb(255,255,255,0.2)',
					},
				},
				label: {
					show: false,
				},
				data: [100],
			},

		],
	};
}

export {Pie, createChartOptions};