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

网站开发需求分析主要内容eclipse 网站开发教程

wzjs 2025/9/2 1:17:22

网站开发需求分析主要内容,eclipse 网站开发教程,无锡工程建设中心网站,太原网站建设方案策划基于仪表盘类型的自定义表盘上图为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>