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

ssh jsp做网站免费sem工具

wzjs 2025/8/21 7:14:31

ssh jsp做网站,免费sem工具,网站建设佛山市,设计制作ppt时基于仪表盘类型的自定义表盘上图为3层结构组成正常一个仪表盘配置要在外圈和内圈之间制造一条缝隙间隔再创建一个仪表盘配置背景透明进度条拉满进度条颜色和数据的背景相同开始处的线又一个仪表盘配置数值固定一个比较小的值 <!DOCTYPE html> <html><h…

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

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