echarts饼图扇形之间设置间距

查看文档以及网上查找,都是将边框颜色设置成和背景色一样,但是当背景是图片的时候就不适用了,试了很多方式都不理想,没办法只能从数据上下手了,最终效果如下图,

在这里插入图片描述

思路:将list中的数据每一条后面插入一条数据,数量根据总量计算,颜色为透明,处理如下

// 原始数据和颜色
const  list = [...]
const color = [...]
// 计算插入的数据的值,更改100的数值调整间距的大小
let gap = (list.reduce((a, b) => a + Number(b.ValueAmount), 0) || 0) / 100;// 重新组织数据
const newlist = []
list.forEach((f, fi) => {newlist .push({name: f.TypeName,value: f.ValueAmount,label: { color: color[fi] },itemStyle: { color: color[fi] }});// 插入一条新的颜色透明的数据用来占位newlist .push({name: "",value: gap, label: { color: "rgba(0, 0, 0, 0)" },itemStyle: { color: "rgba(0, 0, 0, 0)" }})
})

完整代码

<div id="container" style="width: 100%;height: 100%"></div><script>
function echart(list) {var myChart = echarts.init(document.getElementById('container'));var option = {series: [{type: 'pie',radius: ['40%', '70%'],data: list,selectedMode: 'single',}]};myChart.setOption(option);return myChart
}// 原始数据和颜色
const  list = [{TypeName: "会员增值", ValueAmount: 100},{TypeName: "平台消费", ValueAmount: 200},{TypeName: "推广奖励", ValueAmount: 300},{TypeName: "会员任务", ValueAmount: 40},{TypeName: "其它", ValueAmount: 20 },
]
const color = ['#663829', '#8C4932', '#B3593B', '#D96A44', '#FF7A4D',]
// 计算插入的数据的值
let gap = (list.reduce((a, b) => a + Number(b.ValueAmount), 0) || 0) / 100;// 重新组织数据
const newlist = []
list.forEach((f, fi) => {newlist .push({name: f.TypeName,value: f.ValueAmount,label: { color: color[fi] },itemStyle: { color: color[fi] }});// 插入一条新的颜色透明的数据用来占位newlist .push({name: "",value: gap, label: { color: "rgba(0, 0, 0, 0)" },itemStyle: { color: "rgba(0, 0, 0, 0)" }})
})echart(newlist )
</script>

以上为临时解决方案,如有更好的方法,可以一起交流下

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

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

相关文章

理解BeEF的架构

BeEF的组件和工作原理BeEF&#xff08;The Browser Exploitation Framework&#xff09;是一款用于浏览器渗透测试和漏洞利用的强大工具。它由多个组件组成&#xff0c;这些组件协同工作以实现对受害者浏览器的控制和攻击。本文将深入探讨BeEF的各个组件和其工作原理&#xff0…

区域和检索算法(leetcode第303题)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;处理以下类型的多个查询:计算索引 left 和 right &#xff08;包含 left 和 right&#xff09;之间的 nums 元素的 和 &#xff0c;其中 left < right 实现 NumArray 类&#xff1a;NumArray(int[] nums) 使用数组…

AndroidStudio使用配置详解

见&#xff1a;GitHub - eHackyd/AndroidStudio: AndroidStudio的各种使用配置说明

将mavros仓库上传到gitee,用于二次开发

以mavros为例&#xff08;mavlink同理&#xff09; 按照官网repo提供的安装方法&#xff08;参考&#xff1a;mavros源码安装与配置&#xff09;&#xff0c;将mavros相关的软件包下载到本地&#xff0c;考虑到后面要进行二次开发&#xff0c;所以打算在gitee上做一个备份。同时…

干货教学!!!RHEL8中ansible中常用模块的使用

内容很长各位大老爷耐心观看 本章主要介绍ansible中最常见模块的使用 文件管理模块软件包管理模块服务管理模块磁盘管理模块用户管理模块防火墙管理模块 ansible的基本用法如下 ansible 机器名 -m 模块x -a “模块的参数” 对被管理机器执行不同的操作&#xff0c;只需要调…

【深度学习】Sentence Embedding-BERT-Whitening

前言 flow模型本身很弱&#xff0c;BERT-flow里边使用的flow模型更弱&#xff0c;所以flow模型不大可能在BERT-flow中发挥至关重要的作用。反过来想&#xff0c;那就是也许我们可以找到更简单直接的方法达到BERT-flow的效果。 BERT-whitening则认为&#xff0c;flow模型中涉及到…

C语言第五十三弹----模拟使用strncmp函数

使用C语言模拟使用strncmp函数 trncmp 是一个 C 语言标准库函数&#xff0c;用于比较两个字符串的前 n 个字符是否相等。它的函数声明为&#xff1a; int strncmp(const char *str1, const char *str2, size_t n);其中&#xff0c;str1 和 str2 是要被比较的两个字符串&#…

AWS 知识一:如何在AWS上启动云AD服务器(详细到极致)

前言&#xff1a; 首先这里指的云AD服务器&#xff0c;只是为了让读友更好理解。云AD服务器在AWS中称为目录。AWS一共提供了4种目录类别&#xff0c;下面我将全程使用AWS托管微软AD这种目录类别进行示例。他完全提供了和Microsoft AD的功能&#xff0c;包括NTLM&#xff0c;Ker…

欧洲版OpenAI疑似将在24年发布并开源GPT-4级别模型!

大家好&#xff0c;我是二狗。 今天在推特上看到一条振奋人心的消息&#xff1a; “ 欧洲版OpenAI、法国初创公司 Mistral 首席执行官 Arthur Mensch 在法国国家广播电台宣布&#xff0c;Mistral 将在 2024 年发布开源 GPT-4 级别模型。” 这位老哥接着表示甚至可能是免费的&a…

传统软件集成AI大模型——Function Calling

传统软件和AI大模型的胶水——Function Calling 浅谈GPT对传统软件的影响Function Calling做了什么&#xff0c;为什么选择Function CallingFunction Calling简单例子&#xff0c;如何使用使用场景 浅谈GPT对传统软件的影响 目前为止好多人对chatGPT的使用才停留在OpenAI自己提…

数据可视化---箱线图

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…

【MySQL】数据库和表的操作

数据库和表的操作 一、数据库的操作1. 创建数据库2. 字符集和校验规则&#xff08;1&#xff09;查看系统默认字符集以及校验规则&#xff08;2&#xff09;查看数据库支持的字符集&#xff08;3&#xff09;查看数据库支持的字符集校验规则&#xff08;4&#xff09;校验规则对…

RabbitMQ 基础

1.初识RabbitMQ 1.1.同步调用 我们现在基于OpenFeign的调用都属于是同步调用&#xff0c;那么这种方式存在哪些问题呢&#xff1f; 拓展性差性能下降级联失败 而要解决这些问题&#xff0c;我们就必须用异步调用的方式来代替同步调用。 1.2.异步调用 异步调用方式其实就是基…

EG网关网口连接MCGS触摸屏应用案例

EG网关网口连接MCGS触摸屏应用案例 前言&#xff1a;MCGS触摸屏广泛应于工业控制领域&#xff0c;是一款性能高&#xff0c;运行稳定的人机交互设备。此次我们要把MCGS的TPC7062系列触摸屏通过Modbus协议连接EG系列网关&#xff0c;将数据传输到EMCP物联网云平台&#xff0c;实…

算法训练第四十二天|卡码网46. 携带研究材料、416. 分割等和子集

46. 携带研究材料&#xff1a; 题目链接 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等等&#xff0c;它们…

马云笔下的AI电商时代,到底长啥样?

前两天&#xff0c;马云“惊现”阿里内网&#xff0c;正面回应拼多多市值接近阿里巴巴。 AI电商时代刚刚开始&#xff0c;对谁都是机会&#xff0c;也是挑战。要祝贺pdd过去几年的决策&#xff0c;执行和努力。谁都牛x过&#xff0c;但能为了明天后天牛而改革的人&#xff0c;…

页面置换算法详解专题

页面置换算法的功能是&#xff1a;当缺页中断发生&#xff0c;需要调入新的页面而内存已满时&#xff0c;选择内存当中哪个物理页面被置换~ 页面置换算法的目的&#xff1a;尽可能地减少页面的换进换出次数&#xff08;既缺页中断的次数&#xff09;。具体来说&#xff0c;把未…

论文笔记:Bilinear Attention Networks

更精简的论文学习笔记 1、摘要 多模态学习中的注意力网络提供了一种选择性地利用给定视觉信息的有效方法。然而&#xff0c;学习每一对多模态输入通道的注意力分布的计算成本是非常昂贵的。为了解决这个问题&#xff0c;共同注意力为每个模态建立了两个独立的注意分布&#x…

【YOLOv8量化】普通CPU上加速推理可达100+FPS

NNCF介绍 OpenVINO2023版本衍生出了一个新支持工具包NNCF(Neural Network Compression Framework – 神经网络压缩框架)&#xff0c;通过对OpenVINO IR格式模型的压缩与量化更好的提升模型在OpenVINO框架上部署的推理性能&#xff0c;github。 https://github.com/openvinoto…

JVM- 为什么G1垃圾回收器需要有大对象区

G1&#xff08;Garbage-First&#xff09;垃圾回收器在Java虚拟机&#xff08;JVM&#xff09;中引入了大对象区&#xff08;也称为Humongous Region或H-Region&#xff09;的概念&#xff0c;主要是为了高效地处理大型对象。在垃圾回收的上下文中&#xff0c;大对象指的是那些…