JT-CIM/src/views/Table/components/TianluEngin.vue

<template>
	<div class="Chart">
		<div class="fonts">
			100%
		</div>
		<div class="bottomFonts">
			道路通达率
		</div>
		
	</div>
	<div class="text">
		<div class="left">
			<div class="leftTop">11.2km</div>
			<div class="leftMid">田路总长度</div>
			<div class="leftTop">0.8km</div>
			<div class="leftMid">机耕路长度</div>
		</div>
		<div class="right">
			<div class="rightTop">1.8km</div>
			<div class="rightMid">主路长度</div>
			<div class="rightTop">0.4km</div>
			<div class="rightMid">生产路长度</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				option: {},
				value: 50,
				angle: 30
			}
		},
		created() {

		},
		mounted() {
			
		},
		methods: {
			/* getCirlPoint(x0, y0, r, angle) {
				let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
				let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
				return {
					x: x1,
					y: y1
				}
			},
			typeCharts() {
				this.option = this.getOption();
				// var chartDom = document.getElementById('echarts');
				// var myChart = echarts.init(chartDom);
				// myChart.setOption(option, true);
			},
			getOption(data) {
				let angle = 30;
				let option = {
					title: {
						text: '{a|' + '企业' + '}',
						x: 'center',
						y: 'center',
						textStyle: {
							rich: {
								a: {
									fontSize: 20,
									color: '#29EEF3'
					   },

								c: {
									fontSize: 16,
									color: '#ffffff',
									// padding: [5,0]
								}
							}
						}
					},
					series: [{
							name: "ring5",
							type: 'custom',
							coordinateSystem: "none",
							renderItem: function(params, api) {
								return {
									type: 'arc',
									shape: {
										cx: api.getWidth() / 2,
										cy: api.getHeight() / 2,
										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
										startAngle: (0 + angle) * Math.PI / 180,
										endAngle: (90 + angle) * Math.PI / 180
									},
									style: {
										stroke: "#0CD3DB",
										fill: "transparent",
										lineWidth: 1.5
									},
									silent: true
								};
							},
							data: [0]
						},
						{
							name: "ring5",
							type: 'custom',
							coordinateSystem: "none",
							renderItem: function(params, api) {
								return {
									type: 'arc',
									shape: {
										cx: api.getWidth() / 2,
										cy: api.getHeight() / 2,
										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
										startAngle: (180 + angle) * Math.PI / 180,
										endAngle: (270 + angle) * Math.PI / 180
									},
									style: {
										stroke: "#0CD3DB",
										fill: "transparent",
										lineWidth: 1.5
									},
									silent: true
								};
							},
							data: [0]
						},
						{
							name: "ring5",
							type: 'custom',
							coordinateSystem: "none",
							renderItem: function(params, api) {
								return {
									type: 'arc',
									shape: {
										cx: api.getWidth() / 2,
										cy: api.getHeight() / 2,
										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
										startAngle: (270 + -angle) * Math.PI / 180,
										endAngle: (40 + -angle) * Math.PI / 180
									},
									style: {
										stroke: "#0CD3DB",
										fill: "transparent",
										lineWidth: 1.5
									},
									silent: true
								};
							},
							data: [0]
						},
						{
							name: "ring5",
							type: 'custom',
							coordinateSystem: "none",
							renderItem: function(params, api) {
								return {
									type: 'arc',
									shape: {
										cx: api.getWidth() / 2,
										cy: api.getHeight() / 2,
										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
										startAngle: (90 + -angle) * Math.PI / 180,
										endAngle: (220 + -angle) * Math.PI / 180
									},
									style: {
										stroke: "#0CD3DB",
										fill: "transparent",
										lineWidth: 1.5
									},
									silent: true
								};
							},
							data: [0]
						},
						{
							name: "ring5",
							type: 'custom',
							coordinateSystem: "none",
							renderItem: function(params, api) {
								let x0 = api.getWidth() / 2;
								let y0 = api.getHeight() / 2;
								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
								let point = {
									x:30,
									y:40
								}
								return {
									type: 'circle',
									shape: {
										cx: point.x,
										cy: point.y,
										r: 4
									},
									style: {
										stroke: "#0CD3DB", //粉
										fill: "#0CD3DB"
									},
									silent: true
								};
							},
							data: [0]
						},
						{
							name: "ring5", //绿点
							type: 'custom',
							coordinateSystem: "none",
							renderItem: function(params, api) {
								let x0 = api.getWidth() / 2;
								let y0 = api.getHeight() / 2;
								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
								let point = {
									x:30,
									y:40
								}
								return {
									type: 'circle',
									shape: {
										cx: point.x,
										cy: point.y,
										r: 4
									},
									style: {
										stroke: "#0CD3DB", //绿
										fill: "#0CD3DB"
									},
									silent: true
								};
							},
							data: [0]
						},
						{
							name: '覆盖率',
							type: 'pie',
							radius: ['58%', '45%'],
							silent: true,
							clockwise: true,
							startAngle: 90,
							z: 0,
							zlevel: 0,
							label: {
								normal: {
									position: "center",

								}
							},
							data: [{
									value: 79,
									name: "",
									itemStyle: {
										normal: {
											color: { // 完成的圆环的颜色
												colorStops: [{
													offset: 0,
													color: '#4FADFD' // 0% 处的颜色
												}, {
													offset: 1,
													color: '#28E8FA' // 100% 处的颜色
												}]
											},
										}
									}
								},
								{
									value: 100 - this.value,
									name: "",
									label: {
										normal: {
											show: false
										}
									},
									itemStyle: {
										normal: {
											color: "#173164"
										}
									}
								}
							]
						},
						{
							name: "",
							type: "gauge",
							radius: "58%",
							center: ['50%', '50%'],
							startAngle: 0,
							endAngle: 359.9,
							splitNumber: 8,
							hoverAnimation: true,
							axisTick: {
								show: false
							},
							splitLine: {
								length: 60,
								lineStyle: {
									width: 5,
									color: "#061740"
								}
							},
							axisLabel: {
								show: false
							},
							pointer: {
								show: false
							},
							axisLine: {
								lineStyle: {
									opacity: 0
								}
							},
							detail: {
								show: false
							},
							data: [{
								value: 0,
								name: ""
							}]
						},

					]

				};
				return option;
			} */

		},

	}
</script>

<style scoped>
	.Chart {

		height: 130rem;
		width: 130rem;
		background:url("@/assets/images/tongda.png") no-repeat;
		background-size: 100% 100%;
		display: inline-block;
		margin-top: 40rem;
		margin-right: 400rem;
		position: absolute;
	}
	.fonts{
		font-size: 24rem;
		text-align: center;
		color: rgb(200, 250, 255);
		
	}
	.bottomFonts{
		margin-top: 90rem;
		font-size: 18rem;
		color: rgb(200, 250, 255);
	}

	.text {
		margin-top: 10rem;
		height: 170rem;
		width: 165rem;
		margin-left: 150rem;
		display: inline-block;
		position: relative;
	}

	.left {
		width: 50%;
		float: left;
		

	}

	.leftTop {
		margin-top: 30rem;
		color: rgb(200, 250, 255);
		font-size: 24rem;
		font-weight: bold;
	}

	.leftMid {
		color: rgb(200, 250, 255);
		font-size: 16rem;
	}

	.right {
		width: 50%;
		float: right;
	}
	.rightTop {
		margin-top: 30rem;
		color: rgb(200, 250, 255);
		font-size: 24rem;
		font-weight: bold;
	}
	
	.rightMid {
		color: rgb(200, 250, 255);
		font-size: 16rem;
	}
	
</style>