<!-- **************************************NO.2 人口*************************************** -->
<template>
	<div class="chart-container">
		<div id="population" style="width: 100%; height:21vh;">
		</div>
	</div>
</template>

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

		},

		methods:{
			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=__n0_3jDX4e4bko6
			
			myEcharts() {
				
				
				var chartDom = document.getElementById('population');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF','#eb9123','#ecb935']
				var option;
				var bgImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAF+CAYAAADNzDlVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAilJREFUeNrs1rENwjAURdEfC0pmQAwBDfuwE8wDDSULIGagTGEcFNHQpfPXseT0V0ryzrA/XzcRsWt3HX2fsd1XSRITc8O2JIn5RZVIdsr87mU54xT0TBL1/Sms2uPd7qPXivvp+PfKpfuGBAkStPxMf7muLXe43FiO5ViO5VjOsAoSxHIsx3Isx3Isx3KGVZAglmM5lmM5lmM5liMFQYJYjuVYjuVYjuVYTpAgQSzHcizHcizHcoZVkCCWYzmWYzmWYzmWM6yCBLEcy7Ecy7Ecy7GcIEGCWI7lWI7lWI7lDKsgQYJYjuVYjuVYjuUMqyBBLMdyLMdyLMdyLGdYBQliOZZjOZZjOZZjOUGCBLEcy7Ecy7EcyxlWQYJYjuVYjuVYjuVYzrAKEsRyLMdyLMdyLMdypCBIEMuxHMuxHMuxnGEVJEgQy7Ecy7Ecy7GcYRUkiOVYjuVYjuVYjuUMqyBBLMdyLMdyLMdyLCdIkCCWYzmWYzmWYznDKkgQy7Ecy7Ecy7EcyxlWQYJYjuVYjuVYjuVYjhQECWI5lmM5lmM5ljOsggQJYjmWYzmWYzmWM6yCBLEcy7Ecy7Ecy7GcYRUkiOVYjuVYjuVYjuUECRLEcizHcizHcixnWAUJYjmWYzmWYzmWYznDKkgQy7Ecy7Ecy7Ecy5GCIEEsx3Isx3Isx3IsJ0iQIJZjOZZjOZZjOcMqSBDLsRzLsRzL9Wy5odZqhwQJWn4+AgwApGqd0LftHcgAAAAASUVORK5CYII=';
				var fillImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAF+CAYAAADNzDlVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFhJREFUeNrs3U+O1DgUgHHblUFzhb7GCCHNtnfMFUasOA9HYEWfAQlpZq6AEOIIdPcFZgMVe5L6Q6pLzQjFLZK2fpZSKbVioQ8n9b68+Dnxz39fXYYYrkIIF+Fxt5the5kagQkHhtepEZhvUCk01tLh3Gul3aZQwovxSwMwn8cfhW74+Lul66jJawgQIEB1QJfDdj1s5ZFvI8NzLsfluByX43KAlmzjKRdyTkYIEJeb6XK5JC7H5bhchculmLmcOASoAqjPGyMEiMtVuFyMhctxOS5X4XKlRC4nDgECBIjLLeVyXSnpqhQux+W43FyXi/Jy4hCgKqC+74wQIC5XkZdLKcvLcTkuV+FyOScuJw4Bmt/MlwPE5WprH4LaBy7H5WpcbvjgcuIQIECAuByXe0iXy4eJtOONXilx2NJh238PIYbpmPP9qvpc7O5YU+r351/KB9hyAl7C3WPO9+vqs3O5hkZocrn9H+PJwdP3Y87h/n9sNX24HKBFgLaesQLiclUul9Q+yMvJy1Xl5bLaB3EIUE3biVzvGSsgLjfb5Yb7ci7H5bhchcvFWLicOAQIECAux+W43P1QXcmpuWuotbyc2gdxCFBF29c+FHk5QFzOfDl5OS63jMsFtQ/iECBAgLgcl+Ny34PqcoMrot+cFkzEWIbtuN9/H0/R/yuyWFGf2zR8vBiLIHa5hTsFE3FGkcWifT4Pey63fqDt9hemsOYWSylGaM2t++P6zWUjS7KNuZGX1pdbO5S83Mqb9eXEIUC1gfV4r2GEAP08IHk5LsfluNzkcsEzVnEIULXLFS4HiMvNdrnh+uFyXI7LVbhcTN7hJQ4BqnU5eTlAXG6+y/XbjstxOS5X4XJ93nA5cQhQrcupYwXE5Wa7XLRWMJfjclUuV6wVLA4BAgSIyy3ncl0p6aoULsfluNxcl4vRM1ZxCBAgQFxuybWC25ov1+Wc2nK543tOj/tpeYxpOz9mzX3GERpd7uI4PWZcGuO8Hf82vSr07n5FfW7TZrPlcuIQoAqgL19+NUKAuFyFyw1xyDPWVbtci9dQY/Pl+o7LiUOA5rdD7cPGCAHicubLcTkut4jLmS8nDgF6CJdT+wCIy3kfK5fjcsu43HA/xOXEIUCVLnffhAYjBIjL/ZjLZevLcTkuV+Vyyfpy4hCgKqCvX58YIUBcbr7Lxd8/vb1u6Gf7hstxuZ/tcp6xikOAAAHicubLPYz2BHk5LsfluJzA+tja7hlrr/YBEJeb63Lx2cd38nJcjstVuFyyvpw4BAgQIC7H5bgcl3u0Lpd77/AShwBVNGuSAOJylS739MNf7blcSv1+uFI+LFmbT5avzbv/gOmY8/2q+lzc+ZWbqvZPK76OS9duvrNfV5/2XG4YMS4nDgECBIjLcbmHdLmGzjh5OS7H5cShxoGsLweIy1W63G/v/+FyXI7LVbic+XLiECBAgLgcl+NyXI7LrcXlYilFHAIEaH77T4ABAKzsRPWz+TQ7AAAAAElFTkSuQmCCgg';
				var chartData = [
				    {
				        name: '双辽市',
				        value: 2691
				    }, 
				    {
				        name: '梨树县',
				        value: 5000
				    }, 
				    {
				        name: '伊通县',
				        value: 3416
				    },
				    {
				        name: '铁东区',
				        value: 4666
				    },
					{
					    name: '铁西区',
					    value: 4666
					},
				];
				
				var bgData = [];
				var itemData = [];
				
				// 取出每一条数据value,作为显示数据
				chartData.forEach(function(items, index) {
				    itemData.push(items.value);
				})
				
				// 取出所有数据最大值,作为背景象形柱图数据
				chartData.forEach(function(items, index) {
				    bgData.push({
				        name: items.name,
				        value: Math.max.apply(null, itemData)
				    });
				})
				
				// 所有数据最大值
				var maxValue = Math.max.apply(null, itemData);
				
				// 字体 distance放大参数
				var scale = 1;
				
				//富文本配置
				var rich = {
				    white: {
				        color: "#fff",
				        align: 'left',
				        fontSize: 12 * scale,
				        padding: [0, 0]
				    },
				};
				
				option = {
				    tooltip:{
				        formatter:'{b} : {c}'+'人',
				    },
				    grid: {
				        left: '3%',
				        right: '6%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [{
				        type: 'category',
				        data:(function(data){
				            var arr=[];
				            data.forEach(function(items){
				                arr.push(items.name);   
				            });
				            return arr;
				        })(chartData),
				        
				        
				        
				        boundaryGap: ['20%', '20%'],
				        splitLine: {
				            show: false
				        },
				        axisLine: {
				            show: false
				        },
				        axisTick: {
				            show: false
				        },
				        axisLabel: {
				            textStyle: {
				                fontSize: 10 * scale,
				                color: '#3fdaff'
				            }
				        }
				    }],
				    yAxis: [{
				        type: 'value',
				        splitLine: {
				            show: false
				        },
				        axisLine: {
				            show: false
				        },
				        axisTick: {
				            show: false,
				            inside: true,
				            length: 10 * scale,
				            lineStyle: {
				                color: '#0b5263'
				            }
				        },
				        axisLabel: {
							show: false,
				            textStyle: {
				                color: '#0b5263',
				                fontSize: 10 * scale
				            }
				        },
				    }],
				    series: [
				        //背景
				        {
				            name: 'bg',
				            type: 'pictorialBar',
				            barWidth: '45%',
				            // barGap: '0%',
				            silent: true,
				            label: {
				                normal: {
				                    show: true,
				                    position: "top",
				                    distance: 20 * scale,
				                    formatter: function(params) {
				                        var stuNum = 0;
				                        chartData.forEach(function(value, index, array) {
				                            if (params.name == value.name) {
				                                stuNum = value.value;
				                            }
				                        })
				                        return stuNum + '{white| 人}';
				                    },
				                    textStyle: {
				                        color: "#ffc72b",
				                        fontSize: 10 * scale
				                    },
				                    rich: rich
				                }
				            },
				            symbol: 'image://'+ bgImg,
				            symbolClip:false,
				            symbolBoundingData: maxValue,
				            symbolSize: [15, '100%'],
				            data: bgData
				        },
				        {
				            name: '数据',
				            type: 'pictorialBar',
				            barWidth: '45%',
				            barGap: '-100%',
				            data: chartData,
				            z: 3,
				            symbol: 'image://'+ fillImg,
				            symbolClip:true,
				            symbolBoundingData: maxValue,
				            symbolSize: [15, '100%']
				        },
				    ]
				};
				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>
