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

1、代码

TypeScript 复制代码
<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、效果图

相关推荐
铅笔侠_小龙虾2 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
sniper_fandc3 小时前
Axios快速上手
vue.js·axios
哟哟耶耶3 小时前
Starting again-02
开发语言·前端·javascript
Kitasan Burakku4 小时前
Typescript return type
前端·javascript·typescript
力Mer5 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript
GISer_Jing5 小时前
得物前端二面潜在问题详解
前端·javascript·面试
醒了接着睡7 小时前
Vue3 响应式中的 Reactive
vue.js
未来之窗软件服务8 小时前
从东方仙盟筑基期看 JavaScript 动态生成图片技术-东方仙盟
开发语言·javascript·仙盟创梦ide·东方仙盟·图片技术
paopaokaka_luck8 小时前
基于SpringBoot+Vue的志行交通法规在线模拟考试(AI问答、WebSocket即时通讯、Echarts图形化分析、随机测评)
vue.js·人工智能·spring boot·后端·websocket·echarts
程序定小飞8 小时前
基于springboot的蜗牛兼职网的设计与实现
java·数据库·vue.js·spring boot·后端·spring