效果图:
使用技术: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};