Echarts饼图tooltip渐变色,内部legend百分比保留整数方法

 

业务场景:1、tooltip的背景需要渐变色,写 html 标签,

                  2、饼图内部的百分比需要保留整数 ,使用formatter,

 

export function genChartPieOption(pieData) {const res = {replaceMerge: ['series',], // 解决刷新之后y轴丢失问题title: {show: false,},tooltip: {trigger: 'item',backgroundColor: 'rgba(50,50,50,0)',// borderColor: '#032E74',borderWidth: 0,axisPointer: {crossStyle: {color: '#999',width: 2,}},formatter({ color, name, value, percent }) {const tipItems = [{color,name,value,percent,}];const resArr = [...tipItems.map((item => {return `<div style="background: linear-gradient(180deg, #008AFF99 0%, #114ACB99 100%);box-shadow: 0px 0px 10px 0px rgba(4,20,55,0.79);border-radius: 4px; padding: 12px; backdrop-filter: blur(2px);"><div><div style="margin-bottom: 2px;color: #ffffff;">${item.name}<span style="margin-left: 16px;">${item.value}(${Math.round(item.percent) || 0}%)</span></div> </div></div>`;}))]return resArr.join('')},textStyle: {color: '#D9DCE3',},},legend: {left: 'center',bottom: 0,itemGap: 8,// orient: "vertical",itemWidth: 16,itemHeight: 10,padding: [0, 5, 1, 0 ], textStyle: {fontSize: '12px',fontFamily: 'MicrosoftYaHei',color: '#D9DCE3',},},color: ['#0C52C3','#2B9DEE','#1BBDB7','#19D272',],series: {type: 'pie',radius: ['40%', '52%'],center: ['50%', '45%'],labelLine: {show: false},label: {show: false,position: 'center',},itemStyle: {borderRadius: 2,borderColor: '#021744',borderWidth: 4},emphasis: {label: {// formatter: '{b|{b}}\n{d|{d}%}', // d代表百分比formatter: function(params) {var d = Math.round(params.percent); // 取整数return '{b|' + params.name + '}\n{d|' + d + '%}';},show: true,verticalAlign: 'middle',// 富文本样式rich: {b: {color: '#B1C8EB',lineHeight: 24,fontSize: 12,},d: {color: '#D9DCE3',lineHeight: 24,fontSize: 16,fontWeight: 600,},}}},data: pieData || [],// data: [//   { value: 468, name: '客服热线' },//   { value: 816, name: '管网留言' },//   { value: 365, name: '内部人员反馈'},//   { value: 500, name: '其他'},// ]}}return res
}

 

 

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

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

相关文章

web前端游戏项目-堆木头游戏【附源码】

web前端游戏项目-堆木头游戏 《堆木头》游戏玩法简单&#xff0c;通过鼠标点击放木头的按钮&#xff0c;叠加在一起&#xff0c;构建出各种结构。游戏适合所有年龄段的孩子&#xff0c;可以锻炼孩子的动手能力和手眼协调能力&#xff0c;激发孩子的创造力和想象力 运行效果 …

一分钟学会“沉浸式翻译”插件的安装与使用

一、安装 安装地址&#xff1a;https://immersivetranslate.com/ 选择对应的浏览器进入安装即可 二、简单的翻译使用方法 第一次安装需要先刷新界面才可以达到翻译效果 核心需要修改的地方在以下三个&#xff1a; 第一处&#xff1a;设置翻译服务&#xff0c;免费版的可以直接…

MES管理系统哪些功能帮助印刷企业提高产品质量

随着市场竞争的日益激烈&#xff0c;产品质量已经成为企业生存和发展的关键因素。对于印刷企业来说&#xff0c;产品质量不仅关系到企业的声誉&#xff0c;更直接影响到企业经济效益。因此&#xff0c;如何提高产品质量成为印刷企业亟待解决的问题。MES管理系统作为一种先进的企…

左值右值引用,完美转发

1.c98/03&#xff0c;类模板和函数模板只能含固定数量的模板参数&#xff0c;c11的新特性可以创建接受可变参数的函数模板和类模板 //Args是一个模板参数包&#xff0c;args是一个函数形参参数包 //声明一个参数包Args… args,这个参数包可以包括0到任意个模板参数 template&l…

NLP论文阅读记录 - 2022 sota | 校准序列似然改善条件语言生成

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作强化学习方法两阶段重新排名方法具有序列级损失的多任务学习 三.本文方法3.1 相似度函数3.2 校准损失3.3正则化损失3.4 候选解码方法 四 实验效果4.1数据集4.2 对比模型4.3实施细节4.…

ToB还是ToC?工业级与消费级AR眼镜都能干什么?

来源&#xff1a;虹科数字化与AR 虹科分享 | ToB还是ToC&#xff1f;工业级与消费级AR眼镜都能干什么&#xff1f; 原文链接&#xff1a;https://mp.weixin.qq.com/s/lyTASoKm29woIbfcKBtMvQ 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 随着科技的飞速发展&#…

智能优化算法应用:基于冠状病毒群体免疫算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于冠状病毒群体免疫算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于冠状病毒群体免疫算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.冠状病毒群体免疫算法4.…

【Amazon 实验③】Amazon WAF功能增强之追踪 Amazon WAF RequestID,排查误杀原因

文章目录 1. 方案介绍2. 架构图3. 操作演示 本实验将介绍如何利用 Amazon LambdaEdge&#xff0c;在 Amazon CloudFront 自定义错误页面 上展示每个由 Amazon WAF 返回的“403 Forbidden”错误的 Request ID。通过这个唯一的 WAF Request ID&#xff0c;网站运维工程师能够快速…

swing快速入门(二十四)绘画板-可调色

注释很详细&#xff0c;直接上代码 上一篇 Look here~ 听我说完再继续看更容易理解&#xff1a; 如果说用之前的绘图方法写一个绘画板你会怎么做&#xff1f;重绘会让之前的内容消失呀&#xff0c;用各种数据结构记录每个像素点的位置或颜色&#xff1f;嘶&#xff0c;感觉很麻…

HFish蜜罐搭建及简单使用

一、HFish蜜罐 HFish是一款社区型免费蜜罐&#xff0c;侧重企业安全场景&#xff0c;从内网失陷检测、外网威胁感知、威胁情报生产三个场景出发&#xff0c;为用户提供可独立操作且实用的功能&#xff0c;通过安全、敏捷、可靠的中低交互蜜罐增加用户在失陷感知和威胁情报领域的…

<蓝桥杯软件赛>零基础备赛20周--第11周--贪心

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上答疑&#x…

Java网络编程---TCP

服务端 import java.io.DataInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket;public class Server2 {public static void main(String[] args) throws Exception{System.out.println("------------服务端启动---------…

josef约瑟 DB-1电压回路断相闭锁继电器100V 5A 嵌入式安装

DB-1电压回路断相闭锁继电器 1 用途 DB-1型闭锁继电器&#xff0c;是在电压回路发生断路而可能引起继电保护误动作时&#xff0c;用以闭锁继电器。 2 结构和工作原理 DB-1型断相闭锁继电器的原理线路图见图1。 图1 DB-1原理接线图 断相闭锁继电器线路由零序电压过滤器(三个容量…

ubuntu20.04下安装pcl_ubuntu安装pcl

pcl点云数据库&#xff0c;用来进行3D信息的获取与处理&#xff0c;和opencv相比较&#xff0c;opencv是用来处理二维信息&#xff0c;他是学术界与工业界针对点云最全的库&#xff0c;且网络上相关的资料很多。以下是pcl的安装步骤以及遇到的问题。 提前说明&#xff0c;本人…

Shell三剑客:awk(格式化输出)

一、格式符 %d 十进制有符号整数 %u 十进制无符号整数 %f 浮点数 %s 字符串 %c 单个字符 %p 指针的值 %e 指数形式的浮点数 %x %X 无符号以十六进制表示的整数 %o 无符号以八进制表示的整数 %g 自动选择合适的表示法 % % 显示%自身 # [.#] 第一个数…

10分钟创建AIGC应用,腾讯云推出高性能应用服务HAI

降低AIGC应用开发门槛&#xff0c;才能更快发现下一个AIGC现象级应用。 12月18日&#xff0c;腾讯云宣布推出高性能应用服务(Hyper Application Inventor&#xff0c;HAI)&#xff0c;用户无需复杂配置&#xff0c;最快10分钟即可创建自己的AI应用。 HAI能够提供即插即用的算…

Vue 的两种实现:VSCode 中配置 vue 模板快捷方式的过程

1、创建配置文件&#xff1a; 其一、打开 VSCode &#xff0c;CtrlShiftP, 打开搜索框&#xff1a; 其二、输入&#xff1a;user, 并点击进去 Snippets:Configure User Snippets 其三、输入 vue3js 并回车&#xff1a; 其四、打开项目&#xff0c;发现配置文件 vue3js.code-sn…

Layui 下拉select多选实现

1. html <div id"mo_deptment"></div> 2.引用 <script src"~/layuiadmin/layui/xm-select.js"></script>3.设置全局变量存储控件 var mo_deptmentSelect; 4.layui.use 中初始化 4.1 列表数据 var mo_deptmentdata [ …

红队打靶练习:DIGITALWORLD.LOCAL: DEVELOPMENT

信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.12.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.12.1 00:50:56:c0:00:08 …

数字图像处理-空间域图像增强-爆肝18小时用通俗语言进行超详细的总结

目录 灰度变换 直方图&#xff08;Histogram&#xff09; 直方图均衡 直方图匹配&#xff08;规定化&#xff09; 空间滤波 低通滤波器 高通滤波器 ​​​​​​​ 本文章讲解数字图像处理空间域图像增强&#xff0c;大部分内容来源于课堂笔记中 灰度变换 图像增强&…