echarts斑马条纹_进度_仪表盘

echarts代码

option = {
  series: [
    // 内环
    {
      type: 'gauge',
      radius: 260,
      z: 1,
      // 开口大小
      startAngle: 210,
      endAngle: -30,
      // 进度条样式
      itemStyle: {
        color: '#0084FF'
      },
      // 进度条
      progress: {
        show: false
      },
      // 未进行的进度条
      axisLine: {
        lineStyle: {
          width: 5
        }
      },
      // 指针
      pointer: {
        show: false
      },
      // 短刻度线
      axisTick: {
        show: false
      },
      // 长刻度线
      splitLine: {
        show: false
      },
      // 表盘标数
      axisLabel: {
        show: false
      },
      // 指针中心圆圈
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      // 显示数值样式
      detail: {
        show: false
      }
    },
    // 中环进度+值
    {
      type: 'gauge',
      radius: 300,
      z: 1,
      // 开口大小
      startAngle: 210,
      endAngle: -30,
      // 进度条样式
      itemStyle: {
        color: '#0084FF'
      },
      // 进度条
      progress: {
        show: true,
        width: 30
      },
      // 未进行的进度条
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      // 指针
      pointer: {
        show: false
      },
      // 短刻度线
      axisTick: {
        show: false
      },
      // 长刻度线
      splitLine: {
        show: false
      },
      // 表盘标数
      axisLabel: {
        show: false
      },
      // 指针中心圆圈
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      // 显示数值样式
      detail: {
        valueAnimation: true,
        formatter: '{value} %',
        color: 'inherit',
        fontSize: 80,
        offsetCenter: [0, '0%']
      },
      // 显示数值
      data: [
        {
          value: 23.5
        }
      ]
    },
    // 中环分割线
    {
      type: 'gauge',
      radius: 300,
      // 开口大小
      startAngle: 210,
      endAngle: -30,
      splitNumber: 8,
      z: 10,
      progress: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: true,
        distance: -10,
        length: 30,
        lineStyle: {
          width: 5,
          color: '#fff'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: false
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      }
    },
    // 外环
    {
      type: 'gauge',
      radius: 315,
      z: 1,
      // 开口大小
      startAngle: 210,
      endAngle: -30,
      // 进度条样式
      itemStyle: {
        color: '#0084FF'
      },
      // 进度条
      progress: {
        show: false
      },
      // 未进行的进度条
      axisLine: {
        lineStyle: {
          width: 5
        }
      },
      // 指针
      pointer: {
        show: false
      },
      // 短刻度线
      axisTick: {
        show: false
      },
      // 长刻度线
      splitLine: {
        show: false
      },
      // 表盘标数
      axisLabel: {
        show: false
      },
      // 指针中心圆圈
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      // 显示数值样式
      detail: {
        show: false
      }
    }
  ]
};

echarts链接

echarts预览地址