Echarts 实现环形进度图

实现效果

<div id="mainBottomLeft" style="flex: 2;height:250px;"></div>

optionBottomLeft() {
    
    
  // 通过id获取获取画布
  const myChart = echarts.init(document.getElementById('mainBottomLeft'));
  // 指定图表的配置项和数据
  let data = 80;
  let option = {
    
    
    title: {
    
    
      text:'67.45%',//主标题文本
      subtext:'完成百比分',//副标题文本
      left:'21%',
      top:'51%',
      textStyle:{
    
    
        fontWeight: 'normal',
        fontSize: 18,
        color:'#FF974C',
        align:'center',
        left:10
      },
      subtextStyle:{
    
    
        fontSize: 13,
        color:'#6c7a89',
      }
    },
    tooltip: {
    
    
      trigger: "item",
      formatter: "{d}%",
      show: true,
    },
    legend: {
    
    
      top: 20,
      right:20
    },
    series: [
      {
    
    
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '65%'],
        center: ["30%", "60%"],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
    
    
          normal: {
    
    
            show: false,
            position: "center",
          },
          emphasis: {
    
    
            show: false,
          },
        },
        labelLine: {
    
    
          normal: {
    
    
            show: false,
          },
        },
        data: [
          {
    
    
            value: data,
            name: "测试",
            selected:false,
            itemStyle: {
    
    
              color: "#FF974C",
            },
            // label: {
    
    
            //   normal: {
    
    
            //     // 是显示标签
            //     show: true,
            //     position: 'center',
            //     fontSize: 16,
            //     // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
            //     formatter:'{d}%\n\n完成百比分',
            //   }
            // },
          },
          {
    
    
            value: 100-data,
            name: "",
            itemStyle: {
    
    
              color: "#E9EEF4",
            },
            label:{
    
    
              normal:{
    
    
                show:false,

              }
            }
          },
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。画布为 myCharts  true为显示
  if (option && typeof option === "object") {
    
    
    myChart .setOption(option, true);
  }
},