echarts多个环形图

2024-09-06 03:20
文章标签 多个 环形 echarts

本文主要是介绍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多个环形图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140860

相关文章

struts2中的json返回指定的多个参数

要返回指定的多个参数,就必须在struts.xml中的配置如下: <action name="goodsType_*" class="goodsTypeAction" method="{1}"> <!-- 查询商品类别信息==分页 --> <result type="json" name="goodsType_findPgae"> <!--在这一行进行指定,其中lis是一个List集合,但

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具,支持在一块屏幕上同时播放多个视频。其主要功能包括: 多视频播放:用户可以在一个窗口中同时播放任意数量的视频,数量仅受硬件性能限制。支持多种格式和流媒体:GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL(如 m3u8 链接)。自定义网格布局:用户可以配置播放器的网格布局,以适应不同的观看需求。硬

C# 如何同时Ping多个IP地址

在C#中,如果需要同时ping多个IP地址,可以采用多线程或异步编程的方式来实现,以便可以同时进行多个ping操作。以下是两种常用的方法: 方法一:使用多线程(Task 或 Thread) 使用Task是更现代和推荐的方式,因为它内置了更好的线程管理和异常处理机制。以下是一个使用Task的示例,展示如何同时ping多个IP地址: using System; using System.Co

多个vue项目部署到nginx服务器

文章目录 需求一、项目打包1.vue.config.js2.request.js文件3.打包 二、nginx配置 需求 同一个域名安装多个vue项目。 比如:域名为 https://domain.com + 后缀。那么通过不同的后缀就能去访问不同的项目地址。 https://domain.com,不加任何后缀,访问官网。 https://domain.com/admin

在幼儿园管理系统中,会议管理申请会议修改模块:多个与会人员的回显和修改(编辑)!

在幼儿园管理系统中,会议管理>申请会议>修改模块:多个与会人员的回显(复选框)和修改(编辑)!在处理与会人员的回显(复选框)和修改(编辑)出点问题。无法正确的回显(复选框)出来与会人员和修改(编辑)。 最后终于解决:修改(编辑)的思路是:先把原来的该会议记录下的所有与会人员删除,在添加,即可实现修改(编辑)功能。回显(复选框)的思路是:设置一个flag,判断一下是否要选中(复选框),即可实现

CAD 多个页面在一个任务栏图标设置

命令行输入快捷键op或: 下图打对号,确定即可。

Jasperreports+jaspersoft studio 实现单个或多个jrxml(jasper)文件生成一个pdf文件,并利用Servlet发送该pdf文件到浏览器中展示

Jasperreports+jaspersoft studio 实现单个或多个jrxml(jasper)文件生成一个pdf文件,并利用Servlet发送该pdf文件到浏览器中展示; 代码如下: Demo07.jrxml <?xml version="1.0" encoding="UTF-8"?><!-- Created with Jaspersoft Studio version 6.6.

环形定时任务 原理

业务背景 在稍微复杂点业务系统中,不可避免会碰到做定时任务的需求,比如淘宝的交易超时自动关闭订单、超时自动确认收货等等。对于一些定时作业比较多的系统,通常都会搭建专门的调度平台来管理,通过创建定时器来周期性执行任务。如刚才所说的场景,我们可以给订单创建一个专门的任务来处理交易状态,每秒轮询一次订单表,找出那些符合超时条件的订单然后标记状态。这是最简单粗暴的做法,但明显也很low,自己都下不去手写

【IDEA】建立多个子模块依赖于一个父模块(maven)

第一步,建立父模块(在IDEA中就是工程) 第二步,选中父模块(也就是工程)右键New Module建立子模块 勾选创建模板原型并一般选择 maven-archetype-quickstart,当创建web模块时选择 maven-archetype-webapp 其他子模块都是类似这样创建~ packaging打包类型有: jar,默认类型warejbea

ubuntu安装多个版本的g++和gcc,并设置默认版本的c++和g++

https://blog.csdn.net/yoyofu007/article/details/102934990