构建版本修改
This commit is contained in:
		
							
								
								
									
										91
									
								
								components/AiEchart/template/bar/barChart1.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										91
									
								
								components/AiEchart/template/bar/barChart1.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,91 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, | ||||
|     itemHeight: 5, | ||||
|     itemWidth: 16, | ||||
|     textStyle: { color: '#fff' } | ||||
|   }, | ||||
|   yAxis: { | ||||
|     nameGap: 23, | ||||
|     minInterval: 1, | ||||
|     splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } }, | ||||
|     axisLabel: { color: '#fff' }, | ||||
|     axisPointer: { show: false } | ||||
|   }, | ||||
|   axisPointer: { | ||||
|     type: 'shadow', | ||||
|     triggerTooltip: false, | ||||
|     shadowStyle: { color: 'rgba(46, 153, 255, .2)' } | ||||
|   }, | ||||
|   color: [ | ||||
|     { | ||||
|       type: 'linear', | ||||
|       x: 0, | ||||
|       x2: 0, | ||||
|       y: 0, | ||||
|       y2: 1, | ||||
|       colorStops: [ | ||||
|         { offset: 0, color: 'rgba(66, 187, 255, 1)' }, | ||||
|         { offset: 1, color: 'rgba(37, 143, 255, 0.2)' } | ||||
|       ] | ||||
|     }, | ||||
|     { | ||||
|       type: 'linear', | ||||
|       x: 0, | ||||
|       x2: 0, | ||||
|       y: 0, | ||||
|       y2: 1, | ||||
|       colorStops: [ | ||||
|         { offset: 0, color: 'rgba(66, 255, 254, 1)' }, | ||||
|         { offset: 1, color: 'rgba(37, 255, 246, 0.2)' } | ||||
|       ] | ||||
|     }, | ||||
|     { | ||||
|       type: 'linear', | ||||
|       x: 0, | ||||
|       x2: 0, | ||||
|       y: 0, | ||||
|       y2: 1, | ||||
|       colorStops: [ | ||||
|         { offset: 0, color: 'rgba(97, 253, 185, 1)' }, | ||||
|         { offset: 1, color: 'rgba(97, 253, 185, 0.2)' } | ||||
|       ] | ||||
|     }, | ||||
|     { | ||||
|       type: 'linear', | ||||
|       x: 0, | ||||
|       x2: 0, | ||||
|       y: 0, | ||||
|       y2: 1, | ||||
|       colorStops: [ | ||||
|         { offset: 0, color: 'rgba(253, 108, 57, 1)' }, | ||||
|         { offset: 1, color: 'rgba(253, 108, 57, 0.2)' } | ||||
|       ] | ||||
|     }, | ||||
|     { | ||||
|       type: 'linear', | ||||
|       x: 0, | ||||
|       x2: 0, | ||||
|       y: 0, | ||||
|       y2: 1, | ||||
|       colorStops: [ | ||||
|         { offset: 0, color: 'rgba(248, 187, 25, 1)' }, | ||||
|         { offset: 1, color: 'rgba(55, 39, 5, 1)' } | ||||
|       ] | ||||
|     } | ||||
|   ], | ||||
|   daemon: { | ||||
|     type: 'bar', | ||||
|     label: { | ||||
|       show: true, | ||||
|       position: 'top', | ||||
|       color: '#fff', | ||||
|       formatter: e => { | ||||
|         return e.data[e.seriesName] || '' | ||||
|       } | ||||
|     }, | ||||
|     barWidth: 16, | ||||
|     barCategoryGap: 40, | ||||
|     itemStyle: {} | ||||
|   } | ||||
| } | ||||
							
								
								
									
										24
									
								
								components/AiEchart/template/bar/barChart2.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								components/AiEchart/template/bar/barChart2.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,24 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|     itemWidth: 16, itemHeight: 5 | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', | ||||
|     textStyle: {color: '#fff'} | ||||
|   }, | ||||
|   yAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff'}, axisPointer: {show: false} | ||||
|   }, | ||||
|   axisPointer: { | ||||
|     type: 'shadow', show: true, | ||||
|     shadowStyle: {color: 'rgba(46, 153, 255, .2)'} | ||||
|   }, | ||||
|   daemon: {type: 'bar', barWidth: 2, barGap: 4} | ||||
| } | ||||
							
								
								
									
										33
									
								
								components/AiEchart/template/bar/barChart3.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										33
									
								
								components/AiEchart/template/bar/barChart3.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,33 @@ | ||||
| export default { | ||||
|   legend: {show: false}, | ||||
|   yAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff'}, axisPointer: {show: false} | ||||
|   }, | ||||
|   axisPointer: { | ||||
|     type: 'none', show: true, triggerTooltip: false, | ||||
|   }, | ||||
|   daemon: { | ||||
|     type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'}, | ||||
|     barWidth: 24, | ||||
|     showBackground: true, | ||||
|     backgroundStyle: { | ||||
|       color: 'rgba(123, 165, 255, .2)' | ||||
|     }, | ||||
|     itemStyle: { | ||||
|       color: { | ||||
|         type: 'linear', x: 0, x2: 0, y: 0, y2: 1, | ||||
|         colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}] | ||||
|       } | ||||
|     }, | ||||
|     emphasis: { | ||||
|       itemStyle: { | ||||
|         color: { | ||||
|           type: 'linear', x: 0, x2: 0, y: 0, y2: 1, | ||||
|           colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}] | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
							
								
								
									
										23
									
								
								components/AiEchart/template/bar/barChart5.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										23
									
								
								components/AiEchart/template/bar/barChart5.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,23 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|     itemWidth: 16, itemHeight: 5 | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', | ||||
|     textStyle: {color: '#fff'} | ||||
|   }, | ||||
|   yAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff'}, axisPointer: {show: false} | ||||
|   }, | ||||
|   axisPointer: { | ||||
|     type: 'none', show: true, triggerTooltip: false, | ||||
|   }, | ||||
|   daemon: {type: 'bar', barWidth: 12, stack: 'stack'} | ||||
| } | ||||
							
								
								
									
										45
									
								
								components/AiEchart/template/bar/barChart7.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										45
									
								
								components/AiEchart/template/bar/barChart7.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,45 @@ | ||||
| export default { | ||||
|   legend: {show: false}, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', | ||||
|     backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}, | ||||
|     axisPointer: { | ||||
|       type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'}, | ||||
|       label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'} | ||||
|     } | ||||
|   }, | ||||
|   yAxis: { | ||||
|     type: 'category', | ||||
|     axisLabel: {color: '#fff', fontSize: 14}, | ||||
|     axisTick: {show: false}, | ||||
|     axisLine: {show: false}, | ||||
|   }, | ||||
|   xAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff', fontSize: 14}, | ||||
|   }, | ||||
|   daemon: { | ||||
|     type: 'bar', barWidth: 10, barGap: '40%', | ||||
|     label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14}, | ||||
|     showBackground: true, | ||||
|     backgroundStyle: { | ||||
|       color: 'rgba(123, 165, 255, .2)' | ||||
|     }, | ||||
|     itemStyle: { | ||||
|       color: { | ||||
|         type: 'linear', x: 0, x2: 1, y: 0, y2: 0, | ||||
|         colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}] | ||||
|       } | ||||
|     }, | ||||
|     emphasis: { | ||||
|       label: {color: '#28FBFF', position: 'right'}, | ||||
|       itemStyle: { | ||||
|         color: { | ||||
|           type: 'linear', x: 0, x2: 1, y: 0, y2: 0, | ||||
|           colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}] | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
							
								
								
									
										36
									
								
								components/AiEchart/template/bar/barChart8.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										36
									
								
								components/AiEchart/template/bar/barChart8.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,36 @@ | ||||
| import tools from "../tools"; | ||||
|  | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|     itemWidth: 16, itemHeight: 5 | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', | ||||
|     backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'} | ||||
|   }, | ||||
|   yAxis: { | ||||
|     type: 'category', | ||||
|     axisLabel: {color: '#fff', fontSize: 14}, | ||||
|     axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}}, | ||||
|     axisPointer: {show: false}, | ||||
|   }, | ||||
|   xAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff', fontSize: 14}, | ||||
|   }, | ||||
|   daemon: { | ||||
|     type: 'bar', barWidth: 10, | ||||
|     itemStyle: { | ||||
|       color: ({color}) => ({ | ||||
|         type: 'linear', x: 0, x2: 1, y: 0, y2: 0, | ||||
|         colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}] | ||||
|       }) | ||||
|     }, | ||||
|   } | ||||
| } | ||||
							
								
								
									
										29
									
								
								components/AiEchart/template/bar/barChart9.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								components/AiEchart/template/bar/barChart9.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,29 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|     itemWidth: 16, itemHeight: 5 | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 80, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}, | ||||
|   }, | ||||
|   yAxis: { | ||||
|     type: 'category', | ||||
|     axisLabel: {color: '#fff', fontSize: 14, margin: 23}, | ||||
|     axisTick: {show: false}, | ||||
|     axisLine: {show: false}, | ||||
|   }, | ||||
|   xAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff', fontSize: 14}, | ||||
|   }, | ||||
|   daemon: { | ||||
|     type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack', | ||||
|     showBackground: true, | ||||
|     backgroundStyle: {color: 'rgba(123, 165, 255, .2)'} | ||||
|   } | ||||
| } | ||||
							
								
								
									
										40
									
								
								components/AiEchart/template/line/lineChart1.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										40
									
								
								components/AiEchart/template/line/lineChart1.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,40 @@ | ||||
| import tools from '../tools'; | ||||
|  | ||||
| export default { | ||||
| 	legend: { show: false }, | ||||
| 	grid: { | ||||
| 		left: 50, | ||||
| 		right: 0 | ||||
| 	}, | ||||
| 	tooltip: { | ||||
| 		trigger: 'axis', | ||||
| 		backgroundColor: 'rgba(14, 51, 111, 0.9)', | ||||
| 		borderColor: '#1A6ABC', | ||||
| 		textStyle: { color: '#fff' }, | ||||
| 		axisPointer: { type: 'cross' } | ||||
| 	}, | ||||
| 	yAxis: { | ||||
| 		nameGap: 23, | ||||
| 		minInterval: 1, | ||||
| 		splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } }, | ||||
| 		axisLabel: { color: '#fff' }, | ||||
| 		axisPointer: { snap: true } | ||||
| 	}, | ||||
| 	daemon: (color) => ({ | ||||
| 		showSymbol: false, | ||||
| 		lineStyle: { shadowBlur: 4, shadowOffsetY: 2 }, | ||||
| 		areaStyle: { | ||||
| 			color: { | ||||
| 				type: 'linear', | ||||
| 				x: 0, | ||||
| 				x2: 0, | ||||
| 				y: 0, | ||||
| 				y2: 1, | ||||
| 				colorStops: [ | ||||
| 					{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.5) }, | ||||
| 					{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.5) } | ||||
| 				] | ||||
| 			} | ||||
| 		} | ||||
| 	}) | ||||
| }; | ||||
							
								
								
									
										27
									
								
								components/AiEchart/template/line/lineChart2.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								components/AiEchart/template/line/lineChart2.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,27 @@ | ||||
| import tools from "../tools"; | ||||
|  | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', | ||||
|     textStyle: {color: '#fff'} | ||||
|   }, | ||||
|   daemon: color => ({ | ||||
|     showSymbol: false, | ||||
|     lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, | ||||
|     areaStyle: { | ||||
|       color: { | ||||
|         type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [ | ||||
|           {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, | ||||
|           {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)}, | ||||
|         ] | ||||
|       } | ||||
|     } | ||||
|   }) | ||||
| } | ||||
							
								
								
									
										16
									
								
								components/AiEchart/template/line/lineChart3.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										16
									
								
								components/AiEchart/template/line/lineChart3.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,16 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', | ||||
|     textStyle: {color: '#fff'} | ||||
|   }, | ||||
|   daemon: { | ||||
|     lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, | ||||
|   } | ||||
| } | ||||
							
								
								
									
										19
									
								
								components/AiEchart/template/line/lineChart4.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								components/AiEchart/template/line/lineChart4.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,19 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 0, itemGap: 16, | ||||
|     textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, | ||||
|   }, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', | ||||
|     textStyle: {color: '#fff'} | ||||
|   }, | ||||
|   daemon: { | ||||
|     lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, | ||||
|     emphasis: { | ||||
|       focus: 'self' | ||||
|     } | ||||
|   } | ||||
| } | ||||
							
								
								
									
										31
									
								
								components/AiEchart/template/line/lineChart5.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										31
									
								
								components/AiEchart/template/line/lineChart5.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,31 @@ | ||||
| import tools from "../tools"; | ||||
|  | ||||
| export default { | ||||
|   legend: {show: false}, | ||||
|   grid: { | ||||
|     left: 50, right: 0 | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', | ||||
|     textStyle: {color: '#fff'}, | ||||
|     axisPointer: {type: 'cross'} | ||||
|   }, | ||||
|   yAxis: { | ||||
|     nameGap: 23, minInterval: 1, | ||||
|     splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, | ||||
|     axisLabel: {color: '#fff'}, | ||||
|     axisPointer: {snap: true} | ||||
|   }, | ||||
|   daemon: color=> ({ | ||||
|     showSymbol: false, smooth: true, | ||||
|     lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, | ||||
|     areaStyle: { | ||||
|       color: { | ||||
|         type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [ | ||||
|           {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, | ||||
|           {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)}, | ||||
|         ] | ||||
|       } | ||||
|     } | ||||
|   }) | ||||
| } | ||||
							
								
								
									
										26
									
								
								components/AiEchart/template/pie/pieChart1.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								components/AiEchart/template/pie/pieChart1.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,26 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 20, | ||||
|     top: 'middle', | ||||
|     orient: 'vertical', | ||||
|     textStyle: {color: "#fff", fontSize: 14} | ||||
|   }, | ||||
|   grid: { | ||||
|     top: '0%', | ||||
|     left: '0%', | ||||
|     right: '0px', | ||||
|     bottom: '0%' | ||||
|   }, | ||||
|   xAxis: {show: false}, | ||||
|   yAxis: {show: false}, | ||||
|   tooltip: { | ||||
|   }, | ||||
|   series: { | ||||
|     type: "pie", | ||||
|     minShowLabelAngle: 10, | ||||
|     radius: '50%', | ||||
|     label: { | ||||
|       show: false | ||||
|     } | ||||
|   } | ||||
| } | ||||
							
								
								
									
										96
									
								
								components/AiEchart/template/pie/pieChart2.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										96
									
								
								components/AiEchart/template/pie/pieChart2.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,96 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     bottom: 0, | ||||
|     itemGap: 14, | ||||
|     itemWidth: 16, | ||||
|     itemHeight: 5, | ||||
|     textStyle: {color: "#fff", fontSize: 14} | ||||
|   }, | ||||
|   grid: { | ||||
|     height: 260 | ||||
|   }, | ||||
|   xAxis: {show: false}, | ||||
|   yAxis: {show: false}, | ||||
|   tooltip: { | ||||
|     backgroundColor: "rgba(14, 51, 111, 0.9)", | ||||
|     borderColor: "#1A6ABC", | ||||
|     textStyle: {color: "#fff"} | ||||
|   }, | ||||
|   series: { | ||||
|     type: "pie", | ||||
|     minShowLabelAngle: 10, | ||||
|     radius: [70, 81], | ||||
|     itemStyle: { | ||||
|       borderColor: "#fff", | ||||
|       borderWidth: 2 | ||||
|     }, | ||||
|     label: { | ||||
|       color: "#A8D7F3", | ||||
|       fontSize: 14, | ||||
|       formatter: "{name|{b}}\n{v|{d}%}", | ||||
|       minMargin: 5, | ||||
|       edgeDistance: 10, | ||||
|       lineHeight: 22, | ||||
|       rich: { | ||||
|         v: { | ||||
|           color: "#fff" | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     labelLine: {}, | ||||
|     labelLayout: function (params) { | ||||
|       let points = params.labelLinePoints, | ||||
|           isLeft = points[2][0] < points[1][0] | ||||
|       points[2][0] = | ||||
|           points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1) | ||||
|       return { | ||||
|         labelLinePoints: points | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   render: (h, params) => { | ||||
|     const formatNum = num => { | ||||
|       if (num >= 10000000) { | ||||
|         return num / 10000000 + "千万" | ||||
|       } | ||||
|  | ||||
|       if (num >= 10000) { | ||||
|         return num / 10000 + "万" | ||||
|       } | ||||
|  | ||||
|       return parseFloat(num.toFixed(2)) | ||||
|     } | ||||
|  | ||||
|     let total = params.data.reduce((t, e) => { | ||||
|       return t + Number(Object.values(e)?.[1] || 0) | ||||
|     }, 0) | ||||
|     return h( | ||||
|         "div", | ||||
|         { | ||||
|           style: { | ||||
|             height: "162px", | ||||
|             width: "162px", | ||||
|             color: "#8BCCFF", | ||||
|             left: "50%", | ||||
|             top: "50%", | ||||
|             display: "flex", | ||||
|             alignItems: "center", | ||||
|             justifyContent: "center", | ||||
|             flexDirection: "column", | ||||
|             position: "absolute", | ||||
|             transform: "translate(-50%,-50%)", | ||||
|             backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`, | ||||
|             backgroundPosition: "center" | ||||
|           } | ||||
|         }, | ||||
|         [ | ||||
|           h( | ||||
|               "span", | ||||
|               {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}}, | ||||
|               formatNum(total) | ||||
|           ), | ||||
|           h("span", null, "总量") | ||||
|         ] | ||||
|     ) | ||||
|   } | ||||
| } | ||||
							
								
								
									
										98
									
								
								components/AiEchart/template/pie/pieChart3.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										98
									
								
								components/AiEchart/template/pie/pieChart3.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,98 @@ | ||||
| export default { | ||||
|   legend: { | ||||
|     right: 20, | ||||
|     top: 'middle', | ||||
|     orient: 'vertical', | ||||
|     textStyle: {color: "#fff", fontSize: 14} | ||||
|   }, | ||||
|   grid: { | ||||
|     top: '0%', | ||||
|     left: '0%', | ||||
|     right: '0px', | ||||
|     bottom: '0%' | ||||
|   }, | ||||
|   xAxis: {show: false}, | ||||
|   yAxis: {show: false}, | ||||
|   tooltip: { | ||||
|   }, | ||||
|   series: { | ||||
|     type: "pie", | ||||
|     minShowLabelAngle: 10, | ||||
|     radius: [50, 71], | ||||
|     itemStyle: { | ||||
|       borderColor: "#8d1419", | ||||
|       borderWidth: 2 | ||||
|     }, | ||||
|     label: { | ||||
|       show: false | ||||
|     }, | ||||
|     labelLine: {} | ||||
|   }, | ||||
|   render: (h, params) => { | ||||
|     const formatNum = num => { | ||||
|       if (num >= 10000000) { | ||||
|         return num / 10000000 + "千万" | ||||
|       } | ||||
|  | ||||
|       if (num >= 10000) { | ||||
|         return num / 10000 + "万" | ||||
|       } | ||||
|  | ||||
|       return parseFloat(num.toFixed(2)) | ||||
|     } | ||||
|  | ||||
|     let total = params.data.reduce((t, e) => { | ||||
|       return t + Number(Object.values(e)?.[1] || 0) | ||||
|     }, 0) | ||||
|     return h( | ||||
|         "div", | ||||
|         { | ||||
|           style: { | ||||
|             height: "162px", | ||||
|             width: "162px", | ||||
|             color: "#8BCCFF", | ||||
|             left: "50%", | ||||
|             top: "50%", | ||||
|             zIndex: '-1', | ||||
|             display: "flex", | ||||
|             alignItems: "center", | ||||
|             justifyContent: "center", | ||||
|             flexDirection: "column", | ||||
|             position: "absolute", | ||||
|             transform: "translate(-50%,-50%)", | ||||
|             backgroundPosition: "center" | ||||
|           } | ||||
|         }, | ||||
|         [ | ||||
|           h( | ||||
|             'span', | ||||
|             { | ||||
|               style: { | ||||
|                 'font-size': '32px', | ||||
|                 'font-weight': 'bold', | ||||
|                 'margin-bottom': '3px', | ||||
|                 'color': '#CEE1FF', | ||||
|                 'line-height': '28px', | ||||
|                 'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)', | ||||
|                 'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)', | ||||
|                 '-webkit-background-clip': 'text', | ||||
|                 '-webkit-text-fill-color': 'transparent' | ||||
|               } | ||||
|             }, | ||||
|             formatNum(total) | ||||
|           ), | ||||
|           h('span', { | ||||
|             style: { | ||||
|               'font-size': '16px', | ||||
|               'color': '#CEE1FF', | ||||
|               'line-height': '16px', | ||||
|               'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)', | ||||
|               'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)', | ||||
|               '-webkit-background-clip': 'text', | ||||
|               '-webkit-text-fill-color': 'transparent' | ||||
|             } | ||||
|           }, "总量") | ||||
|         ] | ||||
|     ) | ||||
|   } | ||||
| } | ||||
							
								
								
									
										24
									
								
								components/AiEchart/template/tools.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								components/AiEchart/template/tools.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,24 @@ | ||||
| export default { | ||||
|   $colorUtils: { | ||||
|     Hex2RGBA(color, alpha = 1) { | ||||
|       let hex = 0; | ||||
|       if (color.charAt(0) == "#") { | ||||
|         if (color.length == 4) { | ||||
|           //检测诸如#FFF简写格式 | ||||
|           color = "#" + color.charAt(1).repeat(2) + | ||||
|               color.charAt(2).repeat(2) + | ||||
|               color.charAt(3).repeat(2); | ||||
|         } | ||||
|         hex = parseInt(color.slice(1), 16); | ||||
|       } | ||||
|       let r = hex >> 16 & 0xFF; | ||||
|       let g = hex >> 8 & 0xFF; | ||||
|       let b = hex & 0xFF; | ||||
|       return `rgba(${r},${g},${b},${alpha})`; | ||||
|     }, | ||||
|     RGBtoHex(r, g, b) { | ||||
|       let hex = r << 16 | g << 8 | b; | ||||
|       return "#" + hex.toString(16); | ||||
|     } | ||||
|   } | ||||
| } | ||||
		Reference in New Issue
	
	Block a user