<template>
	<div class="leftBottom">
		<Card title="特殊作业情况">
			<div class="mainContainer">
				<div id="pieEchart" style="width:100%;height:100%"></div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
import * as echarts from 'echarts';

function drawPie(){
	type EChartsOption = echarts.EChartsOption;

	var chartDom = document.getElementById('pieEchart')!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;

	option = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ]
		},
		
		series: [
			{
				grid:{
				left: '5%',
				right: '5%',
				bottom: '5%',
				containLabel:true
			},
			name: 'Access From',
			type: 'pie',
			selectedMode: 'single',
			radius: [0, '30%'],
			label: {
				position: 'inner',
				fontSize: 14
			},
			labelLine: {
				show: false
			},
			data: [
				{ value: 1548, name: 'Search Engine' },
				{ value: 775, name: 'Direct' },
				{ value: 679, name: 'Marketing', selected: true }
			]
			},
			{
			name: 'Access From',
			type: 'pie',
			radius: ['45%', '60%'],
			labelLine: {
				length: 1
			},
			label: {
				formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
				backgroundColor: '#F6F8FC',
				borderColor: '#8C8D8E',
				borderWidth: 1,
				borderRadius: 3,

				rich: {
				a: {
					color: '#6E7079',
					lineHeight: 10,
					align: 'center'
				},
				hr: {
					borderColor: '#8C8D8E',
					width: '100%',
					borderWidth: 1,
					height: 0
				},
				b: {
					color: '#4C5058',
					fontSize: 10,
					fontWeight: 'bold',
					lineHeight: 12
				},
				per: {
					color: '#fff',
					backgroundColor: '#4C5058',
					padding: [1, 1],
					borderRadius: 1
				}
				}
			},
			data: [
				{ value: 1048, name: 'Baidu' },
				{ value: 335, name: 'Direct' },
				{ value: 310, name: 'Email' },
				{ value: 251, name: 'Google' },
				{ value: 234, name: 'Union Ads' },
				{ value: 147, name: 'Bing' },
				{ value: 135, name: 'Video Ads' },
				{ value: 102, name: 'Others' }
			]
			}
		]
		
	};

	option && myChart.setOption(option);
}

onMounted( async () => {
	drawPie()
});
</script>

<style lang="scss" scoped>
.leftBottom {
	width: 100%;
	height: 100%;
	.mainContainer{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
}
::v-deep .h-card .content {
	height: 80%;
}
</style>
