vue组件实现：

<template><div class="ringWrap" :style="{transform:`scale(${scale})`}"><!-- 圆环 --><div :id="chartId" :style="{width:'220px',height:'220px',transform:`scale(${scale})`}"></div><!-- 标题 --><div class="title">{{title}}</div></div>
</template><script>import * as echarts from "echarts";export default {name: "ring", //进度圆环，配置背景标题props: {chartId: {type: String,default: 'ring'},title: {type: String,default: '对外依存度'},value: {type: [String, Number],default: 80},scale: {type: [String, Number],default: 1}},data() {return {};},watch: {value(newValue, oldValue) {this.initChart();}},mounted() {this.initChart();},methods: {initChart() {// 基于准备好的dom，初始化echarts实例let chartDom = document.getElementById(this.chartId);let myChart = echarts.init(chartDom);const option = this.getChartOption();option && myChart.setOption(option);},getChartOption() {const option = {series: [{type: 'gauge',startAngle: 90,endAngle: -270,pointer: {show: false},itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#66FFFF' // 0% 处的颜色}, {offset: 0.5,color: '#7BFFB5' // 50% 处的颜色}, {offset: 1,color: '#3AB9FE' // 100% 处的颜色}],global: false // 默认为 false}},progress: {show: true,overlap: false,roundCap: true,clip: false,borderWidth: 2,// borderColor: '#f00'borderColor: '#1E4C7A'},axisLine: {lineStyle: {width: 12,color: [[1, '#1E4C7A']]}},splitLine: {show: false,// distance: 0,// length: 10},axisTick: {show: false},axisLabel: {show: false,// distance: 50},data: [{value: this.value}],detail: {valueAnimation: true,fontSize: 34,fontFamily: 'pangmen',formatter: '{value}%',offsetCenter: ['0%', '0%'], // 确保值在中心位置// color: 'rgba(255, 255, 255, 0.7)',// 渐变色从左上角到右下角color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 处的颜色},{offset: 1,color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false},color: '#fff',}}]};return option;},},};
</script><style scoped lang="scss">.ringWrap {margin: 8px auto 0;width: 274px;height: 274px;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;&:before {position: absolute;display: block;content: "";margin: auto;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;background: url("~@/assets/images/home/bg-ring@2x.png") no-repeat center/cover;animation: clockwise 4s linear infinite;}.title {font-family: pangmen;font-size: 24px;color: #D5F2FF;line-height: 27px;letter-spacing: 2px;text-shadow: 0px 0px 6px #158EFF;position: absolute;bottom: 0;}}
</style>

实现效果如下：
[外链图片转存中…(img-sUCIfg7d-1719665465323)]