137 lines
2.5 KiB
JavaScript
137 lines
2.5 KiB
JavaScript
|
||
/**
|
||
* 环形图。
|
||
* 作者：tmzdy
|
||
* url:https://jx2d.cn
|
||
*/
|
||
let ring = function (render, config={}) {
|
||
|
||
|
||
let defauletcfg = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
color:["#E91E63","#2196F3","#311B92","#FDD835","#BCAAA4"],
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center'
|
||
},
|
||
series: [{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['20%', '35%'],
|
||
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [{
|
||
value: 1048,
|
||
name: 'Search Engine'
|
||
},
|
||
{
|
||
value: 735,
|
||
name: 'Direct'
|
||
},
|
||
{
|
||
value: 580,
|
||
name: 'Email'
|
||
},
|
||
{
|
||
value: 484,
|
||
name: 'Union Ads'
|
||
},
|
||
{
|
||
value: 300,
|
||
name: 'Video Ads'
|
||
}
|
||
]
|
||
}]
|
||
}
|
||
defauletcfg = {...defauletcfg,...config}
|
||
const [w, h] = render.area;
|
||
//最大圆环厚度。等于圆。
|
||
let lineMaxHeight = w / 2;
|
||
let lineStoreWidth = (parseFloat(defauletcfg.series[0].radius[1]) - parseFloat(defauletcfg.series[0].radius[0]))/100;
|
||
lineStoreWidth =Math.floor( lineStoreWidth*lineMaxHeight);
|
||
let r = parseFloat(defauletcfg.series[0].radius[1])/100 * lineMaxHeight;
|
||
let data = defauletcfg.series[0].data;
|
||
let maxValue = data.map(el => parseInt(el.value));
|
||
|
||
//总数量。
|
||
maxValue = maxValue.reduce((p,c)=>p+c);
|
||
//计算各自的比例数量。保留两位小数点。
|
||
let rang = Math.PI *2;
|
||
//每一个元素的圆弧的长度。
|
||
let rangArray = data.map(el=>{
|
||
let num = parseInt(el.value)/maxValue;
|
||
|
||
return rang*num
|
||
})
|
||
|
||
let dataBlv = data.map((el,index) => {
|
||
let st = index;
|
||
let num = parseFloat(el.value)/maxValue;
|
||
let blv = parseFloat(num.toFixed(2));
|
||
let startAngle = 0;
|
||
let endAngle = 0;
|
||
if(st==0){
|
||
startAngle = 0;
|
||
endAngle = rangArray[st]
|
||
}else{
|
||
let s = rangArray.slice(0,st)
|
||
|
||
startAngle = s.reduce((p,c)=>p+c);
|
||
endAngle = startAngle+rangArray[st]
|
||
}
|
||
|
||
return {...el,
|
||
blv:blv,
|
||
startAngle:startAngle,
|
||
endAngle:endAngle
|
||
};
|
||
});
|
||
|
||
let xf = [];
|
||
dataBlv.forEach((el,index)=>{
|
||
|
||
let cfg = {
|
||
name: 'arc',
|
||
animationCurve: 'liner',
|
||
hover: false,
|
||
drag: false,
|
||
shape: {
|
||
rx: w/2,
|
||
ry: h/2,
|
||
r: r,
|
||
startAngle: el.startAngle,
|
||
endAngle: el.endAngle,
|
||
},
|
||
style: {
|
||
stroke: defauletcfg.color[index],
|
||
lineWidth: lineStoreWidth,
|
||
shadowBlur: 0,
|
||
rotate: 0,
|
||
shadowColor: '#66eece',
|
||
hoverCursor: 'pointer',
|
||
},
|
||
};
|
||
xf.push(cfg)
|
||
|
||
})
|
||
|
||
return xf;
|
||
}
|
||
|
||
export default ring;
|