vue3之仪表盘

vue3之仪表盘

效果:

在这里插入图片描述

版本
“echarts”: “^5.5.1”

核心代码:

<!--* @Description: 圆环组件封装* @Version: 1.0* @Autor: qh
--><template><div ref="chartRef" class="circle"></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';const props = defineProps({percent: {type: Number,default: 0,},
});const chartRef = ref(null);
let chart: any = null;const rich = {bule: {fontSize: 22,fontFamily: 'DINPro',color: '#fff',padding: [6, 0, 0, 0],},white: {fontSize: 12,color: '#fff',padding: [10, 0, 0, 0],},
};const topChartOptions = (value: number) => {return {tooltip: {show: false,formatter: '{a} <br/>{b} : {c} ({d}%)',},series: [{name: 'S',z: 3,type: 'gauge', // 仪表盘center: ['49.5%', '58%'],radius: '95%',detail: {formatter: (value: any) => {return '{bule|' + value + '}{white|%}';},rich,offsetCenter: ['0%', '0%'],},title: {show: false,},data: [{value,name: 'Percent',},],axisLine: {show: true,lineStyle: {roundCap: true,width: 7,color: [[value / 100,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(0, 255, 231, 0.5)',},{offset: 0.5,color: 'rgba(0, 255, 231, 0.8)', // 100% 处的颜色},{offset: 1,color: 'rgba(0, 255, 231, 0.5)', // 100% 处的颜色},]),],[1, 'rgba(4, 211, 251, 0)'],],},},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},pointer: {length: '14%',width: 2,icon: 'rect',offsetCenter: [0, '-87%'],itemStyle: {color: 'rgba(0, 255, 231, 1)',},},},{name: 'T',z: 2,type: 'gauge', // 仪表盘center: ['49.5%', '58%'],radius: '96%',detail: {show: false,},title: {show: false,},data: [{value: 100,name: 'Percent',},],axisLine: {show: true,lineStyle: {roundCap: true,width: 8,color: [[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(150, 179, 180, 1)',},{offset: value / 100,color: 'rgba(150, 179, 180, 0.5)',},{offset: 1,color: 'rgba(150, 179, 180, 1)', // 100% 处的颜色},]),],[1, 'rgba(255, 192, 1, 0)'],],},},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},pointer: {show: false,},},],};
};const initChart = () => {if (!chart) chart = echarts.init(chartRef.value);chart.setOption(topChartOptions(props.percent));
};onMounted(() => {initChart();
});onBeforeUnmount(() => {if (chart) {chart.clear();chart.dispose();chart = null;}
});
</script><style scoped lang="scss">
.circle {width: 132px;height: 113px;// 根据实际情况加背景图background: url('@/assets/img/inspection/overview-bg.png') no-repeat;
}
</style>

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

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

相关文章

PE文件格式

PE&#xff0c;可移植的可执行文件&#xff0c;文件是Windows操作系统中用于可执行文件&#xff08;如EXE&#xff09;、动态链接库&#xff08;DLLs&#xff09;以及其他文件类型&#xff08;如OCX、SYS、COM等&#xff09;的标准格式。 划分&#xff1a;一个PE文件分为了两大…

微前端架构入门

什么是微前端? 定义 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端是一种架构风格,它允许将一个复杂的大前端应用拆分成多个可以独立开发、部署的小型前端应用。这些小型前端应用通常被称为“子应用”或者“微前端应用…

如何在没有密码的情况下解锁Oppo手机?5 种简单的方法

保护智能手机隐私的一种绝佳方法是设置复杂的锁屏密码或图案。一些OPPO手机的所有者在更改图案或密码后&#xff0c;在一夜之间失去了对其图案或密码的内存。事实上&#xff0c;OPPO用户遇到的众多问题包括忘记密码或锁定屏幕。遗憾的是&#xff0c;没有多少人知道无需密码即可…

Java合并两个List并去掉重复项

今天在工作中遇到了需要将两个List<String>合并成一个&#xff0c;并去重的功能点。这种需求点很少&#xff0c;但是还真会出现。 下面给大家展示下我是怎么实现的 方法一&#xff1a;使用HashSet public static void main(String[] args) { // String[] arr1 …

阿里声音项目Qwen2-Audio的部署安装,在服务器Ubuntu22.04系统——点动科技

阿里声音项目Qwen2-Audio的部署安装&#xff0c;在服务器Ubuntu22.04系统——点动科技 一、ubuntu22.04基本环境配置1.1 更换清华Ubuntu镜像源1.2 更新包列表&#xff1a;2. 安装英伟达显卡驱动2.1 使用wget在命令行下载驱动包2.2 更新软件列表和安装必要软件、依赖2.2 卸载原有…

等保测评基础知识(六)

《计算机病毒防治管理办法》51号令 第十四条 从事计算机设备或者媒体生产、销售、出租、维修行业的单位和个人,应当对计算机设备或者媒体进行计算机病毒检测、清除工作,并备有检测、清除的记录。 第十九条 计算机信息系统的使用单位有下列行为之一的,由公安机关处以警告…

vue3 RouterLink路由跳转后RouterView组件未加载,页面未显示,且控制台无任何报错

在使用 vue3 开发项目过程中&#xff0c;组件之间使用 router-link 跳转&#xff0c;但是当我开发的组件跳转到其他组件时&#xff0c;其他组件的页面未加载&#xff0c;再跳转回自己的组件时&#xff0c;自己的组件也加载不出来了&#xff0c;浏览器刷新后页面可以加载出来。但…

6.画面渲染及背景-《篮球比赛展示管理系统》现场管理员角色操作手册

通过[特效实验室]及[更换背景] 对整个展示界面的底部图层进行动画渲染。此功能是平台的一大特色。一般用在选手上场或颁奖等。用户可以根据现场情况&#xff0c;妥善发挥。背景图片及其特效&#xff0c;应该在比赛之前设置好。

java: 错误: 无效的源发行版:17

错误信息 java: 错误: 无效的源发行版&#xff1a;17 原因 这个错误通常表示你的 Java 编译器版本不支持你指定的 Java 版本。 解决方式 pom.xml 版本改为18或8 <properties><java.version>18</java.version></properties>设置&#xff1a; 改完…

Transformer模型框架

Transformer 模型框架源自2017年论文 《Attention is All You Need》 Self-Attention 1、Transformer 结构 Transformer 整体框架由 Encoder 和 Decoder 组成&#xff0c;本质上是 Self-Attention 模型的叠加。 2、Encoder Encoder 的主要作用是让机器更清楚的了解到句子中…

时钟信号如何影响高分辨率ADC

1 简介 在数据采集系统中&#xff0c;时钟作为时间基准&#xff0c;使所有部件都能同步工作。对于ADC&#xff0c;精确而稳定的时钟确保主机向ADC发送命令&#xff0c;ADC以正确的顺序接收来自主机的命令。更为重要的是&#xff0c;系统时钟信号允许用户在需要时对输入进行采集…

为什么?MCU中需要ADC模块

“做成ADC拿去诡市,贱卖!”-----长安红茶续篇 库比蒂诺的枪声——苹果发布AI PC芯片M4,打响2024年AI大模型第一枪 芯品快报:亚德诺(ADI)超静音步进电机驱动芯片——TMC2209 为什么MCU中需要ADC模块 原创 芯愿景软件 集成电路大数据平台 在微控制器(MCU)芯片中,通…

nginx基础配置实例

nginx账户认证功能 由ngx_http_auth_basic_module 模块提供此功能 建立非交互用户认证 [rootNginx ~]# htpasswd -cmb /usr/local/nginx/conf/.htpasswd admin admin创建web测试静态文本 mkdir /webdata/nginx/example.org/example/login echo login > /webdata/nginx/e…

遗传算法与深度学习实战(7)——使用遗传算法解决N皇后问题

遗传算法与深度学习实战&#xff08;7&#xff09;——使用遗传算法解决N皇后问题 0. 前言1. N 皇后问题2. 解的表示3. 遗传算法解决 N 皇后问题小结系列链接 0. 前言 进化算法 (Evolutionary Algorithm, EA) 和遗传算法 (Genetic Algorithms, GA) 已成功解决了许多复杂的设计…

JWT加密工具

JWT加密工具 2.JWT介绍 JSON Web Token&#xff08;JWT&#xff09;,它定义了一种简洁的、自包含的协议格式&#xff0c;JWT可以使用HMAC算法或使用RSA的公钥/私钥对进行签名&#xff0c;防止被篡改。 JWT官网&#xff1a; https://jwt.io JWT组成 JWT由三个部分组成&…

AI-Talk开发板SDK

一、说明 可以在Windows、Ubuntu、macOS安装和编译SDK。此文章只介绍在Ubuntu下安装和编译SDK。 其它方式可参考聆思官方环境搭建教程。 二、环境搭建 1、安装依赖 安装git和wget软件包&#xff1a; sudo apt install --no-install-recommends git wget 如果已安装就跳…

C/C++实现蓝屏2.0

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &#x1f680;感谢大家点赞&#x1f44d;收藏⭐评论✍ 前…

这家AGV机器人龙头高歌猛进,半年营收27亿,国内对手们慌了吗?

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 机器人业务高歌猛进&#xff0c;海康威视创新引擎全速运转 海康威视于近日揭晓了其2024年上半年的辉煌成绩单。这份报告不仅彰显了公司整体业务的稳健增长&#xff0c;更引人注目的是…

vue-element-admin解决三级目录的KeepAlive缓存问题(详情版)

vue-element-admin解决三级目录的KeepAlive缓存问题&#xff08;详情版&#xff09; 本文章将从问题出现的角度看看KeepAlive的缓存问题&#xff0c;然后提出两种解决方法。本文章比较详细&#xff0c;如果只是看怎么解决&#xff0c;代码怎么改&#xff0c;请前往配置版。 一…

uView的u-notice-bar组件横向滚动不生效问题解决

uView的u-notice-bar组件横向滚动不生效问题解决 此问题导致我换了vant组件的 notice-bar&#xff0c;一度以为是该组件存在bug。uniapp中有vant组件打包小程序又是一个问题&#xff0c;于是乎不得不回来继续折腾uView的u-notice-bar组件&#xff0c;偶然发现css属性animation-…