Echarts设置环形图中心文字

news2024/12/28 19:30:37

方式一:title

通过在最外层设置title 配置项

title 同时也是环形图标题的配置项,只是通过left和top强制让其移动到环形图中间位置;提前设置好环形图

title: {
  // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
  // 例如: `示例
  //   这里的文字会变为第二行(因为会保留格式)
  text: '文字',  
  left: "center",//对齐方式居中
  top: "45%",//距离顶部
  textStyle: {//文字配置
    color: "rgb(50,197,233)",//文字颜色
    fontSize: 15,//字号
    align: "center"//对齐方式
  }
}

方式二:graphic

如果环形图位置上下左右都是默认值:也就是都居中;那么,使用该定位其位置也设置为center,中心文字和环形图都居中,效果很好

//  部分代码
graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "center",
            style: {
              text: `总数 ${this.ring6}`,
              textAlign: "center",
              fill: "#1E7CE8", //文字的颜色
              fontSize: 20,
              lineHeight: 20,
            },
          },
        ],
        // 数据
        series: [
          {
            type: "pie",
            // 饼图的半径,单个值指的就是一个饼图的半径,而数组则指的是多个图的半径
            radius: ["40%", "60%"],
            // 图形的中心坐标,第一个是横坐标,第二个是纵坐标,默认值都是50,50
            center: ["50%", "50%"],
          },
        ],

效果图:

image-20231121102822080

但是,如果环形图位置不是居中的,也就是相比于默认值而言发生了偏移,那么,graphic中也需要手动的进行配置才行;因为写死了偏移量,所以会存在中心文字长度发生变化后就对不齐环形图的情况,一旦出现对不齐,就需要手动修改graphic的位置偏移量;就很麻烦

中心文字长度发生变化;例如举例中的:总数 ${this.ring6};如果this.ring6最开始的值是8,那么把 总数 8 对齐了,如果几天后用户量激增,当日新增用户总数达到 888 ,那么,此时的 总数 888 很大概率就不在环形图中间了吧,那么,这时候就需要去手动修改graphic 的偏移量了。[手动狗头]

因此如果使用这种方式的话,最好环形图和graphic 的位置都使用默认值,就不会出现刚刚所述的问题。无论中心文字如何变,至少都会默认在环形图中居中显示

//  部分代码------  一旦不居中,就需要修改代码,嗯,烦得要命;
graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "47%",
            top: "51%",
            style: {
              text: `总数 ${this.ring6}`,
              textAlign: "center",
              fill: "#1E7CE8", //文字的颜色
              fontSize: 20,
              lineHeight: 20,
            },
          },
        ],
        // 数据
        series: [
          {
            type: "pie",
            // 饼图的半径,单个值指的就是一个饼图的半径,而数组则指的是多个图的半径
            radius: ["40%", "60%"],
            // 图形的中心坐标,第一个是横坐标,第二个是纵坐标,默认值都是50,50
            center: ["56%", "52%"],
          },
        ],

方式三:label

通过series里面的label属性

// A code block
 label: {
             position: 'center',
             show: true,
             formatter:function(){
                 let str = '{a|'+ count+'}' + '\n\n' +'{b|总数}'
                 return str
             },
             rich:{
                 a:{
                     color:'#333333',//a、b不设置颜色的话,字体颜色就会是饼图颜色的混合色
                     fontSize:'16',
                 },
                 b:{
                     fontSize:'14',
                     color:'#333333',
                 }
             }
         },

通过这种方式确实可以达到效果,但是,label的主要目的是用来配置环形图提示信息的,而不是用来配置环形图中心文字的,而且如果使用这种方式,那么,环形图中心文字和环形图各部分的提示信息是不能同时存在的,如果强行把label写成数组形式,把提示信息加上去,那么,提示信息就会和中心文字一起在环形图中心层叠显示

如果对提示信息没有显示需求,这也不失为一个方法

image-20231121104638154
终上所述,目前为止最理想方式就是使用默认位置的方式二;也许是我对其他两种方式理解不深入,但现在看来其余两种方式相当于是强行赶鸭子上架,不是正规解法

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

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

相关文章

ros2工作空间

我们先不管ros2工作空间是什么样子的,如果是我自己来搞一个工作空间,我一定是这样安排 一个文件夹用来放自己存放的文件,。。。。。。。。。。对应src文件夹 一个文件夹用来放编译后的文件,。。。。。。。。。。。对应intall文件…

U4_1:图论之DFS/BFS/TS/Scc

文章目录 一、图的基本概念二、广度优先搜索(BFS)记录伪代码时间复杂度流程应用 三、深度优先搜索(DFS)记录伪代码时间复杂度流程时间戳结构BFS和DFS比较 四、拓扑排序一些概念有向图作用拓扑排序 分析伪代码时间复杂度彩蛋 五、强…

OpenAI一朝领导者山姆·奥尔特曼被解除职务,领导能力不再被认可?

原创 | 文 BFT机器人 在11月17日,OpenAI Inc.宣布CEO山姆奥尔特曼 (Sam Altman) 离职。掌舵人发生重大转变,董事会却在这个时候将公司首席技术官 Mira Murati推举为临时首席执行官,这一操作顿时引起了热议。 这突如其来的变化标志着OpenAI的…

C++实战学习笔记

文章目录 erase()uniquevector的insert()std::string::npos erase() (1)erase(pos,n); 删除从pos开始的n个字符,比如erase(0,1)就是删除第一个字符 (2)erase(position);删除position处的一个字符(position是个string类…

element表格分页+数据过滤筛选

目录 前言效果展示分页效果展示搜索效果展示 代码分析分页功能过滤数据功能 全部代码 前言 在el-element的标签里的tableData数据过多时,会导致表格页面操作卡顿。为解决这一问题,有以下解决方法: 分页加载: 将大量数据进行分页&…

Android File Transfer(安卓文件传输工具)

Android File Transfer 是一款安卓文件传输工,它允许在Mac操作系统和Android设备之间进行文件传输。 该软件通过USB连接将文件从Mac电脑传输到连接的Android设备,或者反过来从Android设备传输文件到Mac电脑。这包括照片、视频、音乐、文档和其他文件类型…

最新企业服务总线ESB的国内主要厂商和开源厂商排名,方案书价格多少

企业服务总线ESB是什么? ESB平台(企业服务总线,Enterprise Service Bus)是一种企业级集成平台,它提供了一种开放的、基于标准的消息机制,通过简单的标准适配器和接口,来完成粗粒度应用&#xff…

Qt程序打包成.exe可执行文件

1.使用Release进行编译 2.找到编译成功的地址: 找到对应的目录 3.把SerialTool.exe文件单独复制到一个文件夹,这里我直接在桌面创建一个SerialTool文件夹,这时候直接运行是不行的,我们需要把库都导进去 4. 在安装目录找到如下这个文件,点击打开,找到你电脑对应的版本即可,我这…

数据仓库:架构之详解Kappa和Lambda

目录 一、前言 二、架构详解 1 Lambda 架构 1.1 Lambda 架构组成 1.2 Lambda 特点 1.3 Lambda 架构的优点 1.4 Lambda 架构的不足 2 Kappa 架构 2.1 Kappa 架构的核心组件 2.2 Kappa 架构优点 2.3 Kappa 架构的注意事项 三、区别对比 四、选择时考虑因素 一、前言 …

录屏软件自动开启录视频,是如何实现的?

工作要留痕,作为职场人的一项必备技能,因此许多人在做一些重要操作的时候,就会提前开启录屏软件,把操作的每一个步骤进行录制,以避免在出现问题的时候进行检查。当每天都需要在固定的时间点重复某项工作的时候&#xf…

【AI实用技巧】GPT写sql统计语句

编写sql的统计语句是一项复杂的任务,特别是涉及多表的情况下。但有了GPT的帮助,一切变得轻松愉快。 AI7号 - 最强人工智能(GPT)中文版https://ai7.pro/s/9v2um 举例说明 有表结构如下: users(user_id, name) bills(…

家具生产ERP有哪几种?如何选择家具生产ERP

不同种类的家具产品有差异化的原材料和制造工艺,每道生产工艺又有不同的管理模式和难点,有些家具生产企业内部还存在各个业务环节信息传递不畅、财务核算不清、不能实时获取库存动态数据等情况。 形成对比的则是部分家具生产企业引入ERP系统完成数字化全…

「C++」虚函数与多态

💻文章目录 📄前言虚函数概念虚函数重写虚函数的协变 重载、覆盖(重写)、隐藏(重定义)的对比 多态多态的概念多态的定义与实现多态的类型多态的构成条件抽象类 多态的原理虚函数表 多继承中的虚函数表 &…

数字化转型背景下,企业如何做好知识管理?

在当今数字化转型的时代,企业面临着日益复杂和快速变化的商业环境。知识管理成为了企业成功的关键之一。有效地管理和利用知识资源可以提升企业的创新能力、决策质量和竞争力。以下我列了一些关键的点,讲讲在数字化转型背景下,企业如何可以做…

21款奔驰GLE350升级香氛负离子车载香薰

香氛负离子系统是由香氛系统和负离子发生器组成的一套配置,也可以单独加装香氛系统或者是负离子发生器,香氛的主要作用就是通过香氛外壳吸收原厂的香水再通过空调管输送到内饰中,而负离子的作用就是安装在空气管中通过释放电离子来打击空气中…

浪潮信息云峦服务器操作系统KeyarchOS体验与实践

写在前面 大家好我是网络豆,一名云计算运维人员,本文将会带大家体验一下浪潮信息服务器操作系统云峦KeyarchOS。看看浪潮信息服务器操作系统云峦KeyarchOS的优势与实践操作如何。 背景了解 KeyarchOS是浪潮信息基于Linux Kernel、OpenAnolis等开源技术…

【Python测试开发】:切换窗口和表单

一、多窗口切换 浏览器打开的窗口其实会有一个叫做句柄的概念。 句柄就类似于每一个标签页的ID一样,具有唯一性。 1.1 语法 获取当前窗口句柄,注意后面没有括号哦~ driver.current_window_handle获取所有窗口句柄,结果以列表格式存储&am…

『亚马逊云科技产品测评』活动征文|开发一个手机官网

『亚马逊云科技产品测评』活动征文|开发一个手机官网 授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 前言 …

java系列之 页面打印出 [object Object],[object Object]

我 | 在这里 🕵️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 🏠 工作 | 广州 ⭐ Java 全栈开发(软件工程师) 🎃 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲 🏷️ 标签 | 男 自律狂人 目标明确 责任心强 ✈️公…

心梗救治日:我希望他们都能活着到急诊

点击文末“阅读原文”即可参与节目互动 后期 / 朱峰 监制 / 姝琦 运营 / 卷圈,Sand 封面 / 姝琦midjourney 产品统筹 / bobo 场地支持 / 声湃轩北京录音间 联合制作 / 美国心脏协会 当意外发生,这期节目可能会让你从手足无措,变成应对有序。 …