<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) {
				console.log('传入的data', this.data);

				return {
					option: {
						tooltip: {
							trigger: 'item',
							formatter: '{b}: {c} ({d}%)'
						},
						series: [
							{
								name: '业态',
								type: 'pie',
								selectedMode: 'single',
								radius: [0, '32%'],
								center: ['40%', '50%'],
								startAngle: 40,
								label: {
									// position: 'inner',
									// formatter: '{b} \n {d}%  ',
									// fontSize: 13,
									// color: '#D1D1D1',
									show: false,
								},
								startAngle: 115,
								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: ['40%', '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'] :
									['#70D599', '#FFE7C0', '#ADE5EE', '#C5CDF9', '#e0e3f7', '#AFB7E6', '#F3B1C9'],

								data: [
									...this.data[1]
								]
							}
						],
						legend: {
							show: true,
							orient: 'vertical',   // vertical | horizontal
							right: 25,        // left | center | right | 数值
							bottom: 'center'
						}
					}

				}
			}
		}
	},
	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: 690rpx;
	height: 526rpx;
	margin-top: 40rpx;
	display: block;
}
</style>
