<!-- **************************************NO.8 养殖场分布*************************************** -->
<template>
	<div class="chart-container">
		<div id="farm" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

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

			myEcharts() {


				var chartDom = document.getElementById('farm');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
				var option;
				var data =  [20, 80, 100, 40, 34];
				option = {
				    color: ["#41FF80"],
				    title: {
				        show: false
				    },
				    grid: {
				        top: '15%',
				        right: '12%',
				        bottom: '22%',
				        left: '15%'
				    },
				    tooltip: {
				        show: false
				    },
				    xAxis: {
				        data: [
				            "双辽市",
				            "梨树县",
				            "伊通县",
				            "铁东区",
				            "铁西区",
				        ],
				        axisLine: {
				            show: true, //隐藏X轴轴线
				            lineStyle: {
				                color: '#2D455A'
				            }
				        },
				        axisTick: {
				            show: false //隐藏X轴刻度
				        },
				        axisLabel: {
				            show: true,
				            margin: 14,
				            fontSize: 10,
				            textStyle: {
				                color: '#ffffff' //X轴文字颜色
				            }
				        }
				    },
				    yAxis: [{
				        type: 'value',
				        gridIndex: 0,
				        interval: 25,
				        // splitNumber: 4,
				        splitLine: {
				            show: true,
				            lineStyle: {
				                type: 'solid',
				                color: '#325A9F',
				                width: 1
				            }
				        },
				        axisTick: {
				            show: false
				        },
				        axisLine: {
				            show: false
				        },
				        axisLabel: {
				            show: true,
				            formatter: '{value}',
				            fontSize: 10,
				            textStyle: {
				                color: '#6ad8ff' //X轴文字颜色
				            }
				        }
				    }],
				    series: [{
				            name: '养殖场分布',
				            type: 'bar',
				            barWidth: 8,
				            itemStyle: {
				                normal: {
				                    label: {
				                        show: true, //开启显示
				                        position: 'top', //在上方显示
				                        textStyle: { //数值样式
				                            color: '#fff',
				                        }
				                    },
				                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
				                            offset: 0,
				                            color: '#fffa55'
				                        },
				                        {
				                            offset: 0.5,
				                            color: '#55ff18'
				                        },
				                        {
				                            offset: 1,
				                            color: '#29eeff'
				                        }
				                    ])
				                }
				            },
				            data:data,
				            z: 10,
				            zlevel: 0
				        },
				        {
				            // 分隔
				            type: 'pictorialBar',
				            itemStyle: {
				                normal: {
				                    color: '#0F375F'
				                }
				            },
				            symbolRepeat: 'fixed',
				            symbolMargin: 2,
				            symbol: 'rect',
				            symbolClip: true,
				            symbolSize: [8, 2],
				            symbolPosition: 'start',
				            symbolOffset: [0, -1],
				            // symbolBoundingData: this.total,
				            data:data,
				            width: "100%",
				            z: 0,
				            zlevel: 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>
