echarts饼图

<template>
    <div id="bt" style="width: 100%;height:100%;"></div>
</template>
 
<script lang="ts" setup>
    import * as echarts from 'echarts';
    import { onMounted,ref } from 'vue';
    const btList = ref([
        {name:"测试数据1",value:50,bfb:"50%"},
        {name:"测试数据2",value:50,bfb:"30%"},
        {name:"测试数据3",value:50,bfb:"20%"}
    ])
    onMounted(()=>{
        getEcharts();
    })
    const getEcharts = () => {
        let chartDom:any = document.getElementById('bt');
        let myChart = echarts.init(chartDom);
	    let option = {
			color: ['#00fce9', '#ffae0a', '#aca5ff', '#0dbbff', '#ff6c57'],
			tooltip: {
				show: false,
				title: '负面情况占比',
				formatter: function(params) {
					return `${params.data.name}占比: ${params.data.bfb}%<br>数量：${params.data.value}`
				}
			},
			legend: {
				show: false,
				icon: 'square',
				itemWidth: 12,
				itemGap: 25,
				top: 20,
				right: 30,
				textStyle: {
					color: '#fff'
				},
				data: []
			},
			series: [{
					type: 'pie',
					name: 'TypeB', // 内层细圆环2
					radius: ['37%', '42%'],
					hoverAnimation: false,
					clockWise: false,
					itemStyle: {
						normal: {
							color: '#00b4a9',
						}
					},
					label: {
						show: false
					},
					data: [100]
				},
				{
					type: 'pie',
					name: 'TypeA', // 外层圆环1（用于遮挡labelLine）
					radius: ['46%', '54%'],
					hoverAnimation: false,
					clockWise: false,
					itemStyle: {
						normal: {
							color: '#00282c',
						}
					},
					label: {
						show: false
					},
					data: [100]
				},
				{
					type: 'pie',
					name: 'TypeB', // 最外层细圆环
					hoverAnimation: false,
					clockWise: false,
					radius: ['47%', '52%'],
					itemStyle: {
						normal: {
							color: '#00b2b3',
						}
					},
					label: {
						show: false
					},
					data: [100]
				},
				{
					name: '饼图内容区',
					type: 'pie',
					clockWise: false,
					radius: ['40%', '50%'],
					hoverAnimation: false,
					data: btList.value,
					itemStyle: {
						borderColor: '#00282c',
						borderWidth: 2
					},
					tooltip: {
						show: true,
						title: '负面情况占比',
						formatter: function(params) {
							return `${params.data.name}占比: ${params.data.bfb}%<br>数量：${params.data.value}`
						}
					},
					label: {
						normal: {
							formatter: function(params, ticket, callback) {
								return '{normal|' + params.name + '}\n{value|' + params
									.value + '}';
							},
							padding: [0, -50],
							rich: {
								normal: {
									color: '#fff',
									fontSize: 12,
									padding: [5, -20],
									align: 'left'
								},
								value: {
									color: '#fff',
									align: 'left',
									fontSize: 12,
									padding: [2, -10],
								}
							}
						}
		
					},
					labelLine: {
						length: 20,
						length2: 70
					}
				}
			]
		};

		myChart.setOption(option);
		myChart.on('click', function (params) {
			
		});
 
    }
</script>
 

运行结果