<template>
	<div class="ringBox">
		<scEcharts ref="c3" :option="option"></scEcharts>
	</div>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
	name: "ring",
	components:{
		scEcharts
	},
	data(){
		return{
			option:{
				tooltip: {
					trigger: 'item'
				},
				grid: {

				},
				legend: {
					bottom: '2%',
					left: 'center'
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 20,
								fontWeight: 'bold'
							}
						},
						// 设置颜色
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2,
							color: function(params) {
								let colors = ['#28F8E6', '#2A91C4', '#1367C1', '#d48265', '#91c7ae'];
								return colors[params.dataIndex];
							}
						},
						labelLine: {
							show: false
						},
						data: [
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' }
						]
					}
				]
			}
		}
	},
	mounted() {

	},
	methods:{

	}
}
</script>

<style scoped lang="scss">
	.ringBox{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
</style>
