<!-- **************************************NO.2 事件类型 分类*************************************** -->
<template>
	<div class="chart-container">
		<div id="event" style="width: 50%; height:21vh;">
		</div>
		<div id="event2" style="width: 50%; height:21vh;">
		</div>
	</div>
</template>

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

		},

		methods:{
			// 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
			//http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
			
			myEcharts() {
				
				
				var chartDom = document.getElementById('event');
				var myChart = echarts.init(chartDom);
				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
				var option;
				
				
				option = {
				  color: color,
				  tooltip: {
				    trigger: 'item',
					position: 'top'
				  },
				  series: [
				    {
				      name: '事件类型',
				      type: 'pie',
					  center:['50%','60%'],
				      radius: ['55%', '70%'],
				      avoidLabelOverlap: false,
				      
				      label: {
				        show: false,
				        position: 'center'
				      },
				      emphasis: {
				        label: {
				          show: true,
				          fontSize: '12',
				          fontWeight: 'bold'
				        }
				      },
				      labelLine: {
				        show: false
				      },
				      data: [
				        { value: 1048, name: '事件1' },
				        { value: 735, name: '事件2' },
				        { value: 580, name: '事件3' },
				        { value: 484, name: '事件4' },
				        { value: 300, name: '事件5' }
				      ]
				    },
					
				  ]
				};
				
				option && myChart.setOption(option);
				
			},
			myEcharts2() {
				
				
				var chartDom = document.getElementById('event2');
				var myChart = echarts.init(chartDom);
				 let dashedPic =
				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
				var option;
				let chartData = [
				    {
				        name: '双辽市',
				        value: 40083,
				        unit: '列',
				    },
				    {
				        name: '梨树县',
				        value: 33974,
				        unit: '列',
				    },
				    {
				        name: '伊通县',
				        value: 15400,
				        unit: '列',
				    },
				    {
				        name: '铁东区',
				        value: 11021,
				        unit: '列',
				    },
				    {
				        name: '铁西区',
				        value: 30696,
				        unit: '列',
				    },
				
				];
				let arrName = [];
				let arrValue = [];
				let sum = 0;
				let pieSeries = [],
				    lineYAxis = [];
				
				// 数据处理
				chartData.forEach((v, i) => {
				    arrName.push(v.name);
				    arrValue.push(v.value);
				    sum = sum + v.value;
				});
				
				// 图表option整理
				chartData.forEach((v, i) => {
				    pieSeries.push({
				        name: '沪昆线到达晚点情况',
				        type: 'pie',
				        clockWise: false,
				        hoverAnimation: false,
				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
				        center: ['35%', '60%'],
				        label: {
				            show: false,
				        },
				        itemStyle: {
				            borderRadius: 20,
				        },
				        data: [
				            {
				                value: v.value,
				                name: v.name,
				                 itemStyle: {
				                    normal: {
				                        borderWidth: 5,
				                        borderColor:color[i]
				                    }
				                }
				            },
				            {
				                value: sum - v.value,
				                name: '',
				                itemStyle: {
				                    color: 'rgba(0,0,0,0)',
				                },
				            },
				        ],
				    });
				    pieSeries.push({
				        name: '',
				        type: 'pie',
				        silent: true,
				        z: 1,
				        clockWise: false, //顺时加载
				        hoverAnimation: false, //鼠标移入变大
				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
				        center: ['35%', '60%'],
				        label: {
				            show: false,
				        },
				        itemStyle: {
				            borderCap: 'round',
				            borderJoin: 'round',
				        },
				        data: [
				            {
				                value: 7.5,
				                itemStyle: {
				                    color: '#E3F0FF',
				                },
				            },
				            {
				                value: 2.5,
				                name: '',
				                itemStyle: {
				                    color: 'rgba(0,0,0,0)',
				                },
				            },
				        ],
				    });
				    v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
				    lineYAxis.push({
				        value: i,
				        textStyle: {
				            rich: {
				                circle: {
				                    color: color[i],
				                    padding: [0, 0],
				                },
				            },
				        },
				    });
				});
				
				option = {
				    color: color,
				    grid: {
				        top: '20%',
				        bottom: '45%',
				        left: '40%',
				        containLabel: false,
				    },
				    yAxis: [
				        {
				            type: 'category',
				            inverse: true,
				            axisLine: {
				                show: false,
				            },
				            axisTick: {
				                show: false,
				            },
				            axisLabel: {
				                formatter: function (params) {
				                    let item = chartData[params];
				                    console.log(item);
				                    return (
				                        '{circle|●}{name|' +
				                        item.name +
				                        '}{bd||}{percent|' +
				                        item.percent +
				                        '}'
				                    );
				                },
				                interval: 0,
				                inside: true,
				                textStyle: {
				                    color: '#333',
				                    fontSize: 10,
				                    rich: {
				                        line: {
				                            width: 170,
				                            height: 5,
				                            backgroundColor: { image: dashedPic },
				                        },
				                        name: {
				                            color: '#fff',
				                            fontSize: 10,
				                        },
				                        bd: {
				                            color: '#72afff',
				                            padding: [0, 5],
				                            fontSize: 10,
				                        },
				                        percent: {
				                            color: '#5cdad0',
				                            fontSize: 10,
				                        },
				                        value: {
				                            color: '#333',
				                            fontSize: 16,
				                            fontWeight: 500,
				                            padding: [0, 0, 0, 10],
				                        },
				                        unit: {
				                            fontSize: 14,
				                        },
				                    },
				                },
				                show: true,
				            },
				            data: lineYAxis,
				        },
				    ],
				    xAxis: [
				        {
				            show: false,
				        },
				    ],
				    series: pieSeries,
				};
				
				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>
