var saleAmountTotal = 88;
var saleAmountTotal2 = 99;
const cos = Math.cos;
const sin = Math.sin;
const PI = Math.PI;
// 计算占比
const d_val_p = saleAmountTotal/ (saleAmountTotal+saleAmountTotal2) * 100;
const i_val_p = saleAmountTotal2/ (saleAmountTotal+saleAmountTotal2)* 100;
// 计算圆心角
const d_angle = PI * d_val_p / 50 / 2;
const i_angle = PI * i_val_p / 50 / 2;
// 计算渐变起点和终点
const d_pointStart = [
0.5 - 0.5 * cos(d_angle) * sin(d_angle),
0.5 + 0.5 * cos(d_angle) * cos(d_angle)
];
const d_pointEnd = [
0.5 - 0.5 * sin(d_angle),
0.5 + 0.5 * cos(d_angle)
];
const i_pointStart = [
0.5 - 0.5 * cos(i_angle) * sin(i_angle),
0.5 + 0.5 * cos(i_angle) * cos(i_angle)
];
const i_pointEnd = [
0.5 - 0.5 * sin(i_angle),
0.5 + 0.5 * cos(i_angle)
];
// 定义数据
var data_10000001 = [ {
value : saleAmountTotal,
name : '境内',
itemStyle: {
normal: {
color: {
type: 'linear',
x: d_pointStart[0],
y: d_pointStart[1],
x2: d_pointEnd[0],
y2: d_pointEnd[1],
colorStops: [
// !! 在此添加渐变过程色 !!
{ offset: 0, color: '#2A8EFB' },
{ offset: 1, color: '#30C3FF' }
]
}
}
}
}, {
value : saleAmountTotal2,
name : '境外',
itemStyle: {
normal: {
color: {
type: 'linear',
x: i_pointStart[0],
y: i_pointStart[1],
x2: i_pointEnd[0],
y2: i_pointEnd[1],
colorStops: [
// !! 在此添加渐变过程色 !!
{ offset: 0, color: '#FFB61F' },
{ offset: 1, color: '#FF8928' }
]
}
}
}
} ];
option = {
/*
* tooltip: { trigger: 'item', formatter: "{b}:{c}人次" },
*/
legend : {
orient : 'vertical',
bottom : 'left',
data : [ '境内', '境外' ],
icon : 'circle',
formatter : function(name) {
var target;
for (let i = 0; i < data_10000002.length; i++) {
if (data_10000002[i].name === name) {
target = data_10000002[i].value
}
}
var arr = [ "{b|" + name + "}" + "{a|" + target
+ "}" + "人次" ];
return arr.join("\n");
},
textStyle : {
color : "rgba(51, 51, 51, 1)",
rich : {
a : {
fontSize : 18,
color : "rgba(51, 51, 51, 1)",
padding : 5
},
b : {
fontSize : 14,
color : "rgba(138, 138, 138, 1)"
}
}
}
},
tooltip: {
trigger: 'item',
position:['10%', '-8%'],
formatter: "{b}: {c}人次({d}%)"
},
graphic : [ {
type : 'text',
left : 'center',
top : '28%',
style : {
text : parseInt(type2.saleVolumnTotal),
fill : '#333333',
width : 30,
height : 30,
fontSize : 18,
textAlign : 'center',
fontFamily : "SourceHanSansSC"
}
}, {
type : 'text',
left : 'center',
top : '39%',
style : {
text : '总人次',
fill : '#8A8A8A',
width : 30,
height : 30,
fontSize : 14,
fontFamily : "SourceHanSansSC"
}
} ],
color : [ 'rgba(48, 195, 255, 1)', 'rgba(255, 182, 31, 1)' ],
series : [ {
name : '总人次',
type : 'pie',
radius : [ '45%', '70%' ],
center : [ '50%', '35%' ],
data : data_10000002,
hoverAnimation:false,
startAngle:270, //定义颜色渐变起始角度
avoidLabelOverlap: false,
label : {
show : false
},
labelLine : {
normal : {
show : false
}
}
} ]
};
定义颜色渐变起始角度startAngle:270