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、效果图

相关推荐
【ql君】qlexcel6 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
就改了40 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_42 分钟前
Ajax 入门
前端·javascript·ajax
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter1 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心2 小时前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了2 小时前
看完这篇文章,你就知道什么是proxy
javascript