Angular：echarts制作渐变色仪表盘

仪表盘展示效果如上图所示，颜色要求渐变，刻度分割为4块，下方展示仪表盘名称，下面我们来拆解如何实现：

我们需要五个仪表盘，我们通过设置仪表盘的中心点和半径来实现；

并且设置在刻度轴上分割4块；

每个仪表盘名称相对中心偏移100%即显示在仪表盘底部：

以第一个仪表盘为例——

{
          type: 'gauge',
          center: ['30%', '25%'],   // 第一个参数是相对于上方的偏移，第二个是相对于左边的偏移
          radius: '25%',            // 半径
          splitNumber: 4,           // 坐标轴分割段数
          axisTick: {               // 坐标轴刻度
            splitNumber: 1,
            length: 20
          },
          axisLabel: {
            show: false
          },
          detail: { formatter: '{value}%', fontSize: 15, color: '#fff' },
          data: [{ value: 20, name: '计划完成率' }],
          title: {
            fontSize: 20,
            offsetCenter: [0, '100%'],       // 标题展示位置
            color: '#fff'
          },
          axisLine: {
            show: true,
            lineStyle: {                     // 设置坐标轴的样式
              width: 15,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0.1,
                    color: 'rgba(0, 237, 99, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 156, 171, 1)'
                  }
                ])
                ]
              ]
            }
          }
        },