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

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室13 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室13 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀16 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js