let roseData = [
{value: 40, name: 'rose 1'},
{value: 33, name: 'rose 2'},
{value: 28, name: 'rose 3'},
{value: 22, name: 'rose 4'},
{value: 20, name: 'rose 5'},
{value: 15, name: 'rose 6'},
{value: 12, name: 'rose 7'},
{value: 10, name: 'rose 8'},
{value: 20, name: 'rose 9'},
{value: 60, name: 'rose 10'}
]
const colors=['#9fe6b8', '#32c5e9', '#5eb5fc', '#1d9dff', '#8378ea', '#aa6eff', '#e7bcf3', '#fb7293', '#ff9f7f', '#ffdb5c'];
for (let index = 0; index < roseData.length; index++) {
roseData[index].itemStyle = {
color: colors[index]
};
}
const originDataLen = roseData.length;
const spanAngle = 180; // 需要显示的角度
const repeatedMultiple = 360 / spanAngle;
// 这里根据要显示的角度 计算了需要插入的数据量
const addDataLen = parseInt((repeatedMultiple - 1) * originDataLen);
for (let index = 0; index < addDataLen; index++) {
roseData.push({
name: null,
// 这里给数据置零，即在视觉上不显示
value: 0,
// 这里保证了异常情况下(数据都为0时)作为占位的数据在视觉上仍为不可见状态。
itemStyle:{
color: 'rgba(0,0,0,0)'
},
tooltip: {
show: false,
formatter: null
}
});
}
option ={
backgroundColor: '#000',
"color": [
"#9fe6b8",
"#32c5e9",
"#5eb5fc",
"#1d9dff",
"#8378ea",
"#aa6eff",
"#e7bcf3",
"#fb7293",
"#ff9f7f",
"#ffdb5c"
],
// "title": [
// {
// "text": "40",
// "left": "20%",
// "bottom": "15%",
// "textStyle": {
// "color": "#999",
// "fontWeight": 100,
// "fontSize": 14
// }
// },
// {
// "text": "20",
// "left": "32%",
// "bottom": "15%",
// "textStyle": {
// "color": "#999",
// "fontWeight": 100,
// "fontSize": 14
// }
// },
// {
// "text": "0",
// "left": "44%",
// "bottom": "15%",
// "textStyle": {
// "color": "#999",
// "fontWeight": 100,
// "fontSize": 14
// }
// },
// {
// "text": "40",
// "right": "20%",
// "bottom": "15%",
// "textStyle": {
// "color": "#999",
// "fontWeight": 100,
// "fontSize": 14
// }
// },
// {
// "text": "20",
// "right": "32%",
// "bottom": "15%",
// "textStyle": {
// "color": "#999",
// "fontWeight": 100,
// "fontSize": 14
// }
// },
// {
// "text": "0",
// "right": "44%",
// "bottom": "15%",
// "textStyle": {
// "color": "#999",
// "fontWeight": 100,
// "fontSize": 14
// }
// }
// ],
"series": [
{
"name": "面积模式",
"type": "pie",
"roseType": "area",
"radius": [
"20%",
"110%"
],
"center": [
"50%",
"80%"
],
"startAngle": 180,
"label": {
"show": false
},
"data": roseData
},
{
type: 'gauge',
radius: '110%',
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
max: 1,
splitNumber: 20,
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [
[1, '#213d85']
]
}
},
axisTick: {
show: false,
length: 18,
lineStyle: {
color: 'auto',
width: 1
}
},
splitLine: {
length: '0',
lineStyle: {
color: 'auto',
width: 1
}
},
axisLabel: {
color: '#999',
fontSize: 14,
distance: -75,
lineHeight:0,
height:50,
formatter: function (value) {
if (value === 0.05) {
return '部门1';
}
else if (value === 0.15) {
return '部门2';
}
else if (value === 0.25) {
return '部门3';
}
else if (value === 0.35) {
return '部门4';
}
else if (value === 0.45) {
return '部门5';
}
else if (value === 0.55) {
return '部门6';
}
else if (value === 0.65) {
return '部门7';
}
else if (value === 0.75) {
return '部门8';
}
else if (value === 0.85) {
return '部门9';
}
else if (value === 0.95) {
return '部门10';
}
}
},
title: {
offsetCenter: [0, '-20%'],
fontSize: 30
},
detail: {
fontSize: 50,
offsetCenter: [0, '0%'],
color: 'auto'
},
data: []
},
{
"type": "gauge",
"radius": "110%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 20,
"axisLine": {
"show": false,
"lineStyle": {
"width": 1,
"color": [
[
1,
"#fff"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"distance": 0,
"length": "81%",
"lineStyle": {
"type": "dashed",
"color": "#fff",
"opacity": 0.5,
"width": 1
}
},
"axisLabel": {
"show": false,
},
"data": []
},
{
"type": "gauge",
"radius": "110%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 10,
"axisLine": {
show: false,
"lineStyle": {
"width": 1,
"opacity": "0.5",
"color": [
[
1,
"red"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": true,
distance: -30,
opacity: 0.6,
formatter:function(params){
var value = params.toFixed(2)
let val = 40
if(value == 0.00){
return `{value|${val}}`
}else if(value == 1.00){
return `{value|${val}}`
}else{
return ''
}
},
rich: {
value: {
padding:[20,0,0,0],
color: '#fff',
opacity: 0.6,
}
}
},
"data": []
},
{
"type": "gauge",
"radius": "88%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 10,
"axisLine": {
"lineStyle": {
"width": 1,
"opacity": "0.5",
"color": [
[
1,
"#fff"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": false,
},
"detail": {
"fontSize": 50,
"offsetCenter": [
0,
"0%"
],
"valueAnimation": true,
"color": "auto"
},
"data": []
},
{
"type": "gauge",
"radius": "110%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 10,
"axisLine": {
"lineStyle": {
"width": 1,
"opacity": "0.5",
"color": [
[
1,
"#fff"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": false,
distance: -25,
color:'#fff',
},
"detail": {
"fontSize": 50,
"offsetCenter": [
0,
"0%"
],
"valueAnimation": true,
"color": "auto"
},
"data": []
},
{
"type": "gauge",
"radius": "66%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 10,
"axisLine": {
"lineStyle": {
"width": 1,
"opacity": "0.5",
"color": [
[
1,
"#fff"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": true,
distance: -25,
color:'#fff',
formatter:function(params){
var value = params.toFixed(2)
let val = 20
if(value == 0.00){
return `{value|${val}}`
}else if(value == 1.00){
return `{value|${val}}`
}else{
return ''
}
},
rich: {
value: {
padding:[20,0,0,0],
color: '#fff',
opacity: 0.6,
}
}
},
"data": []
},
{
"type": "gauge",
"radius": "45%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 10,
"axisLine": {
"lineStyle": {
"width": 1,
"opacity": "0.5",
"color": [
[
1,
"#fff"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"data": []
},
{
"type": "gauge",
"radius": "20%",
"center": [
"50%",
"80%"
],
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 1,
"z": 3,
"splitNumber": 10,
"axisLine": {
"lineStyle": {
"width": 1,
"opacity": "0.5",
"color": [
[
1,
"#fff"
]
]
}
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": true,
distance: -20,
color:'#fff',
formatter:function(params){
var value = params.toFixed(2)
let val = 0
if(value == 0.00){
return `{value|${val}}`
}else if(value == 1.00){
return `{value|${val}}`
}else{
return ''
}
},
rich: {
value: {
padding:[20,0,0,0],
color: '#fff',
opacity: 0.6,
}
}
},
"data": []
}
]
}