JT-CIM-ZHNY/src/views/miaoqing/components/WaterLevelChart.vue

<template>
  	<div style="display: inline-block;float:left ;height: 170rem;width: 160rem;">
  		<jt-echarts style="width: 100%;height: 100%;margin-top:25rem" :chartData="option"></jt-echarts>
  	</div>
  	<div class="text">
  		<div class="left">
  			<div class="leftTop">15.7亩</div>
  			<div class="leftMid">灌溉面积</div>
  			<div class="leftTop">180个</div>
  			<div class="leftMid">灌溉井数</div>
  			<div class="leftTop">15.4km</div>
  			<div class="leftMid">灌溉管网</div>
  		</div>
  		<div class="right">
  			<div class="leftTop">280个</div>
  			<div class="leftMid">覆盖地块</div>
  			<div class="leftTop">83条</div>
  			<div class="leftMid">灌溉水渠</div>
  			<div class="leftTop">8.9km</div>
  			<div class="leftMid">排水管网</div>
  		</div>

  	</div>
  </template>

  <script>
  	export default {
  		data() {
  			return {
  				option: {}
  			}
  		},
  		created() {},
  		mounted() {
  			this.typeCharts()
  		},
  		methods: {
  			typeCharts() {
  				this.option = this.getOption();
  				// var chartDom = document.getElementById('echarts');
  				// var myChart = echarts.init(chartDom);
  				// myChart.setOption(option, true);
  			},
  			getOption(data) {
  				let option = {
  					tooltip: {
  						show: true
  					},
  					series: [{
  						name: '完成',
  						type: 'liquidFill',
  						radius: '130rem',
  						data: [0.80],
  						label: {
  							normal: {
  								color: '#27e5f1',
  								insideColor: '#fff',
  								textStyle: {
  									fontSize: "40rem",
  									fontWeight: 'bold',
  								}
  							}
  						},
  						color: [{
  							type: 'linear',
  							x: 0,
  							y: 1,
  							x2: 0,
  							y2: 0,
  							colorStops: [{
  								offset: 1,
  								color: ['#6a7feb'], // 0% 处的颜色
  							}, {
  								offset: 0,
  								color: ['#27e5f1'], // 100% 处的颜色
  							}],
  							global: false // 缺省为 false
  						}],
  						outline: {
  							show: true,
  							borderDistance: 5,
  							itemStyle: {
  								borderColor: '#27e5f1',
  								borderWidth: 3
  							}
  						}
  					}]

  				};
  				return option;
  			}

  		},

  	}
  </script>

  <style scoped>
  	.text {
  		margin-top: 10rem;
  		height: 170rem;
  		width: 165rem;

  		display: inline-block;
  	}

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

  	}

  	.leftTop {
  		margin-top: 10rem;
  		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: 10rem;
		color: rgb(200, 250, 255);
		font-size: 24rem;
		font-weight: bold;
	}
	
	.rightMid {
		color: rgb(200, 250, 255);
		font-size: 16rem;
	}
  </style>