<template>
	<view style="width: 100%; height: 408px;">
		<l-echart ref="chartRef" @finished="init"></l-echart>
	</view>
</template>

<script lang="uts" setup>
	// #ifdef MP
	// 引入小程序依赖包，require只能是当前文件的相对路径
	const echarts = require('../../../../static/echarts.min.js')
	// #endif
	// #ifndef MP
	// 非小程序不需要引入
	const echarts = null
	// #endif
	const chartRef = ref<LEchartComponentPublicInstance|null>(null)
	const option = {
		  legend: {
			type: 'plain',
			orient: 'vertical',
			right: 20,
			top: 'center',
			itemWidth: 12,
			itemHeight: 12,
			textStyle: {
			  fontSize: 14,
			  color: '#333'
			}
		  },
		  series: [{
			type: 'pie',
			radius: ['10%', '70%'],
			center: ['50%', '50%'],
			label: {
			  show: true,
			  formatter: '{d}%',
			  position: 'inside',
			  color: '#fff',
			  fontSize: 16,
			  fontWeight: 'bold',
			  textShadow: '0 1px 3px rgba(0,0,0,0.5)'
			},
			data: [
			  { 
				value: 75, 
				name: '已完成',
				itemStyle: { 
				  color: '#36a2eb'
				}
			  },
			  { 
				value: 15, 
				name: '进行中',
				itemStyle: { 
				  color: '#ffce56'
				}
			  },
			  { 
				value: 10, 
				name: '未开始',
				itemStyle: { 
				  color: '#ff6384'
				}
			  }
			]
		  }]
		}

	const init = async () =>{
		if(chartRef.value== null) return
		const chart = await chartRef.value!.init(echarts)
		chart.setOption(option)
	}
	

</script>
<style>

</style>