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

news/2024/7/14 17:55:09/文章来源:https://blog.csdn.net/weixin_44177413/article/details/139271108

像上图中这样圆环图并不在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.luyixian.cn/news_show_1054547.aspx

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

相关文章

【好书分享第十三期】AI数据处理实战108招:ChatGPT+Excel+VBA

文章目录 一、内容介绍二、内页插图三、作者简介四、前言/序言五、目录 一、内容介绍 《AI数据处理实战108招:ChatGPTExcelVBA》通过7个专题内容、108个实用技巧,讲解了如何运用ChatGPT结合办公软件Excel和VBA代码实现AI办公智能化、高效化。随书附赠了…

代码随想录算法训练营第36期DAY43

DAY43 343整数拆分 注意:当几个数的数值相近,乘积才会尽可能地大(好想:数一大一小,最大当然是自己乘以自己) 代码随想录官方题解: class Solution {public: int integerBreak(int n) { …

【Vue】input框自动聚焦且输入验证码后跳至下一位

场景&#xff1a;PC端 样式&#xff1a; <div class"verification-code-input"><input v-model"code[index]" v-for"(_, index) in 5" :key"index" type"text" maxlength"1" input"handleInput(i…

Centos7时区设置及手动修改时间

一、修改系统时区 1、查看时区命令 timedatectl 2、设置时区命令 #下面将时区设置为上海时区 timedatectl set-timezone Asia/Shanghai 3、查看时区看一下新时区有没有生效 timedatectl 二、手动修改系统时间 修改系统时间 date -s "2023-12-25 16:05:10" 查…

【易错题】数据可视化基础练习题(30道选择题)#CDA Level 1

本文整理了数据可视化基础知识相关的练习题&#xff0c;共30道&#xff0c;适用于想巩固数据可视化知识的同学&#xff0c;也可作为备考CDA一级的补充习题。来源&#xff1a;如荷学数据科学题库&#xff08;技术专项-可视化&#xff09;。 1&#xff09; 2&#xff09; 3&…

【AI大模型】如何让大模型变得更聪明?基于时代背景的思考

【AI大模型】如何让大模型变得更聪明 前言 在以前&#xff0c;AI和大模型实际上界限较为清晰。但是随着人工智能技术的不断发展&#xff0c;基于大规模预训练模型的应用在基于AI人工智能的技术支持和帮助上&#xff0c;多个领域展现出了前所未有的能力。无论是自然语言处理、…

【ORB_SLAM系列3】—— 如何在Ubuntu18.04中使用自己的单目摄像头运行ORB_SLAM3(亲测有效,踩坑记录)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、ORB_SLAM3源码编译二、ORB_SLAM3实时单目相机测试1. 查看摄像头的话题2. 运行测试 三. 运行测试可能的报错1. 报错一(1) 问题描述(2) 原因分析(3) 解决 2. …

工控一体机7寸显示器电容触摸屏(YA131607JK)产品规格说明书

如果您对工控一体机有任何疑问或需求&#xff0c;或者对如何集成工控一体机到您的业务感兴趣&#xff0c;可移步控芯捷科技。 一、硬件功能介绍 YA131607JK产品介绍&#xff1a; YA131607JK 搭载 Android10 主流操作系统&#xff0c;具有系统版本更高、占用内存更低、运行效率…

HTML-JavaWeb

目录 1.标题排版 2.标题样式 ​编辑 ​编辑 小结 3.超链接 4.正文排版 ​编辑​编辑​编辑5.正文布局 6.表格标签 7.表单标签 8.表单项标签 1.标题排版 ● 图片标签 :< img> src:指定图像的ur1(绝对路径/相对路径) width:图像的宽度(像素/相对于父元素的百…

linux开发之设备树五、设备树描述中断实践

设备树是基于设备总线模型的&#xff08;platform&#xff09; 1、添加节点 假设中断引脚为&#xff1a;GPIO0_B5 下面使用设备树来描述它 1、写节点&#xff0c;起节点名字 这里用了ft5x06的触摸芯片&#xff0c;然后I2C的地址为38 2、为节点添加属性 首先添加compatible…

抖店除了商品卡流量还有什么流量?

我是王路飞。 随着抖音开放商品卡流量&#xff0c;它一度成为去年最大热的玩法。 包括到现在&#xff0c;还有很多新手对其有一种莫名的信任感&#xff0c;只想做商品卡流量。 那么抖店除了商品卡流量还有什么流量玩法呢&#xff1f;哪种比较容易出单呢&#xff1f; 今天就…

Facebook:连接世界,畅游社交之旅

作为全球最大的社交平台之一&#xff0c;Facebook不仅仅是一个网站&#xff0c;更是一个连接世界的桥梁&#xff0c;让人们可以轻松地与全球各地的朋友、家人和同事保持联系&#xff0c;分享生活、交流想法&#xff0c;畅游社交的无边界之旅。本文将带领读者探索Facebook的魅力…

【问题解决】pycharm中添加python interpreter报错 conda excutable is no found

选择安装目录下的conda.bat文件&#xff0c;然后点击“Load Environments”按钮&#xff0c;然后在列表中选择conda环境即可。

C++笔记:Hash Function 散列函数

1. Hash Function 散列函数 简单的Hash实现&#xff1a; class CustomerHash { public:size_t operator()(const Customer& c) const {return hash<std::string>()(c.fname) // first namehash<std::string>()(c.lname) // last namehash<long>()(…

嵌入式学习记录5.18(多点通信)

一、套接字属性设置相关函数 #include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen);int setsockopt(int sockfd, int level, int optname,const void *op…

量化交易入门:如何在QMT中配置Python环境,安装第三方依赖包

哈喽,大家好,我是木头左! 引言 QMT,作为量化交易系统中的佼佼者,以其强大的功能和灵活的操作性,受到了广大投资者的青睐。但是,对于很多新手来说,如何在QMT中配置Python环境,安装第三方依赖包,却是一个让人头疼的问题。本文将从零开始,手把手教你如何在QMT中配置Py…

股票交易vip快速通道有什么门槛?vip交易通道的开通流程!

证券公司的VIP通道通常是为了满足高端客户或高频交易客户的需求而设立的&#xff0c;提供更快速、更便捷的交易服务。证券公司VIP通道适用于有追涨停板需求的投资者&#xff0c;以及一些喜爱高频交易的投资者&#xff0c;总的来说就是快速&#xff0c;在交易主机排队靠前。 VI…

MySQL8报错Public Key Retrieval is not allowedz 怎么解决?

问题描述 当我们使用数据库管理工具连接mysql8的时候&#xff0c;可能遇到报错&#xff1a; Public Key Retrieval is not allowed 解决办法 1、在连接属性中配置allowPublicKeyRetrieval设置为true 2、在连接URL中加上配置allowPublicKeyRetrieval为true

Discourse 编辑没有办法显示更多的 JS 错误

Priority/Severity: High Platform: 3.3.0.beta3-dev UI bugs Description: 昨天升级的时到最新版本的时候就发现有这个错误&#xff0c;是 JS 的错误。 发了一个帖子到官方的网站上&#xff0c;官方说可能是插件的问题。 但是我们实在是没有安装什么插件呀&#xff1f; 官方…

uniapp一些问题解决

1.按钮边框如何去除&#xff1f; 参考博主&#xff1a;微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app&#xff0c;顺便自己写个小程序。左上角放了个button&#xff0c;可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要…