echart图表之仪表盘 pie 双盘 乃至多盘

效果展示：

代码：

//首页转速盘
export const pieSpeed = (params) => {let demoDataif (params.length !== 0) {demoData = params?.map(item => {return {title: item.title,name: item.name,value: item.value,unit: item.unit || '',pos: item.pos,rangeMax: item.rangeMax,}})} else {demoData = [{title: '左沱江螺旋桨转速',name: 'r/min',value: 80,unit: '',pos: ['25%', '50%'],rangeMax: 100},{title: '右沱江螺旋桨转速',name: 'r/min',value: 80,unit: '',pos: ['75%', '50%'],rangeMax: 100},];}let option = {backgroundColor: '#fff',series: (function () {let result = [];demoData.forEach(function (item) {result.push({name: item.name,type: 'gauge',center: item.pos,radius: '100%',startAngle: 225,endAngle: -45,min: 0,max: item.rangeMax,axisLine: {show: true,lineStyle: {width: 4,// shadowBlur: 10,color: [[0, 'transparent'],[0.05, '#fd0001'],[0.055, 'transparent'],[0.1, '#fd0001'],[0.105, 'transparent'],[0.145, '#fd0001'],[0.15, 'transparent'],[0.2, '#fd0001'],[0.205, 'transparent'],[0.245, '#0894f6'],[0.25, 'transparent'],[0.3, '#0894f6'],[0.305, 'transparent'],[0.345, '#0894f6'],[0.35, 'transparent'],[0.4, '#0894f6'],[0.405, 'transparent'],[0.445, '#0894f6'],[0.45, 'transparent'],[0.5, '#0894f6'],[0.505, 'transparent'],[0.545, '#0894f6'],[0.55, 'transparent'],[0.6, '#0894f6'],[0.605, 'transparent'],[0.645, '#0894f6'],[0.65, 'transparent'],[0.7, '#0894f6'],[0.705, 'transparent'],[0.745, '#0894f6'],[0.75, 'transparent'],[0.8, '#0894f6'],[0.805, 'transparent'],[0.845, '#fd0001'],[0.85, 'transparent'],[0.9, '#fd0001'],[0.905, 'transparent'],[0.945, '#fd0001'],[0.95, 'transparent'],[1, '#fd0001'],],},},axisTick: {show: 0,},splitLine: {show: 0,},axisLabel: {show: 0,},pointer: {show: false,},detail: {show: false,},data: [{show: false,},],}, {name: item.name,center: item.pos,type: 'gauge',radius: '90%',startAngle: 225,endAngle: -45,min: 0,max: item.rangeMax,axisLine: {show: true,lineStyle: {width: 23,color: [[item.value / parseInt(item.rangeMax / 3),// item.value,new _echarts.graphic.LinearGradient(0, 1, 1, 0,[{offset: 0,color: 'rgba(67, 122, 203, 0.02)',},{offset: 0.3,color: 'RGBA(209, 226, 254, 0.23)',},{offset: 1,color: 'RGBA(209, 226, 254, 1)',},]),],[1, 'rgba(255,255,255,.0)'],],},},axisTick: {show: 0,},splitLine: {show: 0,},axisLabel: {show: 0,// show: true,// splitNumber: 30,// distance: 40,},pointer: {show: true,length: '100%',},detail: {show: true,offsetCenter: [0, '-3%'],textStyle: {fontSize: 14,fontWeight: 600,lineHeight: 30,color: 'RGBA(0, 203, 224, 1)',},formatter: [(item.title || '标题'), (''), '{value}', '{name|' +item.name + '}'].join('\n'),rich: {name: {fontSize: 12,lineHeight: 3,color: '#000',fontWeight: '300',},},},itemStyle: {color: 'RGBA(68, 122, 203, 1)',borderColor: 'RGBA(157, 186, 228, 1)',shadowColor: 'RGBA(222, 231, 246, 1)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2},data: [{value: item.value,},],anchor: {show: true,showAbove: true,size: 16,itemStyle: {color: 'RGBA(66, 122, 203, 1)',},},markPoint: {data: [{x: "25%",y: "50%",symbol: 'circle',symbolSize: 12,itemStyle: {color: '#fff'},}, {x: "75%",y: "50%",symbol: 'circle',symbolSize: 12,itemStyle: {color: "#fff"},}]},}, {type: 'gauge',radius: '90%',center: item.pos,splitNumber: 10,min: 0,max: item.rangeMax,splitNumber: 4,startAngle: 225,endAngle: -45,axisLine: {show: true,lineStyle: {width: 1,color: [[1,new _echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: '#747474',},{offset: 1,color: 'red',},]),],],},},axisLabel: {distance: 1,textStyle: {color: '#000',fontSize: '12',},},axisTick: {show: true,distance: 0,},splitLine: {show: true,length: 10,distance: 0,lineStyle: {color: '#ccc',},},pointer: {show: 0,},detail: {show: 0,},});});return result;})(),};let option2 = {backgroundColor: '#fff',series: (function () {var result = [];demoData.forEach(function (item) {result.push({name: item.name,type: 'gauge',center: item.pos,radius: '60%',startAngle: 225,endAngle: -45,min: 0,max: 1,axisLine: {show: true,lineStyle: {width: 4,shadowBlur: 10,color: [[0, 'transparent'],[0.05, '#fd0001'],[0.055, 'transparent'],[0.1, '#fd0001'],[0.105, 'transparent'],[0.145, '#fd0001'],[0.15, 'transparent'],[0.2, '#fd0001'],[0.205, 'transparent'],[0.245, '#0894f6'],[0.25, 'transparent'],[0.3, '#0894f6'],[0.305, 'transparent'],[0.345, '#0894f6'],[0.35, 'transparent'],[0.4, '#0894f6'],[0.405, 'transparent'],[0.445, '#0894f6'],[0.45, 'transparent'],[0.5, '#0894f6'],[0.505, 'transparent'],[0.545, '#0894f6'],[0.55, 'transparent'],[0.6, '#0894f6'],[0.605, 'transparent'],[0.645, '#0894f6'],[0.65, 'transparent'],[0.7, '#0894f6'],[0.705, 'transparent'],[0.745, '#0894f6'],[0.75, 'transparent'],[0.8, '#0894f6'],[0.805, 'transparent'],[0.845, '#fd0001'],[0.85, 'transparent'],[0.9, '#fd0001'],[0.905, 'transparent'],[0.945, '#fd0001'],[0.95, 'transparent'],[1, '#fd0001'],],},},axisTick: {show: 0,},splitLine: {show: 0,},axisLabel: {show: 0,},pointer: {show: false,},detail: {show: false,},data: [{show: false,},],}, {name: item.name,center: item.pos,type: 'gauge',radius: '50%',startAngle: 225,endAngle: -45,min: 0,max: item.rangeMax,axisLine: {show: true,lineStyle: {width: 50,color: [[item.value / 100,new _echarts.graphic.LinearGradient(0, 1, 1, 0,[{offset: 0,color: 'rgba(67, 122, 203, 0.02)',},{offset: 0.3,color: 'RGBA(209, 226, 254, 0.23)',},{offset: 1,color: 'rgba(209, 226, 254, 1)',},]),],[1, 'rgba(255,255,255,.0)'],],},},axisTick: {show: 0,},splitLine: {show: 0,},axisLabel: {show: 0,},pointer: {show: true,length: '100%',},detail: {show: true,offsetCenter: [0, '20%'],textStyle: {fontSize: 24,color: 'RGBA(0, 203, 224, 1)',},formatter: [(item.title || '标题'), (' '), (' '), '{value}' + (item.unit || ''), '{name|' + item.name + '}'].join('\n'),rich: {name: {fontSize: 20,lineHeight: 30,color: '#000',fontWeight: '300',},},},itemStyle: {color: 'RGBA(68, 122, 203, 1)',// borderColor: 'RGBA(157, 186, 228, 1)',// shadowColor: 'RGBA(222, 231, 246, 1)',// shadowBlur: 10,// shadowOffsetX: 2,// shadowOffsetY: 2},data: [{value: item.value,},],anchor: {show: true,showAbove: true,size: 22,itemStyle: {color: 'RGBA(102, 147, 212, 1)',borderWidth: '1px',borderColor: 'RGBA(157, 186, 228, 1)',},},markPoint: {data: [{x: "75%",y: "50%",symbol: 'circle',symbolSize: 24,itemStyle: {color: 'RGBA(102, 147, 212, 1)'},}, {x: "75%",y: "50%",symbol: 'circle',symbolSize: 18,itemStyle: {color: "#fff"},}]},}, {type: 'gauge',radius: '56%',center: item.pos,splitNumber: 10,min: 0,max: item.rangeMax,startAngle: 225,endAngle: -45,axisLine: {show: true,lineStyle: {width: 3,color: [[1,new _echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: '#747474',},{offset: 1,color: '#747474',},]),],],},},axisLabel: {distance: 6,textStyle: {color: '#000',fontSize: '14',},},splitLine: {show: true,length: 16,lineStyle: {color: '#ccc',},},pointer: {show: 0,},detail: {show: 0,},});});return result;})(),}return option
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/236092.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android Studio开发之路（六）（合集）界面优化以及启动图标等

Android Studio开发之路（六）（合集）界面优化以及启动图标等

一、导航栏背景、字体修改 导航栏、状态栏等背景颜色的修改一般是在themes.xml文件中修改，android一个activity各个部件参考： colorPrimary,colorPrimaryDark等的意义 添加链接描述 但是问题在于：只在这里修改背景颜色的话，可能…
阅读更多...
D : B DS二叉排序树_树中第k小的元素

D : B DS二叉排序树_树中第k小的元素

Description 给定一个二叉排序树和一个整数k，要求输出树中第k个最小元素(k从1开始计数)。 Input 第一行输入t，表示有t个测试样例。 第二行起，首先输入n，接着输入n个整数表示一个二叉排序树，接着输入k。 以此类推共…
阅读更多...
【数据结构和算法】---二叉树（1）--树概念及结构

【数据结构和算法】---二叉树（1）--树概念及结构

目录 一、树的概念及结构1.1 树的概念1.2 树的相关概念1.3 树的表示1.4 树在实际中的运用 二、二叉树的概念及结构2.1 二叉树概念2.2 特殊的二叉树2.3 二叉树的性质2.4 二叉树的存储结构 三、树概念相关题目 一、树的概念及结构 1.1 树的概念 树是一种非线性的数据结构&#…
阅读更多...
OpenCV技术应用（9）— 视频的暂停播放和继续播放

OpenCV技术应用（9）— 视频的暂停播放和继续播放

前言：Hello大家好，我是小哥谈。本节课就手把手教大家如何控制视频的暂停播放和继续播放，希望大家学习之后能够有所收获~！🌈 目录 🚀1.技术介绍 🚀2.实现代码 🚀1.技术介绍…
阅读更多...
vue2 按钮限制 点击按钮一前 灰色不可以点击 点击按钮一后 可以点击

vue2 按钮限制 点击按钮一前 灰色不可以点击 点击按钮一后 可以点击

代码 <template> <div> <button click"enableButtons">按钮1</button> <button :disabled"!isButton2Enabled" click"ann">按钮2</button> <button :disabled"!isButton3Enabled" c…
阅读更多...
Opencv实验合集——实验五：高动态范围

Opencv实验合集——实验五：高动态范围

1.概念 高动态范围成像&#xff08;HDRI 或 HDR&#xff09;是一种用于成像和摄影的技术&#xff0c;可以再现比标准数字成像或照相技术更大的动态光度范围。虽然人眼可以适应各种光线条件&#xff0c;但大多数成像设备每通道使用 8 位&#xff0c;因此我们仅限于 256 级。当我…
阅读更多...
某电子文档安全管理系统存在任意用户登录漏洞

某电子文档安全管理系统存在任意用户登录漏洞

漏洞简介 某电子文档安全管理系统存在任意用户登录漏洞&#xff0c;攻击者可以通过用户名获取对应的cookie&#xff0c;登录后台。 资产测绘 Hunter语法&#xff1a;web.icon“9fd216c3e694850445607451fe3b3568” 漏洞复现 获取Cookie POST /CDGServer3/LinkFilterServi…
阅读更多...
uniapp websocket的使用和封装

uniapp websocket的使用和封装

在uniapp中socket分为两种形式&#xff0c;第一种适用于只有一个socket链接&#xff0c;第二种适用于多个socket链接。传送门 这里以socketTask为列子封装 在utils新建一个文件 在你要使用的页面引入&#xff0c;我这是聊天那种&#xff0c;所以我在拿到用户信息之后连接sock…
阅读更多...
【Linux】whereis命令使用

【Linux】whereis命令使用

whereis命令 whereis命令用于查找文件。 使用whereis命令可以查找指定文件、命令和手册页的位置&#xff0c;不能搜索普通文件。 以前学习过 【Linux】 find命令使用 语法 whereis [选项] [文件] find命令 -Linux手册页 命令选项及作用 执行令 whereis --help 执行命…
阅读更多...
多媒体信息化建设，动态数据中心，深入理解分布式系统

多媒体信息化建设，动态数据中心，深入理解分布式系统

目录 一、前言二、双活数据中心三、数据备份方式四、设计双活数据中心需要考虑的问题1、延迟和稳定性2、Quorum/ Tie-Breaker3、工作负载 五、动态数据中心六、深入理解分布式系统1、内容介绍2、作者简介 大家好&#xff0c;我是哪吒。 文末送5本《深入理解分布式系统》 一、…
阅读更多...
C/C++ BM1反转链表

C/C++ BM1反转链表

文章目录 前言题目1.解决方案一1.1 思路阐述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这题是牛客网的BM1&#xff0c;主要涉及到链表的操作以及栈数据结构的使用。 题目 给定一个单链表的头结点pHead(该头节点是有值的&#xff0c;比如在下图&#xff0c;它的…
阅读更多...
Flink cdc3.0同步实例（动态变更表结构、分库分表同步）

Flink cdc3.0同步实例（动态变更表结构、分库分表同步）

文章目录 前言准备flink环境docker构建mysql、doris环境数据准备 通过 FlinkCDC cli 提交任务整库同步同步变更路由变更路由表结构不一致无法同步 结尾 前言 最近Flink CDC 3.0发布&#xff0c; 不仅提供基础的数据同步能力。schema 变更自动同步、整库同步、分库分表等增强功…
阅读更多...
论文笔记：Accurate Localization using LTE Signaling Data

论文笔记：Accurate Localization using LTE Signaling Data

1 intro 论文提出LTELoc&#xff0c;仅使用信令数据实现精准定位 信令数据已经包含在已在LTE系统中&#xff0c;因此这种方法几乎不需要数据获取成本仅使用TA&#xff08;时序提前&#xff09;和RSRP【这里单位是瓦】&#xff08;参考信号接收功率&#xff09; TA值对应于信号…
阅读更多...
vue没有使用fetch报错 Uncaught (in promise) TypeError: Failed to fetch

vue没有使用fetch报错 Uncaught (in promise) TypeError: Failed to fetch

出现下面的错误&#xff0c;主要也没有用谷歌浏览器什么和发起fetch请求&#xff0c;找了很久没有什么发现 POST https://www.google-analytics.com/mp/collect?measurement_idG-04CMS1PYS6&api_secretpRgvhB8VTii5eSmcTzVaOg net::ERR_BLOCKED_BY_CLIENT Uncaught (in pr…
阅读更多...
获投1050万欧元！德国量子公司Kipu Quantum成功研发特定压缩算法

获投1050万欧元！德国量子公司Kipu Quantum成功研发特定压缩算法

​&#xff08;图片来源&#xff1a;网络&#xff09; 近日&#xff0c;德国量子软件公司Kipu Quantum宣布成功完成种子轮融资&#xff0c;融资总额达1050万欧元&#xff08;约合8000万人民币&#xff09;。该初创公司目前已开发出运行高性能量子计算机所需的压缩算法。该算法…
阅读更多...
windows安装、基本使用vim

windows安装、基本使用vim

标题&#xff1a;windows安装、基本使用vim 1.下载并安装GVIM 百度网盘链接 提取码&#xff1a;2apr 进入安装界面&#xff0c;如下&#xff0c;勾选 其它都是默认即可 参考&#xff1b; 2.在powershell中使用vim 参考blog&#xff1a;window10安装vim编辑器 安装好后&…
阅读更多...
HTML+CSS做一个冰立方体时钟

HTML+CSS做一个冰立方体时钟

文章目录 💕效果展示💕代码展示HTMLJS💕效果展示 💕代码展示 HTML <!DOCTYPE html> <html lang
阅读更多...
双三次 Bezier 曲面

双三次 Bezier 曲面

双三次 Bezier 曲面的定义 Bezier 曲面是由 Bezier 曲线扩展得到&#xff0c;它是两组正交的 Bezier 曲线控制点构造空间网格生成的曲面 p ( u , v ) ∑ i 0 3 ∑ j 0 3 P i , j B i , 3 ( u ) B j , 3 ( v ) , ( u , v ) ∈ [ 0 , 1 ] [ 0 , 1 ] \begin{equation} \bm{p}…
阅读更多...
法线贴图实现衣服上皱褶特效

法线贴图实现衣服上皱褶特效

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 法线贴图在3D建模中扮演着重要的角色&#xff0c;它通过模拟表面的微…
阅读更多...
c++内存池项目

c++内存池项目

文章目录 一、内存池介绍二、ThreadCache实现三、CentralCache实现四、PageCache实现五、回收内存六、大于256KB的内存申请与释放七、将new和delete换为定长内存池八、多线程环境下对比malloc进行基准测试九、使用基数树进行性能优化 一、内存池介绍 二、ThreadCache实现 下面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023