Echarts在线免费图表

 
            let colorSet = {
   // 进度条——外层大背景圆环颜色
   outProgressBg: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
         offset: 0,
         color: '#FCDEE1' // 0% 处的颜色
      },
      {
         offset: 0.9,
         color: '#fff' // 100% 处的颜色
      }],
   },
   // 进度条——内部红色圆环线
   lineColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
         offset: 0,
         color: '#F9ACB6' // 0% 处的颜色
      },
      {
         offset: 0.9,
         color: '#fff' // 100% 处的颜色
      }],
   },
   // 进度条颜色
   progressBar: {
      type: 'linear',
      x: 0,
      y: 1,
      x2: 0,
      y2: 0,
      colorStops: [{
         offset: 0,
         color: '#FCDDE0'
      }, {
         offset: 0.4,
         color: '#FAB2BC'
      }, {
         offset: 0.8,
         color: '#F56A7C'
      }],
   }
}
let score = 70;
let greyScore = 68
option = {
   graphic: [
      // 圆环内部文字——平均心率
      {
         type: 'text',
         left: 'center',
         top: "30%",
         z: 100,
         style: {
            fill: '#18191B',
            text: '圆环标题',
            font: '24px Microsoft YaHei'
         }
      },
      // 圆环内部文字——较班级
      {
         type: 'text',
         left: 'center',
         top: "35%",
         z: 100,
         style: {
            fill: '#8492A6',
            text: '副标题',
            font: '20px Microsoft YaHei'
         }
      },
      // 圆环内部文字——中心数字
      {
         type: 'text',
         left: '53%',
         top: "50%",
         z: 100,
         style: {
            fill: '#8492A6',
            text: '/' + greyScore,
            font: '32px Microsoft YaHei'
         }
      },
      // 圆环内部文字——bpm
      {
         type: 'text',
         left: 'center',
         top: "65%",
         z: 100,
         style: {
            fill: '#8492A6',
            text: '底部文字',
            font: '20px Microsoft YaHei'
         }
      },
   ],
   tooltip: {
      show: false
   },
   // 圆环内部文字——圆环数据
   title: {
      text: score,
      left: '42%',
      top: "45%",
      textStyle: {
         fontSize: 80,
         fontFamily: "Microsoft YaHei",
         color: '#F6596B',
      }
   },
   angleAxis: {
      show: false,
      max: (100 * 360) / 265,
      type: "value",
      startAngle: 223,
      splitLine: {
         show: false,
      },
   },
   barMaxWidth: 30,
   radiusAxis: {
      show: false,
      type: "category",
      z: 10,
   },
   polar: {
      //圆环大小
      radius: "157%",
   },
   series: [
      { // 进度条外框
         name: "外部进度条",
         type: "gauge",
         center: ['50%', '50%'],
         radius: '80%',
         startAngle: 221,
         endAngle: -41,
         splitNumber: 1,
         axisLine: {
            lineStyle: {
               color: [
                  [1, colorSet.outProgressBg]
               ],
               width: 70
            }
         },
         axisLabel: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         itemStyle: {
            show: false,
         },
         pointer: {
            show: false
         },
         // 两头颜色最深的两条小竖线
         splitLine: {
            distance: -52,
            length: 41,
            lineStyle: {
               color: '#F6596B',
               // 宽度
               width: 3
            }
         },
      },
      { // 进度条——内部红色圆环线
         name: "外部进度条",
         type: "gauge",
         center: ['50%', '50%'],
         radius: '59%',
         startAngle: 220,
         splitNumber: 2,
         axisLine: {
            lineStyle: {
               color: [
                  [1, colorSet.lineColor]
               ],
               width: 3
            }
         },
         axisLabel: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         itemStyle: {
            show: false,
         },
         pointer: {
            show: false
         }
      },
      {
         // 进度条圆环带底
         type: 'gauge',
         radius: '75%',
         center: ['50%', '50%'],
         startAngle: 220,
         endAngle: -40,
         // 底部
         axisLine: {
            lineStyle: {
               color: [[1, '#FBD6DA']],
               width: 40
            }
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisLabel: {
            show: false,
         },
         detail: {
            show: false
         },
         progress: {
            show: true,
            width: 40,
            // 进度条圆环
            itemStyle: {
               color: colorSet.progressBar
            }
         },
         pointer: {
            show: false
         },
         data: [
            {
               value: score
            }
         ]
      },
   ]
};