Echarts圆环图偏移后 中心文字居中对齐实现

像上图中这样圆环图并不在div的中间时,中心的文本需要居中展示 一开始用left百分比但数据一旦变长或变短就会偏移 像这样

实在是太不美观了 所以我们这里使用动态的left通过文本的长度来计算

/*** 计算文本宽度* @param {String|Number} text* @param {String} font* @returns {Number} width* @example getTextWidth("你好", '24px Arial')*/
export const getTextWidth = (text, font) => {var canvas = document.createElement('canvas')var context = canvas.getContext('2d')context.font = fontvar metrics = context.measureText(text)return metrics.width
}

上面代码可以计算出文本的宽度 然后圆环图距离左边的位置一般是固定的 我这里得出圆环图中心点距离容器左边框是114px 如图所示

所以最终我们可以通过计算得出

left: 114 - getTextWidth(9999, '24px Arial') / 2,

999就是你要渲染的值哈 这样就居中拉

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

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

相关文章

js之图片上传

话不多说&#xff0c;直接上干货&#xff0c;注释在代码里面 下面是效果图和代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

[算法][数字][leetcode]2769.找出最大的可达成数字

题目地址 https://leetcode.cn/problems/find-the-maximum-achievable-number/description/ 题目描述 实现代码 class Solution {public int theMaximumAchievableX(int num, int t) {return num2*t;} }

第97天:权限提升-Web 权限权限划分源码后台中间件第三方数据库等

前置知识 具体有哪些权限需要我们了解掌握的 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 以上常见权限获取方法简要归类说明 后台权限&#xff1a;SQL 注入,数据库备份泄露&#xff0c;默认或弱口…

Python | Leetcode Python题解之第104题二叉树的最大深度

题目&#xff1a; 题解&#xff1a; class Solution:def maxDepth(self, root: TreeNode) -> int:if not root: return 0queue, res [root], 0while queue:tmp []for node in queue:if node.left: tmp.append(node.left)if node.right: tmp.append(node.right)queue tmp…

Mybatis入门——其他查询操作和数据库连接池(4)

目录 一、多表查询 二、#{} 和 ${} 1、#{} 和 ${} 的使用 &#xff08;1&#xff09;Integer类型的参数 #{} 的使用 ${} 的使用 &#xff08;2&#xff09;使用String类型的参数 #{} 的使用 ${} 的使用 小结&#xff1a; 2、#{} 和 ${} 的区别 &#xff08;1&#…

太阳能语音监控杆(球机LED款)有什么用

传统监控设备依赖电力支持&#xff0c;在偏远地区和没有网络地区难以发挥其作用&#xff0c;而鼎跃安全的太阳能语音监控杆&#xff08;球机LED款&#xff09;在传统监控基础上&#xff0c;进行了全面优化&#xff0c;解决了无电无网区域使用受限的问题。 太阳能语音监控杆&am…

RSC英国皇家化学学会文献查找下载

英国皇家化学学会(Royal Society of Chemistry&#xff0c;简称RSC)是以促进全球化学领域研究发展与传播为宗旨的国际权威学术机构&#xff0c;是化学信息的一个重要宣传机关和出版商。RSC出版的期刊是化学领域的核心期刊&#xff0c;大部分被SCI和MEDLINE收录&#xff0c;如An…

腾讯云联络中心ivr调用自定义接口

1&#xff0c;java代码&#xff1a;http接口 RequestMapping(value "/getMsg5", method RequestMethod.POST) public Map<String, String> index(RequestBody Map<String, String> params) {String id params.get("id");HashMap<String…

渗透测试工具Cobalt strike-1.CS介绍与配置

Cobalt Strike是一款美国Red Team开发的渗透测试神器&#xff0c;常被业界人称为CS。最近这个工具大火&#xff0c;成为了渗透测试中不可缺少的利器。其拥有多种协议主机上线方式&#xff0c;集成了提权&#xff0c;凭据导出&#xff0c;端口转发&#xff0c;socket代理&#x…

目前无法解释的6个物理问题,每一个都困扰科学家很长时间

人类已经对宇宙有了大概的认知&#xff0c;不过即便如此&#xff0c;在宇宙中还有很多我们无法解释的物理问题&#xff0c;下面我们就一起来看看。 第一个无法解释的物理问题——虫洞真的存在吗&#xff1f; 虫洞最早是1916年由奥地利物理学家路德维希.费莱姆首次提出的&#…

登录记住密码背景颜色修改

1&#xff0c;在login.vue中&:-webkit-autofill里面的css替换成如下 &:-webkit-autofill {box-shadow: 0 0 0px 1000px $bg inset !important;-webkit-text-fill-color: $cursor !important;}

【自用题库】2024/华三/H3CNE安全GB0-510

【网工必备】华三H3CNE-安全-510 题库覆盖百分百&#xff0c;题库有291道总结汇总 还有vce加vce文件模拟真实考试环境 到手文件夹5样东西&#xff01;&#xff01;&#xff01; 认证简介&#xff1a;H3CNE-Security&#xff08;H3C Certified Network Engineer For Security&am…

6千古诗文必背名句大全ACCESS\EXCEL数据库

古诗&#xff0c;是古代诗歌的一种体裁&#xff0c;又称古体诗或古风&#xff0c;指的是产生于唐代以前并和唐代新出现的近体诗&#xff08;又名今体诗&#xff09;相对的一种诗歌体裁。其特点是格律限制不太严格。 从小我们就被教“熟读唐诗三百首,不会吟诗也会吟”&#xff…

Ubuntu20.04安装ffmpeg,并捕获视频流

工控机&#xff1a;幻影峡谷 系统&#xff1a;Ubuntu20.04 摄像头&#xff1a;杰瑞微通环星光USB摄像头 安装ffmpeg步骤 依次运行以下命令&#xff1a; sudo apt update sudo apt install ffmpeg安装完成后&#xff0c;通过运行ffmpeg -version来验证安装是否成功&#xf…

Postgresql源码(134)优化器针对volatile函数的排序优化分析

相关 《Postgresql源码&#xff08;133&#xff09;优化器动态规划生成连接路径的实例分析》 上一篇对路径的生成进行了分析&#xff0c;通过make_one_rel最终拿到了一个带着路径的RelOptInfo。本篇针对带volatile函数的排序场景继续分析subquery_planner的后续流程。 subquer…

SAM遥感图像处理开源新SOTA!在GPU上实现40倍加速,不损准确性

在遥感图像处理领域&#xff0c;通过SAM捕捉复杂图像特征和细微差异&#xff0c;可以实现高精度的图像分割&#xff0c;提升遥感数据的处理效率。这种高度的准确性让SAM遥感展现出了比传统方法更优越的性能。 不仅如此&#xff0c;这种策略灵活普适的特性还能拓展遥感技术的应…

4款让人骄傲的国产软件,功能过于强大,却被误认为是外国佬研发

说到国产软件&#xff0c;许多人可能会有“流氓软件、弹屏广告多、隐藏消费套路”等负面印象。 这种偏见导致一些功能强大、用户友好的国产软件被误认为是外国人开发的。 1、格式工厂 格式工厂是一个很实用的国产格式转换工具&#xff0c;它完全免费且没有广告&#xff0c;不…

实现echarts多图联动效果

实现echarts多图联动效果 文章目录 实现echarts多图联动效果业务场景实现关键api代码示例&#xff08;vue&#xff09; 业务场景 提示&#xff1a;主要是记录一下多个echarts联动效果实现方案 这本来就是echarts本身自带的api&#xff0c;并没有多高级&#xff0c;奈何寻找的过…

使用DockerFile 编写 指令来构建镜像

文章目录 前言使用DockerFile 编写 指令来构建镜像1. 构建2. 验证 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#x…

混合A*算法详解(二)路径平滑

描述 上一篇文章混合A*算法详解&#xff08;一&#xff09;路径搜索 路径损失函数使用Voroni势能图 根据之前的文章分析&#xff0c;决定A*路径长度的有两点&#xff1a;路径长度和距离障碍物远近。Voroni图用于权衡这两者。之前我在记录二维点云的阿尔法形状算法时简单介绍过…