wardrobe/tm-vuetify/tool/function/crender/graph/ring.js

/**
 * 环形图。
 * 作者：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;