echarts修改饼图,环形图的圆环宽度,大小

news2024/9/30 23:25:27

echarts修改环形图的圆环宽度,大小

环形图圆环的大小需要通过series-pie. radius属性来修改

radius 饼图的半径。

Array.<number|string>:数组的第一项是内半径,第二项是外半径。每一项遵从上述 number string 的描述。

把数组的第一项即内半径设为0,则图表为饼图,如下:

在这里插入图片描述

内半径设为大于0的值,图表即显示成圆环图(Donut chart)。如下:

在这里插入图片描述

当然如果修改了外半径的大小,比如小于100%,图表就会显得小很多,也就是窄很多,如下:

在这里插入图片描述
所以,如果想修改柱状图的圆环宽度,可以通过修改内半径和外半径的大小来实现。

option = {
  legend: {
    orient: "vertical",
    left: "left",
    data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
  },
  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }, {
      value: 234,
      name: "Pineapples"
    }, {
      value: 135,
      name: "Oranges"
    }, {
      value: 1548,
      name: "Bananas"
    }],
    radius: ["35%", "45%"] // 这个属性修改圆环宽度
  }]
}

如果想方便布局,可以把外边距设为100%,通过调整内边距大小来修改圆环宽度。

注意:radius是饼图的半径。假设,div的高度为100px,如果我们把radius设置为100%,那么整个饼图的直径也就是长和高就是200px了,这一点在布局的时候千万要注意。

基于此,我们可以把radius的外半径设置为50%,这样整个饼图的高度就是div的高度了。

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

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

相关文章

前端高频面试题—JavaScript篇(四)

&#x1f4bb; 前端高频面试题—JavaScript篇&#xff08;四&#xff09;&#x1f3e0;专栏&#xff1a;前端面试题 &#x1f440;个人主页&#xff1a;繁星学编程&#x1f341; &#x1f9d1;个人简介&#xff1a;一个不断提高自我的平凡人&#x1f680; &#x1f50a;分享方向…

150家半导体企业IPO最新进展(附企业名录)

前言 根据Omdia的数据显示&#xff0c;2022年全球在第一季度、第二季度、第三季度实现的半导体收入分别为1593亿美元、1581亿美元、1470亿美元&#xff0c;分别环比下降0.03%、1.9%、7.0%。 目前&#xff0c;半导体产业链经历了自2022上半年的欣欣向荣&#xff0c;到2022年下半…

万字长文掌握Python高并发

文章目录0 前言1 并发、并行、同步、异步、阻塞、非阻塞1.1 并发1.2 并行1.3 同步1.4 异步1.5 阻塞1.6 非阻塞2 多线程2.1 Python线程的创建方式2.1.1 方式一2.1.2 方式二 继承Thread2.1.3 通过线程池创建多线程2.2 聊聊GIL2.2.1 Python线程与操作系统线程的关系2.3 线程同步2.…

【CICD】Jenkins 部署 Docker 容器形态的后端服务

在实现 Jenkins 构建部署前端项目之后&#xff0c;逐渐对使用 Jenkins 部署后端服务有了一定兴趣&#xff1b;总体流程没有什么很大的变化&#xff0c;不过是后端服务需要以 Docker 的形式进行启动&#xff0c;在此记录一下具体过程&#xff08;部分过程与构建部署前端相同不做…

windows下载安装jdk1.8(jdk8)基础篇

一、前言 目前jdk最高升级到JDK19版本了&#xff0c;但是大部分应用系统都是用的1.8&#xff0c;对于初学者来说&#xff0c;也需要下载安装这个版本的jdk。 二、下载安装步骤 一、我已经下载下来&#xff0c;大家到【我的下载目录】下载&#xff0c;密码3360&#xff0c;分…

使用Benchto框架对Trino进行SQL性能对比测试

有时需要对魔改源码前后的不同版本Trino引擎进行性能对比测试&#xff0c;提前发现改造前后是否有性能变差或变好的现象&#xff0c;避免影响数据业务的日常查询任务性能。而Trino社区正好提供了一个性能测试对比框架&#xff1a;GitHub - trinodb/benchto: Framework for runn…

金额大写转换

金额大写转换&#xff08;C语言 &#xff09; 本人喜欢探索各种算法。见站内好多此类文章&#xff0c;有些很好&#xff0c;有些不完整。姑且也来凑下热闹。 金额大写应用在很多方面&#xff0c;如支票、发票、各种单据&#xff0c;各种财务凭证&#xff0c;合同文本金额部分。…

【逐步剖C】-第七章-数据的存储

一、数据类型介绍 1. C语言基本内置类型&#xff1a; char //字符数据类型 short //短整型 int //整形 long //长整型 long long //更长的整形 float //单精度浮点数 double //双精度浮点数2. 类型的基本归类 &#xff08;1&#xff09;整型&#xff1a; charunsign…

c语言指针

指针 指针是存放地址的变量&#xff0c;也可以说指针地址。 对于定义p&#xff08;这里的话&#xff0c;只是定义&#xff0c;说明p是指针&#xff09;&#xff0c;p作为一个指针去指向存放数据的位置&#xff0c;而p意思是取&#xff08;p指向的内存位置的数据&#xff09;&…

es启动,浏览器无法访问9200

通过brew成功启动es&#xff0c;但是访问http://localhost:9200/报错&#xff0c;连接被拒绝 %:brew services start elasticsearch-full> Successfully started elasticsearch-full (label: homebrew.mxcl.elasticsearc可能原因如下&#xff1a; 1、安装java 要先安装ja…

聊聊async/await原理

前言 我们知道Promise的出现极大地解决了回调地狱&#xff0c;但是如果使用流程非常复杂的话&#xff0c;就非常容易过多地调用Promise的then()方法&#xff0c;这样也不利于使用和阅读。 例如&#xff1a;我希望在请求 www.baidu.com 后输出请求的结果&#xff0c;再去请求 …

【基于腾讯云的远程机械臂小车】

1. 项目来源 项目源码地址&#xff1a;https://gitcode.net/VOR234/robot_arm_car/-/blob/master/TencentOS-tiny123.zip https://gitee.com/vor2345/robot_arm_car 程序分别 视频演示&#xff1a;https://www.bilibili.com/video/BV15M4y1D7MD/?vd_source530bf85167de80ff…

46.在ROS中实现global planner(2)

前文实现了一个global planner的模板&#xff0c;并且可以工作&#xff0c;本文将实现astar算法&#xff0c;为后续完成一个astar global planner做准备 1. AStar简介 1.1 AStar Astar算法是一种图形搜索算法,常用于寻路。Astar算法原理网上可以找到很多&#xff0c;简单的说…

企业/品牌新闻稿怎么写?

撰写出优质的企业/品牌新闻稿对于任何一个希望通过新闻媒体推广自己品牌的公司来说都是十分重要的。在新闻稿中&#xff0c;您可以通过介绍自己的公司&#xff0c;披露最新的产品和服务信息以及宣传最新的成就来吸引媒体和读者的关注。下面是一些关于如何撰写出优质的企业/品牌…

【工具篇】Firmwalker车联网实用小工具介绍

前言 firmwalker这个小工具在工作中也一直在用&#xff0c;正好领导说要写一篇这个工具的分析说明文章&#xff0c;经过询问可以发表博客。由于一直在用&#xff0c;所以末尾优劣势部分存在一些主观想法。 编写不易&#xff0c;如果能够帮助到你&#xff0c;希望能够点赞收藏加…

SpringCloud, SpringCloud-Alibaba,Nacos概述

目录 SpingCloud概述 1.SpringCloud是什么? 2.SpringCloud和SpringBoot的关系 3.SpringCloud-Alibaba概述 3.1.Netflix公司项目进入维护模式 3.2.Spring Cloud Alibaba是什么&#xff1f; 3.3.Spring Boot和Spring Cloud的版本号说明 3.Nacos总结 SpingCloud概述 1.Spri…

蓝桥杯刷题——基础篇(一)

这部分题目&#xff0c;主要面向有志参加ACM与蓝桥杯竞赛的同学而准备的&#xff0c;蓝桥杯与ACM考察内容甚至评测标准基本都一样&#xff0c;因此本训练计划提供完整的刷题顺序&#xff0c;循序渐进&#xff0c;提高代码量&#xff0c;巩固基础。因竞赛支持C语言、C、Java甚至…

【JAVA八股文】算法、数据结构、基础设计模式

算法、数据结构、基础设计模式1. 二分查找2. 冒泡排序3. 选择排序4. 插入排序5. 希尔排序6. 快速排序7. ArrayList8. Iterator9. LinkedList10. HashMap1&#xff09;基本数据结构2&#xff09;树化与退化3&#xff09;索引计算4&#xff09;put 与扩容5&#xff09;并发问题6&…

从lettcue插件看skywalking

lettcue 的写操作是异步的。io.lettuce.core.RedisChannelWriter.write进行写入&#xff0c;io.lettuce.core.protocol.RedisCommand进行异步读取数据 skywalking 插件大体逻辑 在方法执行前&#xff0c;通过ContextManager创建span创建span的同时&#xff0c;判断trace上下文…

零信任-Akamai零信任介绍(6)

​Akamai零信任介绍 Akamai是一家专注于分布式网络服务的公司&#xff0c;它提供了一系列的互联网内容和应用加速服务。关于Akamai的零信任&#xff0c;它指的是Akamai的安全架构中不存在任何一个环节是可以被单独的控制或影响的&#xff0c;因此可以提供更高的安全性。通过使…