Echarts绘制断点型环形图

效果图

Echarts配置

先看代码

const splitNumber = 30
options = {
    ...
    // 第一组数据是外部的渐变环形线
    // 第二组数据是内部的环形图
    series: [
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        startAngle: 0,
        radius: ['96%', '98%'],
        z: 1,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        animationType: 'scale',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(18,76,105,0)' // 0% 处的颜色
              },
              {
                offset: 0.2,
                color: 'rgba(18,76,105,0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#02b2f4' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: [1]
      },
      {
        type: 'gauge',
        radius: '80%',
        clockwise: false,
        startAngle: 270,
        endAngle: -90,
        splitNumber: 20,
        detail: {
          offsetCenter: [0, 0],
          formatter: ' '
        },
        pointer: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: (() => {
              // 主要绘制思路在这
              const front = []
              const behind = []
              const flag = (1 - num) * splitNumber
              for (let i = 0; i <= splitNumber; i++) {
                if (i <= flag) {
                  front.push([i / splitNumber, '#3D6785'])
                  front.push([i / splitNumber + 0.01, 'transparent'])
                } else {
                  behind.push([i / splitNumber, '#4caffd'])
                  behind.push([i / splitNumber + 0.01, 'transparent'])
                }
              }
              return [...front, ...behind]
            })(),
            width: 16
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ]
}

说一下思路，刚开始是参考了别人的文章，用分割线splitLine做间隔部分，但是这样做出来会显得很违和，不自然，后来换了个思路，就是在画进度条的时候，根据你传入的百分比数据把环形分成前后两个部分，每画一块就在后边画一块空开的分割线，用transparent透明色做背景，后半部分也是一样，就实现了这个环形图。

向内倾斜

通过css的样式可以实现向内倾斜的效果，但是环形里边的文本或者图片没办法在echarts实现反倾斜，我目前还没找到好的办法，有大神知道可以指教一下，我用的是这个css

transform: perspective(200px) rotateX(65deg)

具体的效果大家自己查看文档吧，加上之后是这样的

中间的定制

环形中间的文案我是通过绝对定位实现的，把这个echarts的容器和中间的文案放在同一个层级，通过定位实现，因为高度和宽度都是固定的所以位置不会变，实现后如下

这样就完成了用Echarts实现断点型环形图的绘制。