<!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
<template>
	<div class="chart-container">
		<div id="farmtype" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

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

			myEcharts() {


				var chartDom = document.getElementById('farmtype');
				var myChart = echarts.init(chartDom);
				var color = ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'];
				var option;
				option = {
				    color:color,
				    tooltip : {
				        formatter: "{b}：{c}%"
				    },
				    
				    
				    legend: {
						textStyle:{
							color:'#fffff',
							fontSize:10
						},
						itemWidth:15,
				        orient: 'vertical',
				        left: '10%',
						top:'5%',
				        data: ['一般修剪', '浇水', '除草', '绿篱修剪', '病虫害防治', '施肥', '伐除', '其他']
				    },
				    series: [
				        {
				            name: '',
				            type: 'pie',
				            radius: '80%',
				            center: ['65%', '48%'],
				            data:[
				                {value:40, name:'一般修剪'},
				                {value:30, name:'浇水'},
				                {value:25, name:'除草'},
				                {value:18, name:'绿篱修剪'},
				                {value:10, name:'病虫害防治'},
				                {value:5, name:'施肥'},
				                {value:4, name:'伐除'},
				                {value:3, name:'其他'}
				            ],
				            emphasis: {
				                itemStyle: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            },
				            label: {
				                normal: {
				                    show: false,
				                }
				            }
				        }
				    ]
				};
				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>
