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,一经查实,立即删除!

相关文章

天线对信号传输的效率影响

天线设计和选择的标准主要包括带宽、极化、方向性、物理空间和增益等方面。这些标准直接影响信号传输的效率和质量。 带宽是指特定信号的频率范围&#xff0c;它决定了天线能够覆盖的频率范围&#xff0c;从而影响信号的传输效率。极化是指天线辐射的电场方向&#xff0c;不同的…

使用 Vue 3 和 qrcode.js 开发二维码显示组件

二维码在现代应用中广泛使用&#xff0c;例如支付、身份验证、链接分享等。本文将介绍如何使用 Vue 3 和 qrcode.js 库来创建一个灵活的二维码显示组件&#xff0c;并展示如何在应用中使用它。 1. 安装必要的依赖 首先&#xff0c;我们需要安装 Vue 3 和 qrcode.js。如果你还…

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

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

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

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

vue2源码重写数组方法学习

在学习之前&#xff0c;我们需要问一个为什么&#xff0c;为什么vue2 源码要重写数组方法 响应式数据更新&#xff1a;通过重写数组方法&#xff0c;Vue 能够捕获对数组的变更操作&#xff08;如 push、pop、shift 等&#xff09;&#xff0c;并在数据发生变化时自动更新视图&a…

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

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

Opentracing 代码Demo

背景 OpenTracing 是一个提供标准化分布式追踪功能的API和工具。它的主要作用包括: 跨系统边界追踪请求流程:OpenTracing 允许开发者跟踪一个请求从开始到结束在整个分布式系统中的所有经过的点(包括异构系统),帮助理解系统中的请求流程和服务间的相互依赖。 性能分析和瓶…

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; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…

gradio出现httpcore.ReadTimeout: timed out问题

解决办法 pip install https://gradio-builds.s3.amazonaws.com/aae46d9199e1edc8a22c96aba1ade12f6ebc1da1/gradio-4.21.0-py3-none-any.whl

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

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

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

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

Python工程中,__init__.py文件有什么用

在Python工程中&#xff0c;__init__.py 文件有几个重要的用途&#xff1a; 标识目录为包&#xff1a; 在Python 3.3之前&#xff0c;__init__.py 文件的存在是为了告诉解释器&#xff0c;该目录是一个Python包。这使得包中的模块可以被导入和使用。即使在Python 3.3之后可以没…

隔离变压器的特点与作用

隔离变压器是一种常见的电力变压器&#xff0c;其主要特点和作用如下&#xff1a; 特点&#xff1a; 电气隔离&#xff1a; 隔离变压器的主要特点是将输入端和输出端完全电气隔离&#xff0c;通过磁耦合实现能量传递。这意味着输入端和输出端之间没有直接的电连接&#xff0c…

endswith方法 测试字符串是否以指定的后缀结束

Java String类中的endswith方法 Java String类 endsWith () 方法用于测试字符串是否以指定的后缀结束。 语法 public boolean endsWith (String suffix) 参数 suffix -- 指定的后缀。 返回值 如果参数表示的字符序列是此对象表示的字符序列的后缀&#xff0c;则返回 true&…

基于数据帧进行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 这个警告意味着你…

MySql学习(二)——SQL通用语法之DDL

文章目录 二、SQL2.1 SQL通用语法2.2 SQL分类2.3 DDL2.3.1 DDL——数据库操作2.3.2 DDL——表操作-查询2.3.3 DDL——表操作-创建2.3.4 DDL——表操作-数据类型2.3.5 DDL——表操作-修改2.3.6 DDL——表操作-删除二、SQL 2.1 SQL通用语法 SQL语句可以单行或多行书写,以分号结…

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

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