vue 封装水球图

1、 安装 echarts 与 echarts-liquidfill

pnpm i echarts
pnpm i echarts-liquidfill

2、组件中引入

import * as echarts from 'echarts'
import 'echarts-liquidfill'

3、封装通用组件

    <div class="waterball-chart"><div ref="chartContainer" style="width: 100%; height: 90%"></div></div>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const props = defineProps<{borderColor: anytitleInfo: anypercentage: anycolor: anylabelNumber: anypercentSize: anyunitSize: anypadding: any
}>()
const chartContainer = ref(null)
// ----------------------------------
const drawWaterball = (percentage: any) => {const chart = echarts.init(chartContainer.value)const option = {series: [{type: 'liquidFill',data: [percentage / 100], // 百分比的值,取值范围为0到1color: [props.color],radius: '85%', // 水球图的半径,可以根据需要调整label: {formatter(param: any) {return [`{a|${props.labelNumber || (param.value * 100).toFixed(0)}}`,'{b|%}',].join('')},rich: {a: {fontSize: props.percentSize,color: '#FFFFFF',fontFamily: 'DINPro',fontWeight: 400,},b: {fontSize: props.unitSize,color: '#FFFFFF',fontFamily: 'DINPro-Regular',fontWeight: 400,padding: props.padding,},},},title: {text: `${(0.2 * 100).toFixed(0)}{a|%}`,textStyle: {fontSize: 12,fontFamily: 'Microsoft Yahei',fontWeight: 'normal',color: '#bcb8fb',rich: {a: {fontSize: 10,},},},x: 'center',y: '35%',},backgroundStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(204, 230, 255,1)', // 0% 处的颜色},{offset: 0.5,color: 'rgba(204, 230, 255, 1)', // 0% 处的颜色},{offset: 1,color: 'rgba(204, 230, 255, 1)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},},outline: {// show:false,borderDistance: 0,itemStyle: {borderWidth: 10,borderColor: props.borderColor,},},},],}setTimeout(() => {chart.resize()chart.setOption(option)}, 8)
}
// ---------------------------------
watch(() => props.percentage,(newValue) => {drawWaterball(newValue)},
)
// ---------------------------------
onMounted(() => {drawWaterball(props.percentage)
})

4、效果图

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

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

相关文章

从C到C++,C++入门篇(1)

1.什么是C C是一种通用编程语言&#xff0c;由Bjarne Stroustrup在1980年代初开发&#xff0c;作为C语言的扩展。 C支持多种编程范式&#xff0c;包括过程式编程、数据抽象、面向对象编程和泛型编程等。 这种语言在操作系统、游戏开发、图形界面、嵌入式系统、分布式系统、网…

变压器中的磁化和励磁电流波形

导出变压器中的磁化电流和励磁电流的图形方法具有说明性&#xff0c;因为它们使我们能够同时可视化产生这些波形的元素&#xff0c;例如磁通波形和磁性材料的典型 BH 曲线。 所得波形表明它们不是正弦波&#xff0c;并且对于励磁电流而言&#xff0c;它也不对称。 使用傅里叶…

Facebook代运营 | Facebook广告投放步骤及要点

Facebook体量大&#xff0c;素材的更新频率快&#xff0c;通过Facebook进行广告投放的用户也越来越多&#xff0c;Facebook坐拥大量用户&#xff0c;同时有着非常科学的用户画像构建系统和推送机制&#xff0c;对于很多广告涉足的伙伴来说&#xff0c;更加的友好。 1. 创建广告…

ubuntu系统 kubeadm方式搭建k8s集群

服务器环境与要求&#xff1a; 三台服务器 k8s-master01 192.168.26.130 操作系统&#xff1a; Ubuntu20.04 k8s-woker01 192.168.26.140 操作系统&#xff1a; Ubuntu20.04 k8s-woker02 192.168.26.150 操作系统&#xff1a; Ubuntu20.04 最低配置&#xff1a;2…

斯坦福 AI 团队被曝抄袭中国大模型开源成果;Zoom 创始人谈视频会议未来丨 RTE 开发者日报 Vol.218

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…

2.29G大小Win 11系统来了,老爷机也能焕发第二春

Win 11 推出近三年以来微软大搞特搞的份额入侵计划&#xff0c;以目前情况来看算是彻底失败了。 国外知名机构 statcounter 最近公布了 4 月份 Windows 各版本份额调查结果。 其中显示&#xff0c;Win 11 占比 26% 左右&#xff0c;相较 2 月份 28% 反而开起了倒滑车。 来源&…

技术管理革新:三品PLM在电子电气行业的应用

随着科技的不断进步和市场需求的日益增长&#xff0c;电子电气行业正经历着前所未有的变革。产品生命周期的缩短和更新换代的加速&#xff0c;对企业的产品研发管理提出了更高的要求。在这样的背景下&#xff0c;产品生命周期管理PLM解决方案应运而生&#xff0c;旨在帮助电子电…

基于数据帧进行SQL查询

本教程将通过一个具体的案例来演示如何在Spark SQL中基于数据帧进行SQL查询。我们将从创建临时视图开始&#xff0c;然后使用spark对象执行SQL查询&#xff0c;包括投影、选择、统计和排序等操作。 具体步骤如下&#xff1a; 基于数据帧创建临时视图&#xff1a; 命令格式&…

深度学习笔记:1.anaconda安装

Download Anaconda Distribution | Anaconda 双击安装 设置环境变量 anaconda常用命令大全&#xff08;保姆级别建议收藏)-CSDN博客https://blog.csdn.net/m0_64892604/article/details/128806043?ops_request_misc%257B%2522request%255Fid%2522%253A%252217174671831680018…

This Python interpreter is in a conda environment

今天在查看python版本的时候出现警告 Warning: This Python interpreter is in a conda environment, but the environment has not been activated. Libraries may fail to load. To activate this environment please see https://conda.io/activation 这个警告意味着你…

2024年6月4日13:48:07-3.8功能说明1.保存草稿2.支持自定义SKU销售规格3.全网爆款企划支持一键提交

创建产品产品保存草稿、自定义编辑规格功能使用手册 尊敬的淘工厂商家&#xff1a; 淘工厂近两个月收到很多商家对淘工厂发品&#xff08;上品&#xff09;效率提升的改进建议&#xff0c;淘工厂本月将针对产品发布页的发品效率提升上线一系列改进功能&#xff0c;希望能加速…

设计循环队列---力扣622

1、题目 1.1基础设置与讲解 循环队列&#xff0c;即固定长度的队列&#xff0c;可以想象成一个环形队列 就类似于这种队列&#xff0c;队尾指针后会有一个空位&#xff0c;用于控制判断队列为空还是为满&#xff1b; typedef int MyDataType;typedef struct {MyDataType fron…

CTF-Misc学习笔记

这里写目录标题 Misc准备古典密码凯撒密码棋盘密码ADFGX密码培根密码栅栏密码摩斯密码猪圈密码键盘密码QWE编码ook编码BrainFUck密码aaencode密码jsfuckbase全家桶URL编码十六进制二进制 ascii码 2.图片隐写分析LSP 隐写实操图片修改宽高实操 零宽度字符隐写音频隐写分析与实操…

新项目来了,JDK 17和JDK 21 该如何选择?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

anaconda创建虚拟环境并配置到JupyterNotebook

anaconda创建虚拟环境并配置到JupyterNotebook 一、查看当前环境二、创建虚拟环境三、配置JupyterNotebook内核一、查看当前环境 如上图所示,在开始菜单中扎到Anaconda Prompt(Anaconda)并打开。在命令行窗口中输入命令conda info -e或者conda env list查看已安装的虚拟环境,…

开放式耳机哪个品牌质量比较好?五大热门品牌PK推荐

作为一名热爱音乐的DJ爱好者&#xff0c;我深知一款适合DJ使用的开放式耳机应该具备哪些特点。最近&#xff0c;我深入评测了几款热门开放式耳机&#xff0c;从音质、舒适度、耐用性到混音功能等方面进行了全面评估。今天&#xff0c;我想为大家分享我的评测结果&#xff0c;希…

网易云音乐格式在线转换

应用分享&#xff1a;众所周知网易云下载的格式为 .NCM&#xff0c;只能在网易云音乐里播放。 今天提供在线转换为MP3格式 NCM TO MP3&#xff0c;无需安装&#xff0c;转换后就能在任意播放器使用。 使用地址&#xff1a; https://ncm.worthsee.com/ 网络研究观 数据泄露…

WannaMine4.0病毒应急处置

一、前言 某日&#xff0c;通过流量监测设备和EDR发现挖矿请求告警&#xff0c;并存在长期445端口扫描。 二、病毒排查 上机排查&#xff0c;发现该服务器存在WannaMine4.0病毒&#xff0c;通过网上文章了解&#xff0c;如果请求挖矿域名遭安全设备拦截&#xff0c;会导致挖矿…

618有哪些好物值得入手?618四款必囤好物清单分享!

对于钟情于科技新品和数码产品的朋友们而言&#xff0c;每次大型购物节都是一个值得把握的机会&#xff0c;而即将来临的618购物节&#xff0c;更是让众多数码爱好者满怀期待。在此&#xff0c;我细心挑选了几款数码商品&#xff0c;希望能为您的购物清单增添几分灵感。让我们一…

系统架构设计师【第18章】: 安全架构设计理论与实践 (核心总结)

文章目录 18.1 安全架构概述18.1.1 信息安全面临的威胁18.1.2 安全架构的定义和范围18.1.3 与信息安全相关的国内外标准及组织 18.2 安全模型18.2.1 状态机模型18.2.2 Bell-LaPadula模型18.2.3 Biba模型18.2.4 Clark-Wilson模型18.2.5 Chinese Wall模型 18.3 系统安…