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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀11 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript