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