当前位置：首页 > news >正文

vue3+echarts+ant design vue实现进度环形图

news 2025/6/29 12:05:44

1、代码

<div>
<!-- 目标环形图 --><div id="main" class="chart_box"> </div><div class="text_target">目标</div>
</div>// 目标环形图
const onEcharts = () => {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据(进度环图)var option = {title: {text: '80%', //主标题文本left: '33%', // 水平居中(这里设置的是标题的左上角)top: '40%', // 垂直居中(这里设置的是标题的左上角)textStyle: {fontWeight: 800,fontSize: 18,color: '#666666',align: 'center',},},series: [{name: '干部九条实际整体达成率', //系列的标题type: 'pie', // 图表类型radius: ['50%', '70%'], //饼图的半径大小center: ['50%', '50%'], //饼图的中心位置data: [{//实际数据value: 80,name: '目标',itemStyle: {color: '#DDDDDD',borderRadius: 10, // 设置圆角},},{//补足到 100% 的背景数据（值为 100 - data）。value: 100 - 80,name: '',itemStyle: {color: '#F5F5F5',},},], //数据label: {normal: {formatter: '{b}', //表示使用数据的名称作为标签内容position: 'bottom', //标签的位置},},labelLine: {normal: {show: false, //表示不显示标签线},},itemStyle: {normal: {color: function (params) {var colorList = ['#46B3A8'];return colorList[params.dataIndex];},},},},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
};onMounted(() => {onEcharts();
});

2、效果图