<!-- **************************************NO.11 水鹤*************************************** -->
<template>
	<div class="chart-container">
		<div id="watercrane" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

		methods: {
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
			myEcharts() {


				var chartDom = document.getElementById('watercrane');
				var myChart = echarts.init(chartDom);
				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
				var option;
				var salvProName = ["双辽市", "梨树县", "伊通县", "铁东区", "铁西区"];
				var salvProValue = [11000, 10000, 9000, 8000, 7000];
				var salvProMax = []; //背景按最大值
				for (let i = 0; i < salvProValue.length; i++) {
				    salvProMax.push(salvProValue[0])
				}
				option = {
				    grid: {
				        left: '8%',
				        right: '8%',
				        bottom: '0%',
				        top: '5%',
				        containLabel: true
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'none'
				        },
				        formatter: function(params) {
				            return params[0].name + ' : ' + params[0].value
				        }
				    },
				    xAxis: {
				        show: false,
				        type: 'value'
				    },
				    yAxis: [{
				        type: 'category',
				        inverse: true,
				        axisLabel: {
				            show: true,
				            textStyle: {
				                color: '#248bf9',
				                fontSize: 12,
				                fontWeight: 500
				            },
				        },
				        splitLine: {
				            show: false
				        },
				        axisTick: {
				            show: false
				        },
				        axisLine: {
				            show: false
				        },
				        data: salvProName
				    }, {
				        type: 'category',
				        inverse: true,
				        axisTick: 'none',
				        axisLine: 'none',
				        show: true,
				        axisLabel: {
				            textStyle: {
				                color: '#fffdfe',
				                fontSize:10
				            },
				            formatter: function(value) {
				                return (value * 10 / 10).toLocaleString();
				            },
				        },
				        data: salvProValue
				    }],
				    series: [{
				            name: '值',
				            type: 'bar',
				            zlevel: 1,
				            itemStyle: {
				                normal: {
				                    barBorderRadius: 10,
				                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
				                        offset: 0,
				                        color: 'rgb(57,89,255,1)'
				                    }, {
				                        offset: 1,
				                        color: 'rgb(46,200,207,1)'
				                    }]),
				                },
				            },
				            barWidth: 10,
				            data: salvProValue
				        },
				    ]
				};
				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>
