基于仪表盘类型的自定义表盘
上图为3层结构组成
- 正常一个仪表盘配置
- 要在外圈和内圈之间制造一条缝隙间隔 再创建一个仪表盘配置 背景透明 进度条拉满 进度条颜色和数据的背景相同
- 开始处的线 又一个仪表盘配置 数值固定一个比较小的值
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script src="https://cdn.jsdelivr.net/npm/echarts@5"></script><style>#main {width: 200px;height: 200px;margin: 100px auto;}</style><style>/* 在 CSS 文件中定义自定义字体 */@font-face {font-family: "MyCustomFont"; /* 自定义字体名称 */src: url("public/只含数字.ttf");font-weight: normal;font-style: normal;}</style></head><body><div id="main"></div><script>var chart = echarts.init(document.getElementById("main"));const bgColor = "#1F1316";chart.setOption({backgroundColor: "black",series: [{type: "gauge",startAngle: 0,endAngle: 360,itemStyle: {// shadowColor: "#fff",// shadowBlur: 10,},progress: {show: true,width: 8,// roundCap: true,overlap: true,itemStyle: {// borderColor: "#fff",// borderWidth: 1,// opacity: 1,// borderType: [5, 10],// borderDashOffset: 5,color: {type: "linear",x: 0,y: 0,x2: 1,y2: 1,colorStops: [{ offset: 0, color: "#f20075" }, // 渐变起始色{ offset: 1, color: "#ff6666" }, // 渐变结束色],},// shadowColor: "#f20075",// shadowBlur: 10,},},axisLine: {lineStyle: {width: 10,// color: [[1, "#1F1016"]], // 背景圆环color: [[1, bgColor]], // 背景圆环},},pointer: {show: false,},axisTick: {show: false,},splitLine: {show: false,},axisLabel: {show: false,},detail: {valueAnimation: true,formatter: "{value}\n%",fontSize: 24,fontFamily: "MyCustomFont",color: "#fff",textShadowColor: "#CB3359",textShadowBlur: 10,textBorderColor: "#CB3359",textBorderWidth: 1,offsetCenter: [0, "0%"],},data: [{value: 49,},],z: 1,},// 紧贴外圈与背景同色 利用遮蔽下层颜色产生间隔效果{type: "gauge",startAngle: 0,endAngle: 360,itemStyle: {color: "",},progress: {show: true,width: 2,itemStyle: {color: bgColor,},},pointer: {show: false,},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: false,},axisLabel: {show: false,},detail: {show: false,},data: [{value: 100,},],z: 2,},// 开始处齐点{type: "gauge",startAngle: 0,endAngle: 360,itemStyle: {color: "",},progress: {show: true,width: 10,itemStyle: {// borderColor: "#fffae5",// borderWidth: 1,// borderType: [5, 10],// borderDashOffset: 5,color: "#fffae5",shadowColor: "#fff",shadowBlur: 5,},},pointer: {show: false,},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: false,},axisLabel: {show: false,},detail: {show: false,},data: [{value: 0.5,},],z: 3,},],});</script></body>
</html>
