echarts进度仪表盘形式

server/2024/12/29 7:10:00/

 

const pointerData = 55; // 仪表指针数据const steps = 10; // 总共10个步骤
const borderColor = {colorStops: [{offset: 0,color: 'rgba(208, 244, 255, 1)'}, {offset: 1,color: 'rgba(35, 190, 240, 1)'}]
}; // 边框颜色// 使用数组和循环动态生成颜色数组
const axisLinecolor = Array.from({ length: steps + 1 }, (_, index) => {const ratio = index / steps;const colorValue = ratio <= (pointerData / 100) ? borderColor : 'transparent';return [ratio, colorValue];
});console.log("axisLinecolor", axisLinecolor)var option = {backgroundColor: "#041F34",title: [{text: pointerData + '%',x: 'center',top: '40%',textStyle: {color: '#43E7FF',fontSize: 56,fontWeight: '600',},},],series: [{name: "",type: 'gauge',splitNumber: 8, //刻度数量min: 0,max: 100,radius: 210, //图表尺寸// center: ['50%', '60%'],zlevel: 12,axisLine: {show: true,lineStyle: {width: 0,shadowBlur: 0,color: [[1, '#cccccccc']]}},axisTick: {show: true,lineStyle: {color: 'auto',width: 10},length: 28,splitNumber: 5},splitLine: {show: true,length: 22,lineStyle: {color: 'auto',}},axisLabel: {show: false},pointer: { //仪表盘指针show: 0,},detail: {show: 0,},// data: [//    {//       name: "PM2.5",//       title: {//          // 配置“家居总数”的样式//          show: true,//          fontSize: 28,//          fontWeight: 700,//          // fontFamily: fontFamily.fontFamily65W,//          color: "rgba(128,255,255,1)",//          offsetCenter: ["0", "70%"],//       },//    },// ],},{name: '统计',type: 'gauge',splitNumber: 8, //刻度数量min: 0,max: 100,radius: 210, //图表尺寸// center: ['50%', '60%'],zlevel: 21,axisLine: {show: true,lineStyle: {width: 0,shadowBlur: 0,shadowColor: '#0093ee', //默认透明color: axisLinecolor,}},axisTick: {show: true,lineStyle: {color: 'auto',width: 10},length: 28,splitNumber: 5},splitLine: {show: true,length: 22,lineStyle: {color: 'auto',}},axisLabel: {show: false},pointer: { //仪表盘指针show: 0,length: '70%',width: 2,},detail: {valueAnimation: true,show: false,color: "#fff",fontFamily: 'sans-serif',offsetCenter: [-30, '10%'],fontSize: 56,},title: {offsetCenter: [0, '25%'],color: "rgba(255, 255, 255, 0.8)",fontSize: 24},// data: [{//     name: "",//     value: 10// }]data: [{ 'name': '合格率',  }],},{type: 'pie',name: '内层细圆环',radius: ['60%', '65%'],hoverAnimation: false,zlevel: 2,clockWise: true,startAngle: '225',endAngle: -45,splitNumber: 50,itemStyle: {normal: {color: '#07b6e3',},},label: {show: false,},data: [{value: 150,itemStyle: {normal: {color: '#1D63B1',},},},{value: 1,itemStyle: {normal: {label: {show: false,},labelLine: {show: false,},color: 'rgba(0,0,0,0)',borderWidth: 0,},emphasis: {color: 'rgba(0,0,0,0)',borderWidth: 0,},},},],},]
};


http://www.ppmy.cn/server/153760.html

相关文章

力扣-图论-20【算法学习day.70】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…

前端的通信方式有哪些?比如子组件父组件间、子组件子组件间、其他等。。。

一、组件间通信 父组件与子组件 通过 Props&#xff08;单向数据流&#xff09; 父组件通过 props 将数据传递给子组件。 子组件不能直接修改父组件的状态&#xff0c;只能通过触发事件或回调通知父组件。适用场景&#xff1a; 父组件控制子组件的数据。 // 父组件 <Child…

基于单片机的程控电源显示控制电路设计

摘要 : 介绍了基于单片机程控电源显示控制电路的硬件设计和软件实现 , 该设计可以实现程控电源的输出显示和手动控制功能。 实践验证 , 该设计具有很好的使用效果和工程价值 。 关键词 : 程控电源 ; 显示控制 ; 单片机 0 引言 程控电源广泛地应用在工业控制和科学研究的…

丹摩征文活动 | AI创新之路,DAMODEL助你一臂之力GPU

目录 前言—— DAMODEL&#xff08;丹摩智算&#xff09; 算力服务 直观的感受算力提供商的强大​ 平台功能介绍​ 镜像选择 云磁盘创建 总结 前言—— 只需轻点鼠标,开发者便可拥有属于自己的AI计算王国 - 从丰富的GPU实例选择,到高性能的云磁盘,再到预配置的深度学习…

【Leetcode 热题 100】208. 实现 Trie (前缀树)

问题背景 T r i e Trie Trie 或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补全和拼写检查。 请你实现 Trie 类&#xff1a; Trie() 初始化前缀树对象。void insert(String word…

如何给负载均衡平台做好安全防御

在现代网络架构中&#xff0c;负载均衡&#xff08;Load Balancing&#xff09;扮演着至关重要的角色。它不仅负责将流量分配到多个服务器以确保高效的服务交付&#xff0c;还作为第一道防线来抵御外部攻击。为了保护您的应用程序和服务免受潜在威胁&#xff0c;必须对负载均衡…

连锁餐饮行业数据可视化分析方案

引言 随着连锁餐饮行业的迅速发展&#xff0c;市场竞争日益激烈。企业需要更加精准地把握运营状况、消费者需求和市场趋势&#xff0c;以制定科学合理的决策&#xff0c;提升竞争力和盈利能力。可视化数据分析可以帮助连锁餐饮企业整合多源数据&#xff0c;通过直观、动态的可…

271-基于XC7V690T的12路光纤PCIe接口卡

一、板卡概述 基于XC7V690T的12路光纤PCI-E接口卡&#xff0c;用于实现多通道高速光纤数据接收和发送&#xff0c;板卡兼容PCIe 2.0和PCIe 3.0规范&#xff0c;利用PCI-E Switch PEX 8748实现FPGA芯片与计算机的通信&#xff0c;计算机与板卡接口处提供PCI-e 16速接口&#xff…