仪表盘echarst

本文主要是介绍仪表盘echarst，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

var bgColor = '#041F34',borderColor = "#fff"let dataVal=20
option = {backgroundColor: bgColor,color: [borderColor],title: [{text: '处理率',x: 'center',top: '40%',textStyle: {color: '#FFE600',fontSize: 56,fontWeight: '600',},},],series: [{type: 'pie',zlevel: 1,radius: ['60%'],center: ['50%', '105.5%'],silent: true,startAngle: 180,label: {normal: {show: false},},labelLine: {normal: {show: false}},data: _pie1()},{type: 'pie',zlevel: 0,silent: true,center: ['50%', '60%'],radius: ['87%', '90%'],startAngle: -100,label: {normal: {show: false},},labelLine: {normal: {show: false}},data: [1]},{name: "",type: 'gauge',splitNumber: 8, //刻度数量min: 0,max: 100,radius: '80%', //图表尺寸center: ['50%', '60%'],zlevel: 12,axisLine: {show: true,lineStyle: {width: 0,shadowBlur: 0,color: [[1, '#cccccccc']]}},axisTick: {show: true,lineStyle: {color: 'auto',width: 10},length: 28,splitNumber: 5},splitLine: {show: true,length: 22,lineStyle: {color: 'auto',}},axisLabel: {show: false},pointer: { //仪表盘指针show: 0,},detail: {show: 0,},data: [{name: "PM2.5",title: {// 配置“家居总数”的样式show: true,fontSize: 28,fontWeight: 700,// fontFamily: fontFamily.fontFamily65W,color: "rgba(128,255,255,1)",offsetCenter: ["0", "70%"],},},],},{name: '统计',type: 'gauge',splitNumber: 8, //刻度数量min: 0,max: 100,radius: '80%', //图表尺寸center: ['50%', '60%'],zlevel: 21,axisLine: {show: true,lineStyle: {width: 0,shadowBlur: 0,color:[[dataVal/100,'#FFEB3B'],[1,'transparent']],// color: [//     [0, borderColor],//     [0.10, borderColor],//     [0.20, borderColor],//     [0.30, borderColor],//     [0.40, borderColor],//     [0.50, borderColor],//     [0.60, borderColor],//     [0.70, 'transparent'],//     [0.80, 'transparent'],//     [0.90, 'transparent'],//     [1, 'transparent']// ]}},axisTick: {show: true,lineStyle: {color: 'auto',width: 10},length: 28,splitNumber: 5},splitLine: {show: true,length: 22,lineStyle: {color: 'auto',}},axisLabel: {show: false},pointer: { //仪表盘指针show: 0,length: '70%',width: 2,},detail: {valueAnimation: true,show: true,color: "#fff",fontFamily: 'sans-serif',offsetCenter: [-30, '10%'],fontSize: 56,},title: {offsetCenter: [40, '15%'],color: "#fff",fontSize: 24},// data: [{//     name: "",//     value: 10// }]data: [{'name':'ug/m³','value': dataVal}],}, {zlevel: 3,top: '95.1%',breadcrumb: {show: false},levels: [{color: [bgColor],}],itemStyle: {normal: {borderColor: bgColor}},roam: false,nodeClick: false,width: '100%',height: 80,type: 'treemap',data: [{name: '', // First treevalue: 1}]}]
};function _pie1() {let dataArr = [];for (var i = 0; i < 2; i++) {if (i % 2 === 0) {dataArr.push({name: (i + 1).toString(),value: 20,itemStyle: {normal: {color: "#0071F2",borderWidth: 0,borderColor: "rgba(0,0,0,0)"}}})} else {dataArr.push({name: (i + 1).toString(),value: 20,itemStyle: {normal: {color: "rgba(0,0,0,0)",borderWidth: 0,borderColor: "rgba(0,0,0,0)"}}})}}return dataArr}

这篇关于仪表盘echarst的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---