Echarts 让饼图中间文字居中并自适应图表

背景:
产品提出需求在饼图中间放两行文字且居中
“简单,劈劈啪啪写完了”
产品再提出你这个没有自适应啊,屏幕放大、缩小你这个就没有居中了,甚至会和饼图重叠
“emmmmm…"

UI图如下: 在这里插入图片描述

方案一:使用tittle(不能自适应)

方案二:在series中配置label(适用图表居中的情况,我这个图表在左边不适用)

方案三:在series中再加一个type: ‘gauge’(能居中且支持自适应)

代码如下:(这里只提供了series的配置)

series: [{
          name: '设备总数',
          type: 'pie',
          radius: ['35%', '60%'],
          center: ['25%', '45%'], // 图形位置
          label: {
            show: false
          },
          selectedMode: false,
          data: data
        },
          {
            name: '中间文字',
            z: 100,
            type: 'gauge',
            radius: '-50%',
            center: ['25%', '45%'],// 需和type: 'pie'中的center一致
            // 配置中间的数字的样式
            detail: {
              // 调节数字位置
              offsetCenter: [-1,-10],
              fontSize: fontSize(18),
              fontFamily: fontFamily.fontFamily95W,
              color: 'rgba(75, 186, 233, 1)',
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            // 中间的字和数字 数据
            data: [
              {
                value: totalNum,
                name:'家居总数',
                title:{// 配置“家居总数”的样式
                  show:true,
                  fontSize: fontSize(12),
                  fontFamily: fontFamily.fontFamily65W,
                  color: 'rgba(50, 197, 255, .5)',
                  offsetCenter:[0,'-20%']
                }

              },

            ],
          },
        ]

实现后的成果图如下:

在这里插入图片描述

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

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

相关文章

Arduino 项目笔记 | Arduino LED Memory Game 颜色记忆游戏机

成果展示 颜色记忆游戏机 | Arduino DIY 1. 线路链连接 1.1 原理图 1.2 PCB 免费PCB打样 Arduino LED Memory Game 颜色记忆机资料下载 1.3 烧录 Bootloader 第二部分:Burn bootloader 2. 程序实现 #define NOTE_B0 31 #define NOTE_C1 33 #define NOT…

3.正则表达式

3.1什么是正则表达式 ●正则表达式( Regular Expression) 是用于匹配字符串中字符组合的模式。在JavaScript中, 正则表达式也是对象 ●通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式 ●正则表达式在JavaScript中的使用场景: ➢…

赛码网-triangle(dp) 100%AC代码(C)

———————————————————————————————————— ⏩ 大家好哇!我是小光,嵌入式爱好者,一个想要成为系统架构师的大三学生。 ⏩最近在准备秋招,一直在练习编程。 ⏩本篇文章对赛码网的01串的魔法 题目做…

竞赛项目 深度学习图像风格迁移

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习图像风格迁移 - opencv python 该项目较为新颖,适合作为竞赛课题…

viewerjs 如何新增下载图片功能(npm包补丁)

文章目录 先实现正常的效果实现下载图片改变viewerjs的build函数源码改变之后,执行npm i 之后node_modules源码又变回了原样 1、viwerjs所有功能都很完善,但唯独缺少了图片的下载 2、需求:在用viwerjs旋转图片后,可以直接下载旋转…

【类和对象】收尾总结

目录 一、初始化列表 1.格式要求 (1) 初始化列表初始化 ①括号中是初始值 ②括号中是表达式 (2) 初始化列表和函数体混用 2.特点 ①初始化时先走初始化列表,再走函数体 ②拷贝构造函数属于特殊的构造函数,函数内也可以使用初始化列表进行初始化 …

【c语言】指针进阶(超详细)

文章目录 ✈ 指向函数指针数组的指针📌指向函数指针数组的指针的定义📌指向函数指针数组的数组指针的使用 ✈回调函数📌 回调函数的定义📌 回调函数的使用 ✈qsort函数📌 qsort函数的作用📌qsort函数的定义…

Rikka with Square Numbers 2023“钉耙编程”中国大学生算法设计超级联赛(8)hdu7370

Problem - 7370 题目大意&#xff1a;给出两个数a&#xff0c;b&#xff0c;每次操作可以使其中一个数加上或减去一个任意的完全平方数&#xff0c;问要使a&#xff0c;b相等需要的最少操作次数是多少 1<a,b<1e9,a!b 思路&#xff1a;我们可以将问题转化为将a和b的差w…

最强的表格组件—AG Grid使用以及License Key Crack

PS: 想要官方 License Key翻到最后面 Ag Grid简介 Ag-Grid 是一个高级数据网格&#xff0c;适用于JavaScript/TypeScript应用程序&#xff0c;可以使用React、Angular和Vue等流行框架进行集成。它是一种功能强大、灵活且具有高度可定制性的表格解决方案&#xff0c;提供了丰富…

UNIX基础知识:UNIX体系结构、登录、文件和目录、输入和输出、程序和进程、出错处理、用户标识、信号、时间值、系统调用和库函数

引言&#xff1a; 所有的操作系统都为运行在其上的程序提供服务&#xff0c;比如&#xff1a;执行新程序、打开文件、读写文件、分配存储区、获得系统当前时间等等 1. UNIX体系结构 从严格意义上来说&#xff0c;操作系统可被定义为一种软件&#xff0c;它控制计算机硬件资源&…

博客项目(Spring Boot)

1.需求分析 注册功能&#xff08;添加用户操纵&#xff09;登录功能&#xff08;查询操作)我的文章列表页&#xff08;查询我的文章|文章修改|文章详情|文章删除&#xff09;博客编辑页&#xff08;添加文章操作&#xff09;所有人博客列表&#xff08;带分页功能&#xff09;…

Games101学习笔记2

参考博客&#xff1a;GAMES101 梳理 / 个人向图形学笔记_games101笔记_river_of_sebajun的博客-CSDN博客 lecture 05 Rasterization 1(Triangles) 光栅化 把东西画在屏幕上的过程就是光栅化的过程 视口变换 为什么模型用三角形&#xff1f; 最基本的几何平面&#xff1b;保…

matplotlib fig.legend()常用参数 包括位置调整和字体设置等

一、四种方法 legend() legend(handles, labels) legend(handleshandles) legend(labels)1 legend() labels自动通过绘图获取&#xff08;Automatic detection of elements to be shown in the legend&#xff09; # 第一种方法 ax.plot([1, 2, 3], labelInline label) ax.l…

JVM、JRE、JDK三者之间的关系

JVM、JRE和JDK是与Java开发和运行相关的三个重要概念。 再了解三者之前让我们先来了解下java源文件的执行顺序&#xff1a; 使用编辑器或IDE(集成开发环境)编写Java源文件.即demo.java程序必须编译为字节码文件&#xff0c;javac(Java编译器)编译源文件为demo.class文件.类文…

力扣:59. 螺旋矩阵 II(Python3)

题目&#xff1a; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全…

日期切换

组件&#xff1a;<template><div class"time-picker"><el-radio-group size"small" v-model"timeType" change"changePickerType"><el-radio-button label"hour" v-if"isShow">时</el…

Open_PN笔记

>>>仅用作学习用途 1.准备好需要用到的工具 官网下载地址&#xff1a; openvpn 客户端下载地址&#xff1a; https://swupdate.openvpn.org/community/releases/openvpn-install-2.4.5-I601.exe EasyRSA下载地址&#xff1a; https://githu…

Koan自动重装和Cobbler_web

Koan是Cobbler的辅助工具&#xff0c;可以实现很多功能&#xff0c;使用koan配合Cobbler可以实现快速重装Linux系统&#xff1a; 1、安装koan&#xff1a; yum install -y epel-releaseyum install -y koan 安装截图&#xff1a; 2、在客户机上&#xff0c;用koan选择要重装的…

可以重复烧写的语音ic有哪些特征和优势

目录 一、简介可擦写的语音芯片&#xff0c;其实就是MCUflash的架构&#xff0c;无其他说法&#xff0c;就这一种说法。这个就是它最大的特征尤其是SOP8的封装类型的芯片&#xff0c;是区别于OTP类型的另一个品类&#xff0c;基本上OTP的语音芯片适用的场景。他都可以满足和替代…

文件系统目录结构

1. 目录结构 linux的文件系统是采用级层式的树状目录结构&#xff0c;在此结构中的最上层是根目录/ &#xff0c;然后在此目录下再创建其他的目录。 在linux中&#xff0c;一切皆文件(Linux将所有的设备、文件、进程等都当做文件来处理) 2. 目录作用具体介绍 目录名解析/b…