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

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

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'pit',
		data() {
			return {
				count: 0
			}
		},
		mounted() {
			this.myEcharts()

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q

			myEcharts() {


				var chartDom = document.getElementById('pit');
				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:[
				                {value:20, name:'双辽市'},
				                {value:25, name:'梨树县'},
				                {value:30, name:'伊通县'},
				                {value:35, name:'铁东区'},
								{value:35, name:'铁西区'}
				            ]
				        }
				    ]
				};
				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>