let sum = 80;
let complete = 50;
let planComplete = 30;
let option = {};
option = {
backgroundColor: 'block',
title: {
text: complete + '/' + planComplete,
x: 'center',
y: '52%',
textStyle: {
color: '#fff',
fontSize: '80',
fontFamily: 'Assailand-SemiBoldItalic'
},
subtext: '完成/计划',
subtextStyle: {
fontSize: '80',
fontFamily: 'SYR',
fontWeight: 400,
color: '#FFFFFF'
}
},
legend: {
icon: 'circle',
hoverAnimation: false,
top: '-35',
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#ffffff',
fontSize: 14
},
right: 0
//align: 'left'
},
grid: {
top: '50%'
},
series: [
{
type: 'pie',
hoverAnimation: false,
label: {
show: false
},
center: ['50%', '100%'],
radius: ['140%', '173%'],
startAngle: 180,
data: [
{
name: '',
value: 40,
itemStyle: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(31,112,255,0.53)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(105,215,255,0.53)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,255,255,0.53)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
name: '',
value: sum * 2 - 40,
itemStyle: {
color: 'transparent'
}
}
]
},
{
type: 'pie',
hoverAnimation: false,
label: {
show: false
},
clockwise: false,
center: ['50%', '100%'],
radius: ['140%', '173%'],
startAngle: 0,
data: [
{
name: '',
value: 10,
itemStyle: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(96,48,170,0.6)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(185,139,255,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,255,255,0.53)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
name: '',
value: sum * 2 - 10,
itemStyle: {
color: 'transparent'
}
}
]
},
{
type: 'pie',
label: {
show: false
},
legendHoverLink: false,
hoverAnimation: false,
center: ['50%', '100%'],
radius: ['150%', '163%'],
startAngle: 180,
/* itemStyle: {
normal: {
borderWidth: 15,
borderColor:'transparent'
}
}, */
data: [
{
name: '国内',
value: 50,
itemStyle: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1F70FF' // 0% 处的颜色
},
{
offset: 0.33,
color: '#6BD8FF' // 0% 处的颜色
},
{
offset: 0.66,
color: '#69D7FF' // 0% 处的颜色
},
{
offset: 1,
color: '#B8F9FF' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
name: '国际', // 实际显示部分是总量-用量
value: 30,
itemStyle: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#6030AA' // 0% 处的颜色
},
{
offset: 0.5,
color: '#B98BFF' // 0% 处的颜色
},
{
offset: 1,
color: '#F1EAFF' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
name: '',
value: sum,
itemStyle: {
color: 'transparent'
}
}
]
}
]
};