当前位置: 首页 > news >正文

echarts多个环形图

echarts图表集 

var dataValue = [{name:'今日待分配方量',value:49}, {name:'今日已分配方量',value:602}, {name:'今日完成方量',value:1037}]var piedata1 = [{name: '1#拌和机',value: 20},{name: '2#拌和机',value: 22},{name: '3#拌和机 ',value: 17},{name: '4#拌和机',value: 18},{name: '5#拌和机',value: 10},{name: '6#拌和机',value: 13},{name: '7#拌和机',value: 12},{name: '8#拌和机',value: 17}]var piedata2 = [{name: '1#拌和机',value: 20},{name: '2#拌和机',value: 22},{name: '3#拌和机 ',value: 17},{name: '4#拌和机',value: 19},{name: '5#拌和机',value: 10},{name: '6#拌和机',value: 20},{name: '7#拌和机',value: 13},{name: '8#拌和机',value: 16}]var piedata3 = [{name: '1#拌和机',value: 13},{name: '2#拌和机',value: 12},{name: '3#拌和机 ',value: 17},{name: '4#拌和机',value: 18},{name: '5#拌和机',value: 10},{name: '6#拌和机',value: 10},{name: '7#拌和机',value: 13},{name: '8#拌和机',value: 15}]
option = {backgroundColor: '#0C1E49',color: ['#5E92F7', '#8BF4C8', '#F5E46C', '#E9A252','#EB95F7', '#C4FC5E', '#E68582', '#9A6FF6', '#b23aee', '#50b332'],legend: {show: true,width: '80%',top:"5%",textStyle: {inside: true,color: "#9FC3E7",padding: [14, 0, 10, 0],align: "left",verticalAlign: "center",fontSize: 14,rich: {},},// icon: "rect",itemGap: 10,itemWidth: 12,itemHeight: 12,// bottom: '15%'},//   legend: {//     type: "scroll",//     orient: 'vertical',//     left: '65%',//     align: 'left',//     top: 'middle',//     textStyle: {//         color: '#8C8C8C'//     },// },tooltip: {},// grid: [{//   bottom: '55%',//   top: '15%',//   left: '15%',//   right: '5%',// }],series: [{name: '今日待分配方量',type: 'pie',radius: ['40%', '60%'],// center: ['50%', '50%'],data: piedata1,bottom: '0%',top: '7%',left: '0%',right: '65%',label: {show: false},labelLine: {show: false},},{type: "gauge",zlevel: 1,// z: 198,splitNumber: 0,radius: "39%",center: ['18%', '55%'],// startAngle: 190,endAngle: -269.9999,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,length: 6,lineStyle: {width: 3,color: "rgba(108,173,202,1)",},},data: [{value: dataValue[0].value,name: dataValue[0].name,title: {// 配置“家居总数”的样式show: true,fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily65W,color: "#BADBFB",offsetCenter: [0, "100%"],},},],detail: {// 调节数字位置offsetCenter: [-2, -17],fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily95W,color: "#fff",},pointer: {show: false,},// detail: {//   show: 0,// },},{name: '今日已分配方量',type: 'pie',radius: ['40%', '60%'],//center: ['50%', '50%'],data: piedata2,bottom: '0%',top: '7%',left: '33%',right: '32%',label: {show: false},labelLine: {show: false},},{type: "gauge",zlevel: 1,// z: 198,splitNumber: 0,radius: "39%",center: ['51%', '55%'],// startAngle: 190,// endAngle: -269.9999,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,length: 6,lineStyle: {width: 3,color: "rgba(108,173,202,1)",},},data: [{value: dataValue[1].value,name: dataValue[1].name,title: {// 配置“家居总数”的样式show: true,fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily65W,color: "#BADBFB",offsetCenter: [0, "100%"],},},],detail: {// 调节数字位置offsetCenter: [-2, -17],fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily95W,color: "#fff",},pointer: {show: false,},// detail: {//   show: 0,// },},{name: '今日完成方量',type: 'pie',radius: ['40%', '60%'],//center: ['50%', '50%'],data: piedata3,bottom: '0%',top: '7%',left: '65%',right: '0%',label: {show: false},labelLine: {show: false},},{type: "gauge",zlevel: 1,// z: 198,splitNumber: 0,radius: "39%",center: ['83%', '55%'],// startAngle: 190,// endAngle: -269.9999,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,length: 6,lineStyle: {width: 3,color: "rgba(108,173,202,1)",},},data: [{value: dataValue[2].value,name: dataValue[2].name,title: {// 配置“家居总数”的样式show: true,fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily65W,color: "#BADBFB",offsetCenter: [0, "100%"],},},],detail: {// 调节数字位置offsetCenter: [-2, -17],fontSize: 25,fontWeight: 700,// fontFamily: fontFamily.fontFamily95W,color: "#fff",},pointer: {show: false,},// detail: {//   show: 0,// },},]
};

相关文章:

echarts多个环形图

echarts图表集 var dataValue [{name:今日待分配方量,value:49}, {name:今日已分配方量,value:602}, {name:今日完成方量,value:1037}]var piedata1 [{name: 1#拌和机,value: 20},{name: 2#拌和机,value: 22},{name: 3#拌和机 ,value: 17},{name: 4#拌和机,value: 18},{name…...

vue 的面试题

一、Html篇 1、常用的块级元素及行内元素有哪些? 块级元素:div、p、h1~h6、ol、ul、li、table、form 行内标签:a、span、img、input、lable、button 行内块元素:img、input、button 2、行内元素和块级元素的区别? 块级…...

MongoDB-部署PSA(一主一从一仲裁)架构复制集群

目录 环境信息环境准备mongoDB配置&部署复制集群搭建 环境信息 IP端口节点10.0.0.127017主10.0.0.227017从10.0.0.327017仲裁 环境准备 1.关闭THP Transparent Huge Pages 简称 THP。透明大页面(THP)是一种Linux内存管理系统,通过使用…...

CSS中 特殊类型的选择器 伪元素如何使用

一、什么是伪元素 在 CSS 中,伪元素是一种特殊类型的选择器,它允许你为元素的特定部分添加样式,而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果,如添加边框、背景、阴影等,而不需要额外的 HTML…...

科技信贷业务怎么寻找客户?

在科技信贷业务领域,寻找客户的痛点主要集中在以下几个方面: 1.风险评估难题:科技型企业尤其是初创企业,往往缺乏足够的历史数据和抵押物,这使得金融机构在评估其信用风险时面临较大挑战。由于科技企业的研发周期长、…...

VM中创建CentOS 7及VM中如何修改DHCP的IP网段

一、创建虚拟机 1新建Centos虚拟机 2类型选择 3版本兼容性选择 4镜像选择 5安装系统选择 6虚拟机的创建路径(选择C盘以外且不包含中文名称的路径) 7硬件配置选择 网络类型的选择(通常情况下选择NAT模式) 8剩下的全部按推荐走&…...

mybatis#{}与${}的区别,mybatis关联查询,mybatis动态sql

1.#{}与${}的区别 #{}是占位符,是采用预编译的方式向sql中传值,可以防止sql注入如果我们往sql中传值,可以使用这个,例如这个delete语句 ${}将内容直接拼接到sql语句中,一般不用于传值,可以当作列名&#x…...

K8S(Kubernates) 知识目录

1. 一文了解K8S(Kubernates) 2. K8S CNI CRI CSI 3. K8S Helm 4. K8S Harbor 5. K8S Operator 6. K8S 服务网格 7. K8S 存储 8. K8S 容器调度 9. K8S 探针 10. K8S Watch 11. K8S 版本发版 12. K8S 资源管理CPU&内存 13. K8S Flannel 1…...

基于Java+SpringBoot+Vue+MySQL的失物招领管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于SpringBootVue的失物招领管理系统【附源码文档】、前后…...

Mybatis链路分析:JDK动态代理和责任链模式的应用

背景 此前写过关于代理模式的文章,参考:代理模式 动态代理功能:生成一个Proxy代理类,Proxy代理类实现了业务接口,而通过调用Proxy代理类实现的业务接口,实际上会触发代理类的invoke增强处理方法。 责任链功…...

【Spring Boot 3】【Web】解析获取HTTP请求参数

【Spring Boot 3】【Web】解析获取HTTP请求参数 背景介绍开发环境开发步骤及源码工程目录结构背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要…...

conda换源是什么?

换源对于我们在国内的python使用者来说是非常有必要的,之前讲了pip如何换源。 pip更换为国内镜像源的步骤,为什么要更换镜像源 那现在讲一下conda如何换源。 conda换源(清华源) 有时候,conda虽然和pip共用一个本地…...

英文缩写大全(IT 领域和电子行业制造领域)

英文缩写大全(IT 领域和电子行业制造领域) 前言一、计算机通用二、WINDOWS三、LINUX四、编程语言1. 前端 / 设计2. JAVA / Android3. PHP4. Python 四、电子行业制造领域五、常识 前言 本文收集了各类英文缩写大全,方便查阅,主要…...

如何将图片左右翻转?8种方法来将图片进行左右翻转

如何将图片左右翻转?在现代数字化的图像处理过程中,图片的方向调整是常见的操作之一。左右翻转图片不仅可以改变图像的视觉效果,还可以用于修正拍摄时的角度问题,或者满足特定设计和排版需求。比如,当你拍摄的照片由于…...

linux:ln用法详解

文章目录 1. 描述2. 语法2.1 硬链接(Hard Link)2.2. 符号链接(Symbolic Link / Soft Link) 3. ln 命令的常用选项4. 例子 1. 描述 在 Linux 系统中,ln 命令用于创建硬链接(Hard Link)或符号链接…...

0基础跟德姆(dom)一起学AI Python进阶02-Python面向对象高级

1 [重点]定义类的几种语法 方式1:类名 在上一章节的学习过程中,我们都使用了这种定义类的语法: properties class 类名: 代码 ... 例如,使用该方式来定义一个老师类。 python # 1.class 类名: # pass class Te…...

【深度学习】softmax 回归的从零开始实现与简洁实现

前言 小时候听过一个小孩练琴的故事,老师让他先弹最简单的第一小节,小孩练了两天后弹不出。接着,老师让他直接去练更难的第二小节,小孩练习了几天后还是弹不出,开始感觉到挫败和烦躁了。 小孩以为老师之后会让他从简…...

Sollong、IO.NET和 Solana,为何参加 WebX 2024活动?

东京王子花园塔酒店 ChainCatcher_携手 DPCapital_XYZ与WebX_Asia共同打造“世界のStaking最大级集结|Tokyo站”盛会,为全球Staking爱好者与行业精英搭建交流合作桥梁!全球顶尖Staking项目方、知名区块链机构、行业领袖与企业家将齐聚东京,共…...

3个免费好用的网站,可以转换PDF,提取MP3

今天分享的三个网站,分别用于文件转换PDF,QMC转MP3格式和配色网站。 TOPDF 这个网站是一个在线PDF转换工具,可以快速将文本文件、演示文稿、电子表格和图片转换为PDF格式。它支持多种文件格式,如AZW3、BMP、CHM、CSV、DjVu、DOC、…...

PHP智能匹配轻松预订自习室在线订座系统小程序源码

智能匹配,轻松预订——自习室在线订座系统 📚【开篇:告别排队,迎接智能学习新时代】📚 还在为找不到合适的自习室座位而烦恼吗?是不是每次去图书馆或自习室都要提前好久去排队占位?现在&#…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...