Project_yhfu/src/views/bigdata/chart-waterintake.vue

<!-- **************************************NO.15 取水口*************************************** -->
<template>
	<div class="chart-container">
		<div id="chartPitG4" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
  import {getG4} from '@/api/bigdata'
	export default {
		name: 'chartPitG4',
		data() {
			return {
        source: [],
				count: 0
			}
		},
		mounted() {
			// this.myEcharts()
			this.getG4()

		},

		methods: {
      getG4() {
        let that = this
        getG4().then(res => {
          this.source = res.data
          console.log("河流资源统计", res.data)
          that.myEcharts()
        })
      },
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=AQ8Ea8ewtkr0NVzH
			myEcharts() {


				var chartDom = document.getElementById('chartPitG4');
				var myChart = echarts.init(chartDom);
				var option;
				  option = {
				     color: ['#1890FF', '#12DDA1', '#F78048', '#FFB026', '#FD4D63', 'rgba(255,255,255,.5)'],
				     tooltip: {
				         trigger: 'item',
				         padding: [10, 10, 10, 10],
				         formatter: '{b} :<br/> {d}%',
				     },
				     series: [
				         {
				             name: '',
				             type: 'pie',
				             radius: ['36%', '66%'],
				             center: ['50%', '50%'],
				             label: {
				                 fontSize: 10,
				                 color: '#00a0e5',
				                 formatter: '{b} {c}',
				                 // 自定义富文本样式

				             },
				             labelLine: {
				                 show: true,
				                 // length: 6,
				                 // length2: 15
				             },
				             data: this.source,
				         },
				         {
				             type: 'pie',
				             radius: ['36%', '43%'],
				             center: ['50%', '50%'],
				             silent: true,
				             data: [
				                 {
				                     name: '',
				                     value: 1,
				                 },
				             ],
				         },
				     ],
				 };
				option && myChart.setOption(option);
			},

		},


	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.chart-container {
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 10px;
		display: flex;
	}
</style>