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

<!-- **************************************NO.6 矿坑*************************************** -->
<template>
	<div class="chart-container">
		<div id="pitG1" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

		methods: {
      getG1() {
        let that = this
        getG1().then(res => {
          this.source = res.data
          console.log("联动车辆统计", res.data)
          that.myEcharts()
        })
      },
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q

			myEcharts() {


				var chartDom = document.getElementById('pitG1');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
				var option;
				option = {

				    color:color,
				    tooltip : {
				        trigger: 'item',
				        formatter: "{b}: {c}"
				    },
				    toolbox: {
				        show : true,

				    },

				    series : [
				        {
				            name:'业务警种',
				            type:'pie',
				            roseType: true,
				            radius : ['50%', '70%'],
				            label: {
				              show: true,
				              formatter: "{b} {c}",
							  textStyle: {
							      fontSize: 10 ,

							  }

				            },
				            data:this.source
				        }
				    ]
				};
				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>