<!-- **************************************NO.10 收集点*************************************** -->
<template>
	<div class="chart-container">
		<div id="collection" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

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

		},

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


				var chartDom = document.getElementById('collection');
				var myChart = echarts.init(chartDom);
				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
				var option;
				let bgColor = '#fff';
				let title = '总量';
				let echartData = [
				    {
				        name: '双辽市',
				        value: '3720',
				    },
				    {
				        name: '梨树县',
				        value: '2920',
				    },
				    {
				        name: '伊通县',
				        value: '2200',
				    },
				    {
				        name: '铁东区',
				        value: '1420',
				    },
					{
					    name: '铁西区',
					    value: '1620',
					},
				];
				
				let formatNumber = function (num) {
				    let reg = /(?=(\B)(\d{3})+$)/g;
				    return num.toString().replace(reg, ',');
				};
				let total = echartData.reduce((a, b) => {
				    return a + b.value * 1;
				}, 0);
				
				option = {
				    color: color,
				    series: [
				        {
				            type: 'pie',
				            radius: ['50%', '70%'],
				            center: ['50%', '50%'],
				            data: echartData,
				            hoverAnimation: false,
				            itemStyle: {
				                normal: {
				                    borderWidth:1,
				                },
				
				                emphasis: {
				                    borderColor: bgColor,
				                    borderWidth: 2,
				                         shadowBlur: 8,
				                borderColor: "#00ffff",
				                shadowColor: "#00ffff",
				                },
				            },
				            labelLine: {
				                normal: {
				                    length: 20,
				                    length2:10,
				                    lineStyle: {
				                        color: '#356781',
				                    },
				                },
				            },
				            label: {
				                normal: {
				                    formatter: (params) => {
				                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
				                    },
				                    rich: {
				                        icon: {
				                            fontSize: 10,
				                        },
				                        name: {
				                            fontSize:10,
				                            padding: [0, 3, 0, 4],
				                            color: '#23c9ea',
				                        },
				                        value: {
				                            fontSize: 10,
				                            color: '#ffffff',
				                        },
				                    },
				                },
				            },
				        },
				    ],
				};
				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>
