当前位置：首页 > news >正文

echarts自定义图表--仪表盘

news 来源：原创 2025/4/29 7:27:04

在这里插入图片描述
基于仪表盘类型的自定义表盘

上图为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>