使用pie画环形3/4-echarts

思路

1、先画一个底部环形的3/4，然后画1/4透明色(不需要圆角不用画) 2、在画一个有色的环形3/4,然后画1/4透明色（需要使用borderRadius画圆角） 3、2个环形重叠就是我们想要的效果

export const ceshiPie = (): EChartsOption => {
  const data = [    { name: '钱包支付', num: 13210 },    { name: '现金支付', num: 42111 },    { name: '记账支付', num: 81711 },    { name: '移动支付', num: 121700 }  ]
  const total = data.reduce((item1: any, item2) => {
    return (typeof item1 === 'number' ? item1 : item1.num) + item2.num
  })
  data.forEach((item: any) => {
    item.percent = ((item.num / total) * 100).toFixed(1)
  })
  const color = ['rgba(255, 135, 0, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 228, 115, 1)', 'rgba(0, 157, 255, 1)'].reverse()
  const pieSeries: any = []
  const lineYAxis: any = []
  data.forEach((item, index) => {
    const iname = item.name
    const inum = item.num
    pieSeries.push({
      name: iname,
      type: 'pie',
      // 80、70是控制圆心距离，20控制每个环形距离
      radius: [80 - 20 * index + '%', 70 - 20 * index + '%'],
      // 关闭悬停动画
      hoverAnimation: false,
      // 是否顺时针旋转
      clockwise: false,
      center: ['50%', '50%'],
      label: {
        show: false
      },
      data: [
        {
          // 这里的值+上面的值为总和，但是只占比75%
          value: 7.5,
          itemStyle: {
            color: 'rgba(0, 132, 251, 0.2)'
          },
          tooltip: {
            show: false
          }
        },
        {
          // 弃用25%的环形图不做显示
          value: 2.5,
          itemStyle: {
            color: 'rgba(0,0,0,0)'
          },
          tooltip: {
            show: false
          }
        }
      ]
    })
    pieSeries.push({
      name: iname,
      type: 'pie',
      radius: [80 - 20 * index + '%', 70 - 20 * index + '%'],
      // 关闭悬停动画
      hoverAnimation: false,
      // 是否顺时针旋转
      clockwise: false,
      center: ['50%', '50%'],
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: 60 // 设置每一段子项目的圆角
      },
      data: [
        {
          // 只设置3/4的值，以用于3/4环形图
          value: inum * 0.75,
          name: iname,
          tooltip: {
            formatter: (item: any) => {
              return `<div style="display:flex;font-size:12px;">
                    <div style="color:${item.color};margin-right:10px;">●</div>
                    <div>
                      <div>${item.seriesName}：${item.value} 辆</div>
                      <div>占比：${(item.percent / 0.75).toFixed(1) + '%'}</div>
                    </div>
                  </div>
                  `
            }
          }
        },
        {
          // 弃用25%的环形图不做显示
          value: total * 0.25,
          itemStyle: {
            color: 'rgba(0,0,0,0)'
          },
          tooltip: {
            show: false
          }
        }
      ]
    })
    lineYAxis.push({
      value: index,
      textStyle: {
        rich: {
          circle: {
            color: color[index],
            padding: [0, 5]
          }
        }
      }
    })
  })
  return {
    tooltip: {
      trigger: 'item'
    },
    color,
    grid: {
      top: '7%',
      bottom: '54%',
      left: '50%',
      containLabel: false
    },
    // 有yAxis必须有xAxis
    xAxis: { show: false },
    yAxis: [
      {
        type: 'category',
        // 反向坐标轴
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: (params: any) => {
            const item = data[params]
            return `{circle|●}{name|${item.name}：}{value|${item.num}辆}`
          },
          interval: 0,
          inside: true,
          rich: {
            line: {
              // width: 50,
              // height: 1,
              color: 'rgba(236, 236, 236, 1)'
              // 当前echart版本不支持borderType用------代替
              // borderType: "dashed",
              // borderColor: "#D9DFEB",
              // borderWidth: 1,
            }
          },
          color: '#fff',
          fontSize: 30,
          show: true
        },
        data: lineYAxis
      }
    ],
    series: pieSeries
  }
}