<template>
	<uni-ec-canvas
	   class="uni-ec-canvas"
	   id="revenuecharts"
	   ref="revenuecharts"
	   canvas-id="revenuecharts"
	   :ec="ec"
	   @inited="inited"
	></uni-ec-canvas>
</template>

<script>
	import uniEcCanvas from './uni-ec-canvas/uni-ec-canvas.vue';
	export default {
		props:['data'],
		components:{
		    uniEcCanvas
		},
		computed:{
			ec(){
				if(this.data){
					return {
						option:{
							tooltip: {
								trigger: 'item',
								formatter: '{b}: {c} ({d}%)'
							},
							series: [
								{
									name: '业态',
									type: 'pie',
									selectedMode: 'single',
									radius: [0, '32%'],
									center: ['50%','50%'],
									label: {
										// position: 'inner',
										formatter: '{b} \n {d}%  ',
										fontSize: 13,
										color: '#D1D1D1',
										// show: false,
									},
									 startAngle: 15,
									labelLine: {
										// show: false,
										length: 62,
										length2: 12,
										smooth: true,
										lineStyle:{
											color: '#D1D1D1'
										},
										
									},
									data: [
										...this.data[0]
									],
									color:['#FEA427','#7786E3','#75B7AD','#9BC9F8','#FFAC37',]
								},
								{
									name: '业态',
									type: 'pie',
									radius: ['48%', '72%'],
									center: ['50%','50%'],
									labelLine: {
										length: 30,
									},
									label: {
										show:false,
									},
									color: this.data[1].length> 7 ? ['#FFC3CD','#F4A4B2','#FE6582','#FFE7C0','#FEDA9D','#FEC057','#F9C8A0','#FAB176','#ffa25b','#E1C9F7','#CDA6F1',
									'#E0E2F6','#C5CDF9','#9AA6EF','#D8ECEA','#8FE5B2','#70D599','#ADE5EE'] :
									  ['#f7f5f6', '#FFE7C0', '#ADE5EE','#C5CDF9','#e0e3f7', '#AFB7E6',  '#F3B1C9' ],
									
									//     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ','#6FEBC3', '#F4B27A',
									//     backgroundColor: '#F6F8FC',
									//     borderColor: '#8C8D8E',
									//     borderWidth: 1,
									//     borderRadius: 4,
										
									//     rich: {
									//         a: {
									//             color: '#6E7079',
									//             lineHeight: 22,
									//             align: 'center'
									//         },
									//         hr: {
									//             borderColor: '#8C8D8E',
									//             width: '100%',
									//             borderWidth: 1,
									//             height: 0
									//         },
									//         b: {
									//             color: '#4C5058',
									//             fontSize: 14,
									//             fontWeight: 'bold',
									//             lineHeight: 33
									//         },
									//         per: {
									//             color: '#fff',
									//             backgroundColor: '#4C5058',
									//             padding: [3, 4],
									//             borderRadius: 4
									//         }
									//     }
									// },
									 data: [
										...this.data[1]
									]
								}
							]
						}
					
					}
				}
			}
		},
		methods:{
			inited(chart){
				let _this =this
				// console.log('图表初始化完毕')
				// console.log('chart实例', this.ec)
				
				chart.on('click',function(params){
					if(params.componentIndex==0){
						_this.$emit('selectCate',params.dataIndex+1)
					}
					// console.log(params)
				})
			},
			
		},
	}
</script>

<style scoped>
	/* page {
			background-color: #fff;
		} */
	.uni-ec-canvas{
	    width: 750rpx;
	    height: 526rpx;
		margin-top: 40rpx;
	    display:block;
	}
	 
</style>
