echarts实现圆形进度条，圆环中心显示进度

柔光的暖阳◎ 2022-11-22 00:18 979阅读 0赞

### 目录 ###

*   *  一：效果图
     *  二：环境
     *  三：上代码
     *  四：巧妙的思路
     *  五：参考

## 一：效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]

## 二：环境 ##

使用了框架（vue）,运行下面代码前需要先安装echarts。

1.  命令通过 npm 安装 ECharts  
    `npm install echarts --save`
2.  引入 ECharts  
    直接在项目代码中 `var echarts = require('echarts');` 得到 ECharts。

## 三：上代码 ##

<template>
      <div>
         <div id="fourth"></div>
      </div>
    </template>
    
    <script>
    // 引入 ECharts 主模块
    var echarts = require("echarts/lib/echarts");
    require("echarts/lib/chart/pie");
    // 引入提示框和标题组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    export default { 
      data() { 
        return { };
      },
      mounted() { 
        this.drawCharts();
      },
      methods: { 
        drawCharts() { 
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById("fourth"));
          var e = 80;
          var option = { 
            title: { 
              show: true,
              text: e + "%",
              x: "center",
              y: "center",// 通过x,y将标题(进度)定位在圆环中心
              textStyle: { 
                fontSize: "25",
                color: "white",
                fontWeight: "400",
                fontFamily: "DINPro, DINPro-Regular",
              },
            },
            tooltip: { 
              trigger: "item",
              formatter: "{d}%",
              show: false,
            },
            legend: { 
              orient: "vertical",
              x: "left",
              show: false,
            },
            series: { 
              name: "",
              type: "pie",
              radius: ["65%", "85%"],
              avoidLabelOverlap: true,
              hoverAnimation: false,
              label: { 
                normal: { 
                  show: false,
                  position: "center",
                },
                emphasis: { 
                  show: false,
                },
              },
              labelLine: { 
                normal: { 
                  show: false,
                },
              },
              data: [
                { 
                  value: e,
                  name: "",
                  itemStyle: { 
                    color: "#6790D8",
                  },
                },
                { 
                  value: 100 - e,
                  name: "",
                  itemStyle: { 
                    color: "transparent",
                  },
                },
              ],
            },
          };
          myChart.setOption(option);
        },
      },
    };
    </script>

## 四：巧妙的思路 ##

**1.将进度值提到外面，在`data`中通过`e`和`100 - e`，巧妙实现进度条效果。**  
**2.把另一个不需要显示的柱条颜色设为透明`transparent`，就完美的实现我们的圆形进度条了。**

var e = 80;

data: [
        { 
          value: e,
          name: "",
          itemStyle: { 
            color: "#6790D8",
          },
        },
        { 
          value: 100 - e,
          name: "",
          itemStyle: { 
            color: "transparent",
          },
        },
      ],

备注：`title`的`x`和`y`属性没有在现在的echarts官方文档中找到，不过不影响使用，有找到的同学可以call我。

## 五：参考 ##

*  [用echarts画圆环图，显示进度条效果\_龙马的猫-CSDN博客 https://blog.csdn.net/baidu\_39169957/article/details/80567332][echarts_-CSDN_ https_blog.csdn.net_baidu_39169957_article_details_80567332]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/02cbace34b734155ab2baee3ea40300d.png
[echarts_-CSDN_ https_blog.csdn.net_baidu_39169957_article_details_80567332]: https://blog.csdn.net/baidu_39169957/article/details/80567332