eachart绘制圆形进度条

小白终成大白

工作笔记

---

---

前言

在一点都不了解的情况下,使用echart绘制一个环形图

参照echart官网 下载了一个示例
官网如下:
https://echarts.apache.org/zh/index.html
不太满足要求一点点调整吧

一、场景

在vue3项目 中插入一个环形进度图

二、使用步骤

1.安装 echarts

代码如下（示例）：

npm install echarts

2.添加一个div容器 用于放置图表

代码如下（示例）：

<div id="container" style="height: 100%"></div>

3.导入

代码如下（示例）：

导入

import * as echarts from "echarts";

4.绘制图表

代码如下（示例）：

 onMounted(() => {
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });
  var option;
  var e = 20  //进度占比
  var option = {
    graphic: {
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: e + '%', //文字内容
        // 	fill: "red",//文字颜色
        fontSize: 20, //文字字号
        fontWeight: '1000'
      }
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      show: false
    },
    series: {
      name: '',
      type: 'pie',
      radius: ['40%', '45%'],//这两个数字相差越小 环的宽度越窄 相差越大条越宽
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: e,
          name: '',
          itemStyle: {
            color: '#6790D8'//进度完成部分填充颜色
          }
        },
        {
          value: 100 - e,
          name: '',
          itemStyle: {
            color: 'grey'//未完成颜色
          }
        }
      ]
    }
  }

  if (option && typeof option === "object") {
    myChart.setOption(option);
  }
});

三、预览图

备注

感谢您的阅读 !