uniapp中封装echarts圆环图

①安装插件市场的echarts图表插件 https://ext.dcloud.net.cn/plugin?id=4899
②安装后需安装echarts相关依赖：

• npm install echarts
• main.js引入以下代码(参照插件市场)

// 引入全量包
import * as echarts from 'echarts'
//---or----------------------------------

// 或者按需引入 
import * as echarts from 'echarts/core';
import {LineChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {LabelLayout,UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

③组件中使用：

<template>
  <view>
    <view style="width: 156rpx; height:156rpx" class="charts">
      <l-echart ref="chart"></l-echart>
    </view>
  </view>
</template>
<script>
import * as echarts from "echarts/core";
export default {
  name: "chart",
  props: {
    // 已使用
    number: {
      type:Number | String,
      default: 0
    },
    // 总数
    total: {
      type:Number | String,

      default:0
    },
      status: {
      type: Object | Function,
    },
  },
   data() {
    return {
      // 配置项
      option: {
        tooltip: {
          // 避免点击圆环的时候有指示线
              show:false,
        },
        // 系列
       series: [
          {
            hoverAnimation: false,//禁止放大,但点击中间时,还是会有阴影.
            // animation:false, //禁止动画效果
            name: "Access From",
            type: "pie",
            radius: ["55%", "80%"], //圆环样式
            // radius: '100%',//设置100%会充满整个圆 不会留中间空隙
            label: {
              position: "center",
              show: true,
              color: "#333333",
              fontSize: "13",
              // number：已使用  total：总数
              // 此处用来判断数据的状态，可以在这里自行修改
              formatter: this.status.ret == null ? "" :( (this.number / this.total)* 100).toFixed(0) + "%",
              // formatter: (this.number / this.total) * 100 + "%" //中间的文字
            },
            data: [
              {
                value: this.number,
                name: "已使用",
                  itemStyle: {
                    // 判断百分比设置颜色
                    color:this.status.ret!==null?this.number<=49 ?'#00888D':this.number<=74?'#FFD12E':'#DF1B0F':'#ff4400',
                }
              },
              {
                
                value: this.total - this.number,
                name: "总数",
              }
            ],
            // 设置圆环图点击透明度消失的问题
            emphasis: {
              itemStyle: {
                shadowBlur: 10,//阴影大小
                shadowOffsetX: 0, //阴影水平方向上的偏移距离
                shadowColor: "rgba(0, 0, 0, 0.5)",//阴影颜色
              }
              },
            // 设置总数颜色
             itemStyle: {
              color: "#E6E6E6",
            }
          }
        ]
      }
    };
  },
  onload() {
  },
  created(){
  },
  mounted() {
        this.$refs.chart.init(echarts, chart => {
        chart.setOption(this.option);
        });
  }
};
</script>

• 引入注册并使用组件（根据封装组件中接收的值来传）效果图：

根据百分比背景色会有所改变（根设计图略有偏差，效果需求达到了）
如图所示：

可以参照这篇文章：添加链接描述