效果圖：

• 安裝??

pnpm i echarts

• 公共模塊組件

    <divclass="pie"ref="percent"style="width: 100%; height: calc(100% - 48px)"></div>

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const props = defineProps<{titlecolor: any // 中間百分比數字文字的顏色value: any // 值百分之多少valuesize: any // 值的大小color: any //  圓環顏色數組 漸變
}>()
let percent = ref<any>('')// ---------------------------------
const Pie = () => {let dataArr = []for (var i = 0; i < 100; i++) {if (i % 10 === 0) {dataArr.push({name: (i + 1).toString(),value: 40,itemStyle: {// 外圈的點點顏色normal: {color: props.color[1],borderWidth: 0,// borderColor: '#00ff00'},},})} 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
}const Pie1 = () => {let dataArr = []for (var i = 0; i < 100; i++) {if (i % 5 === 0) {dataArr.push({name: (i + 1).toString(),value: 20,itemStyle: {normal: {color: props.color[1],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
}const Pie2 = () => {let dataArr = []for (var i = 0; i < 100; i++) {if (i % 5 === 0) {dataArr.push({name: (i + 1).toString(),value: 20,itemStyle: {normal: {color: props.color[1],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
}const Pie3 = () => {let dataArr = []for (var i = 0; i < 100; i++) {if (i % 10 === 0) {dataArr.push({name: (i + 1).toString(),value: 30,itemStyle: {normal: {color: props.color[1],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
}// ---------------------------------const markChart = () => {// 初始化let Mychart = echarts.init(percent.value)// 配置項// 帶分割線的圓環配置 start ------------------------------var labelData: any = []var labelData1: any = []for (var i = 0; i < 150; ++i) {labelData.push({value: 1,name: i,itemStyle: {normal: {color: '#696969',},},})}for (var i = 0; i < labelData.length; ++i) {if (labelData[i].name < 50) {labelData[i].itemStyle = {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: props.color[0],},{offset: 1,color: props.color[0],},]),},}}}// ------------------------------let option = {// -- start 中間 百分比值樣式屬性title: [{text: props.value + '%', //動態傳遞x: '50%',y: '45%',textAlign: 'center',textStyle: {fontSize: props.valuesize,fontWeight: '700',color: props.titlecolor,textAlign: 'center',},},],//  -- endpolar: {center: ['50%', '50%'], //極坐標系的中心(圓心)坐標radius: ['75%', '85%'], // 極坐標系的半徑，第一個為 內半徑，第二個外半徑標識可視區域},angleAxis: {// 角度軸max: 100, // 設置角度軸刻度的最大值show: false, // 是否顯示startAngle: 0, // 設置角度軸起始刻度的角度 默認90度 即圓心正上方；0度為圓心的正右方},radiusAxis: {//徑向軸type: 'category', // 類型：類目軸 必須通過data設置類目數據show: true,},series: [{name: '',type: 'bar',roundCap: true, // 是否在環形柱條兩端顯示成圓形barWidth: 40, //最外圈圓環寬度showBackground: true, // 是否顯示環形柱條背景色backgroundStyle: {color: '#464451', // 環形柱條背景顏色},data: [props.value],coordinateSystem: 'polar', // 使用坐標系類型：[cartesian2d - 二維直角坐標系] [polar - 極坐標系]itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0.6,color: props.color[1],},{offset: 1,color: props.color[2],},]),},},},{hoverAnimation: false,type: 'pie',z: 2,data: labelData,radius: ['52%', '59%'],zlevel: -2,itemStyle: {normal: {borderColor: '#1f1e26',borderWidth: 4,},},label: {normal: {position: 'inside',show: false,},},},{hoverAnimation: false,type: 'pie',z: 1,data: labelData1,radius: ['52%', '59%'],zlevel: -2,itemStyle: {normal: {borderColor: '#1f1e26',borderWidth: 4,},},label: {normal: {position: 'inside',show: false,},},},{type: 'pie',radius: ['42%', '45%'],center: ['50%', '50%'],data: [{hoverOffset: 1,value: props.value, //最內圈圓環name: '',itemStyle: {color: props.color[1],},label: {show: false,},labelLine: {normal: {smooth: true,lineStyle: {width: 10,},},},hoverAnimation: false,},{label: {show: false,},labelLine: {normal: {smooth: true,lineStyle: {width: 0,},},},value: 100 - props.value, //動態傳遞hoverAnimation: false,itemStyle: {color: '#3c3a48',},},],},{type: 'pie',zlevel: 0,silent: true,radius: ['67%', '65.5%'],z: 1,label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: Pie(),},{type: 'pie',zlevel: 0,silent: true,startAngle: -150,radius: ['65%', '63.5%'],z: 1,label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: Pie3(),},{type: 'pie',zlevel: 0,silent: true,startAngle: -140,radius: ['68%', '66.5%'],z: 1,label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: Pie(),},{type: 'pie',zlevel: 0,silent: true,radius: ['61%', '60%'],z: 1,label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: Pie1(),},{type: 'pie',zlevel: 0,silent: true,startAngle: -140,radius: ['61%', '60%'],z: 1,label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: Pie2(),},{type: 'pie',zlevel: 0,silent: true,startAngle: -147.5,radius: ['61%', '60%'],z: 1,label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: Pie2(),},],}// ------------------------------// 生成圖表Mychart.setOption(option)window.onresize = function () {Mychart.resize()}
}
// -------------------------------
onMounted(() => {setTimeout(() => {markChart()}, 8)
})