echarts 加一个圆环图带阴影

news/2024/11/13 11:37:40/文章来源:https://www.cnblogs.com/duixue/p/18400410

image
这里面一共三个圆,
最外层是一个半透明的

   var chartDomymr = document.getElementById('container-ymr');var myChartymr = echarts.init(chartDomymr);var optionymr;var optionymr_data = [{value: 332, name: '类型A', color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: 'rgba(64, 125, 252, 1)',},{offset: 1,color: 'rgba(64, 104, 252, 1)',},],false)},{value: 159, name: '类型B', color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: 'rgba(1, 209, 94, 1)',},{offset: 1,color: 'rgba(1, 190, 205, 1)',},],false)},{value: 159, name: '类型C', color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: 'rgba(247, 121, 0, 1)',},{offset: 1,color: 'rgba(247, 174, 0, 1)',},],false)},{value: 199, name: '类型D', color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: 'rgba(247, 1, 1, 1)',},{offset: 1,color: 'rgba(250, 93, 93, 1)',},],false)}];var data = [];var data2 = [];for (var i = 0; i < optionymr_data.length; i++) {optionymr_data[i].itemStyle = {normal: {borderWidth: 5,borderRadius: 10,borderColor: optionymr_data[i].color,color: optionymr_data[i].color,},};delete optionymr_data[i].color;data.push(optionymr_data[i], {value: 25,name: '',itemStyle: {normal: {label: {show: false,},labelLine: {show: false,},color: 'rgba(0, 0, 0, 0)',borderColor: 'rgba(0, 0, 0, 0)',borderWidth: 0,}}});}for (var i = 0; i < data.length; i++) {var obj = structuredClone(data[i]);delete obj.itemStyle.normal.borderWidth;delete obj.itemStyle.normal.borderRadius;data2.push(obj);}optionymr = {//title: {//    show: false,//    text: '报警类型统计'//},title: {text: '1090',subtext: "总量",itemGap: 5,top: "45%",left: "center",zlevel: 3, //层级textStyle: {fontWeight: '700',color: '#00173A',fontSize: '27'},subtextStyle: {color: "rgba(99,99,99,0.75)",fontSize: 18,top: "center"}},tooltip: {trigger: 'item'},legend: {show: true,itemWidth: 3,itemHeight: 36,//align: 'left',orient: 'horizontal',itemGap: 36,//type: 'plain',width: '100%',bottom: '5%',left: 'center',textStyle: {rich: {fw: {fontSize: 18,fontWeight: '600'},fu: {fontSize: 13,color: '99,99,99,0.75',}},},formatter(name) {var value = optionymr_data.find(c => c.name == name).value;return `{fw|${value}}\n{fu|${name}}`;}},series: [{type: 'pie',zlevel: 2,radius: ['0', '40%'],itemStyle: {normal: {//shadowBlur: 10,//shadowColor: 'rgba(0,0,0,.75)',borderRadius: 10, // 圆角color: 'rgba(64,124,252,0.05)',label: {show: false},labelLine: {show: false}},},hoverAnimation: false,data: [100],},{type: 'pie',clockWise: false,radius: ['53%', '55%'],hoverAnimation: false,//radius: ['50%', '60%'],avoidLabelOverlap: false,label: {show: false,position: 'left'},emphasis: {label: {show: false,fontSize: 40,fontWeight: 'bold'}},labelLine: {show: false},data: data},{type: 'pie',clockWise: false,radius: ['56%', '63%'],hoverAnimation: false,//radius: ['50%', '60%'],avoidLabelOverlap: false,itemStyle: {opacity: '0.2',borderRadius: ["50%", "50%"],borderColor: '#fff',borderWidth: 0},label: {show: false,position: 'left'},emphasis: {label: {show: false,}},labelLine: {show: false},data: data2},],};optionymr && myChartymr.setOption(optionymr);

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

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

相关文章

echarts圆环图

外环的渐变是内环的阴影var chartDom2 = document.getElementById(container-workcode2);var myChart2 = echarts.init(chartDom2);var option2;option2 = {tooltip: {trigger: item},legend: {orient: vertical,top: 0%,left: center},title: {text: 60%,subtext: "完成率…

MacTalk 测评通义灵码,如何实现“微信表情”小功能?

目前,通义灵码已经在阿里云、哈啰集团、一汽集团、中华财险等企业落地,下载量超 500 万,在国际权威机构 Gartner 测评中,拿到国内 AI 编码工具最高成绩。作者:池建强,墨问西东创始人 前段时间,我写了篇墨问研发团队放弃 GitHub Copilot 的文章,没想到留言区一些读者推荐…

记录BUUCTF 中 的一道hook掉函数地址的题目

题目 [Zer0pts2020]easy strcmp1 https://files.buuoj.cn/files/2961ba55f464e750aca703838dfca234/easy_strcmp_e1a6208fde4f52fd0c653c0b7e8ff614.tar.gz 刚开始在main函数中发现if ( !strcmp(a2[1], "zer0pts{********CENSORED********}") )puts("Correct!&q…

[C++ Daily] 虚继承与虚析构带来的变化

虚继承 在菱形继承中,若 Student 和 Teacher 继承于 Person, TS 继承于 Student 和 Teacher,则构造 TS 时会调用两次 Person 的 Construct 和 Destruct 函数,若为虚继承,则不会出现上述问题(此类问题主要解决继承带来的多次非法delete) 原继承:结果:虚继承:结果:虚析构 父类指针…

ARP详细介绍

ARP详细介绍,包括动态ARP(基本和“常用协议”博文内容一致)、静态ARP、免费ARP、路由式ARP代理ARP详细介绍 地址解析协议,根据IP地址获取MAC地址,还能检测地址是否有重复 动态ARP 广播ARP报文寻找目标IP的MAC地址主机1通过发送ARP Request报文获取主机2的MAC地址 ​ 由于不…

一个网络安全情报聚合网站《魔盒安全情报》

《魔盒》 一款专为网络安全领域提供服务的多端情报系统。 实时更新安全情报。内容包括威胁情报、数据泄露、漏洞预警、军事情报、安全博客情报等。地址网页端:https://mgb.abyssdawn.com/tg 推送频道 频道地址:mgb_sec_thread感谢 感谢以下大佬收集的安全订阅源https://githu…

mipi屏调试时序问题

mipi屏的时序大同小异,一般都跟以下差不多: 屏参配置如下:&dsi0 {status = "disabled";//rockchip,lane-rate = <1000>;dsi0_panel: panel@0 {status = "okay";compatible = "simple-panel-dsi";reg = <0>;backlight = <&…

java编译中出现 无效的目标发行版:17

java maven 编译中出现 无效的目标发行版:17 解决方法: 将 pom.xml 中的 <maven.compiler.release>17</maven.compiler.release>这段换成<maven.compiler.source>1.7</maven.compiler.source> <maven.compiler.target>1.7</maven.compiler.…

火影新版控制中心安装教程

1. 第一步卸载原有控制中心 搜索框搜索控制面板找到卸载程序点击搜索控制中心右键卸载卸载完选择YES重启 2、官网下载控制中心的压缩包 火影官网驱动下载 https://www.firebat.com.cn/index/serve/drive 根据自己是什么机器选择 (t6ax也是t6系,t6系的都选t6ad,处理器是什么就…

记录 ThreadPoolExecutor任务队列放入任务的方式

众所周知,ThreadPoolExecutor内部任务队列属性类型定义为:private final BlockingQueue workQueue; 而其有三种提交任务方式:add、put和offer,好奇其内部用的哪个,又不想查资料,故而跳到源码内部一看。结果如下:三种提交任务方式:put(E element):将指定元素插入队列,…

MCU驱动架构的初探究

最近在网上看到的MCU驱动的架构,让我感觉非常好,我对其整理和总结了一下Handler层 什么是Handler层 :Handler是将所有的资源聚集到一起的一层,包括用到的HAL硬件,队列,信号量,锁),包括挂载哪个硬件设备; 以温湿度传感器为例,handler结构体 typedef struct bsp_temp_…

基于Hutool技术Excel表格导出

今天分享一下基于Hutool技术Excel表格导出,我们先看看导出Excel表格的样子第1步:引入maven依赖<dependencies><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.3</version></…