v1.0.0-beta 源码正式开源

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

@@ -0,0 +1,136 @@
+
+/**
+ * 环形图。
+ * 作者：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;