You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
4.1 KiB
180 lines
4.1 KiB
|
|
export function pieOption (_charts) {
|
|
const center= ['50%', '250px']
|
|
return {
|
|
title: {
|
|
text: '0',
|
|
top: 220,
|
|
left: 'center',
|
|
textStyle: {
|
|
width: '100%',
|
|
fontSize: 32,
|
|
color: '#FFFFFF',
|
|
fontWeight: 400
|
|
},
|
|
itemGap: 5,
|
|
subtext: '总数',
|
|
subtextStyle: {
|
|
fontSize: 20,
|
|
color: '#fff',
|
|
fontWeight: 400
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
legend: {
|
|
top: 500,
|
|
bottom: 0,
|
|
itemWidth: 20,
|
|
itemHeight: 10,
|
|
textStyle: {
|
|
color: '#D2E7FF',
|
|
fontSize: 16,
|
|
lineHeight: 20,
|
|
},
|
|
|
|
},
|
|
series: [
|
|
// 外侧圆环
|
|
{
|
|
type: 'pie',
|
|
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|
startAngle: 0,
|
|
hoverAnimation: false,
|
|
// tooltip: {
|
|
// },
|
|
center: center,
|
|
radius: ['55%', '55.3%'],
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 360,
|
|
itemStyle: {
|
|
color: 'rgba(40, 101, 250, 0)',
|
|
width:0,
|
|
borderColor: 'rgba(40, 101, 250, 0.5)',
|
|
borderWidth: 1,
|
|
borderType: 'dotted'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
|
|
// 突出的
|
|
{
|
|
hoverAnimation: false,
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
center: center,
|
|
radius: ['40%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
// top: top + '%',
|
|
// height: '80%',
|
|
selectedMode: 'single',
|
|
left: 'center',
|
|
width: 400,
|
|
label: {
|
|
// show: false,
|
|
position: 'outside',
|
|
alignTo: 'edge',
|
|
// formatter: '{a|{c}}\n\n{name|{b}}',
|
|
formatter: '{a|{c}}\n{r|}\n{name|{b}}',
|
|
minMargin: 5,
|
|
edgeDistance: 1,
|
|
lineHeight: 15,
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
// distanceToLabelLine: -60,
|
|
rich: {
|
|
name: {
|
|
padding: [0, 6, 0, 6]
|
|
},
|
|
a: {
|
|
fontSize: 30,
|
|
color: '#fff',
|
|
padding: [0, 6, 6, 6]
|
|
},
|
|
r: {
|
|
backgroundColor: 'auto',
|
|
borderRadius: 6,
|
|
width: 6,
|
|
height: 6,
|
|
// padding: [3, 3, 0, -12]
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
smooth: 0.2,
|
|
length: 30,
|
|
length2: 0,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
labelLayout: function (params) {
|
|
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
|
|
const points = params.labelLinePoints;
|
|
// Update the end point.
|
|
if (points) {
|
|
points[2][0] = isLeft
|
|
? params.labelRect.x
|
|
: params.labelRect.x + params.labelRect.width;
|
|
}
|
|
|
|
return {
|
|
labelLinePoints: points
|
|
};
|
|
},
|
|
// itemStyle: {
|
|
// normal:{
|
|
// color:function(params) {
|
|
// //自定义颜色
|
|
// var colorList = [
|
|
// '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
|
|
// ];
|
|
// return colorList[params.dataIndex]
|
|
// }
|
|
// }
|
|
// },
|
|
data: [],
|
|
|
|
},
|
|
// 中间圆环
|
|
{
|
|
type: 'pie',
|
|
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|
startAngle: 0,
|
|
hoverAnimation: false,
|
|
center: center,
|
|
// tooltip: {
|
|
// },
|
|
radius: ['0%', '25%'],
|
|
label: {
|
|
|
|
show: false
|
|
|
|
},
|
|
labelLine: {
|
|
|
|
show: false
|
|
|
|
},
|
|
data: [{
|
|
value: 360,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(8, 37, 134, 1)',
|
|
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
]
|
|
|
|
}
|
|
}
|
|
|