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

  <template>
 	<div style="display: inline-block;float:left">
 		<jt-echarts style="width: 166rem;height: 166rem;margin:10rem" :chartData="option"></jt-echarts>
 	</div>
	<div class="text">
		123123
	</div>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
 				option: {}
 			}
 		},
 		created() {},
 		mounted() {
 			this.typeCharts0()
 		},
 		methods: {
 
 			typeCharts0() {
 				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: '160rem',
 						data: [0.6],
 						label: {
 							normal: {
 								color: '#27e5f1',
 								insideColor: '#fff',
 								textStyle: {
 									fontSize: 40,
 									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>
	 .text{
		 height:160rem;
		 width:160rem;
		 background-color: red;
		 display: inline-block;
	 }
 </style>