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

相关推荐
萌萌哒草头将军5 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫16 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中6 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊6 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿6 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj6 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝6 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3117 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾7 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路7 小时前
javaScript--数据结构和算法
javascript·数据结构·算法