<!-- **************************************NO.1 数字林业*************************************** -->
<template>
	<div class="chart-container">
		<div id="forest" style="width: 100%; height:25vh;">
		</div>
	</div>
</template>

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

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=OBDtAGjd-BSYx-DO

			myEcharts() {


				var chartDom = document.getElementById('forest');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
				var option;
				var option = {
					grid: {
						top: '5%',
						left: '5%',
						right: '20%',
						bottom: '1%',
						containLabel: true
					},
					tooltip: {
						backgroundColor: 'rgba(65,114,231,0.8)',
					},
					dataset: {
						source: [{
								product: "森林防火",
								未处理: 100,
								处理中: 80,

							},
							{
								product: "病虫灾害",
								未处理: 40,
								处理中: 32,
							},
							{
								product: "动物保护",
								未处理: 70,
								处理中: 60,
							},

						]
					},
					yAxis: {
						type: 'category',
						inverse: true,
						position: 'bottom',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#1c8082',
								fontSize: '12'
							}
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
					},
					xAxis: {
					show: false
					},
					series: [{
							type: 'bar',
							itemStyle: {
								normal: {
									barBorderRadius: 30,
								}
							},
							 label: {
							        show: true,
							        position: 'right'
							      },
						},
						{
							type: 'bar',
							itemStyle: {
								normal: {
									barBorderRadius: 30,
								}
							},
							 label: {
							        show: true,
							        position: 'right',
									padding:[3,0,0,0]
							      },
						},
					],
					color: ['#ff9731', '#0FA2FF'],
					barWidth: 9,
				};

				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>
