Echarts在线免费图表

 
            const resData = {
   max: 100,
   value: 60
}
let dataArr = resData.value
let pieNum = (dataArr * 75) / 100
let max = resData.max
let colorSet = {
   color: 'rgba(89, 255, 255, 1)',
}

let option = {
   backgroundColor: 'rgba(27, 50, 125, 1)',
   startAngle: 210,
   series: [{
      name: '内部进度条',
      type: 'gauge',
      radius: '100%',
      splitNumber: 1,
      min: 0, // 最小刻度
      max: max, // 最大刻度
      splitLine: {
         show: true,
         distance: 0,
         length: 0,
         lineStyle: {
            color: '#ddd', //用颜色渐变函数不起作用
            width: 1,
         },
      },
      axisLine: {
         lineStyle: {
            color: [
               [dataArr / 100, colorSet.color],
               [1, colorSet.color],
            ],
            width: 3,
         },
      }, //仪表盘轴线
      axisLabel: {
         show: true,
         color: '#fff',
         fontSize: 15,
         padding: [10, 10, 10, 10,]
      }, //刻度标签。
      axisTick: {
         show: false,
      },
      itemStyle: {
         color: '#ffffff',
      },
      detail: {
         show: true,
         formatter: function (value) {
            if (value !== 0) {
               var num = Math.round(value)
               return parseInt(num).toFixed(0) + '%'
            } else {
               return 0
            }
         },
         offsetCenter: ['0', '0%'],
         fontSize: 20,
         fontWeight: '700',
         color: '#75DEFF',
      },
      title: {
         show: false,
      },
      data: [{
         value: dataArr,
         name: this.title,
      },],
      pointer: {
         show: false,
         length: '70%',
         radius: '20%',
         width: 3, //指针粗细
      },

      animationDuration: 4000,
      z: 9,
   },
   {
      name: '内部进度条',
      type: 'gauge',
      radius: '85%',
      splitNumber: 1,
      splitLine: {
         show: true,
         distance: 0,
         length: 4,
         lineStyle: {
            color: '#ddd', //用颜色渐变函数不起作用
            width: 1,
         },
      },
      axisLine: {
         lineStyle: {
            color: [
               [dataArr / 100, colorSet.color],
               [1, colorSet.color],
            ],
            width: 3,
         },
      }, //仪表盘轴线
      axisLabel: {
         show: false,
      }, //刻度标签。
      axisTick: {
         show: false,
      },
      itemStyle: {
         color: '#ffffff',
      },
      detail: {
         show: false,
      },
      title: {
         show: false,

      },
      pointer: {
         show: false,
         length: '70%',
         radius: '20%',
         width: 3, //指针粗细
      },
      animationDuration: 4000,
      z: 9,
   },
   {
      type: 'gauge',
      startAngle: 210,
      endAngle: -30,
      splitNumber: 4,
      radius: '35%',
      pointer: {
         show: false,
      },
      progress: {
         show: false,
         roundCap: true,
         width: 0,
      },
      axisLine: {
         show: true,
         lineStyle: {
            width: 0,
         },
      },
      axisTick: {
         distance: -25,
         length: 10,
         splitNumber: 5,
         lineStyle: {
            width: 1,
            color: '#fff',
         },
      },
      splitLine: {
         show: false,
         distance: 0,
         length: 10,
         lineStyle: {
            width: 10,
            color: '#099fe4',
         },
      },
      axisLabel: {
         show: false,
      },
      anchor: {
         show: false,
      },
      title: {
         show: false,
      },
      detail: {
         show: false,
      },
      data: [],
      z: 10,
   },
   {
      name: '',
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      startAngle: 225,
      center: ["50%", "50%"],
      hoverAnimation: false,
      label: {
         show: false
      },
      labelLine: {
         normal: {
            show: false
         }
      },
      data: [{
         value: resData.value,
         name: '今日检查进度',
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                  offset: 0,
                  color: 'rgba(3, 129, 244, 1)'
               },
               {
                  offset: 0.5,
                  color: 'rgba(0, 247, 247, 1)'
               },
               {
                  offset: 1,
                  color: 'rgba(255, 222, 109, 1)'
               }
            ])
         }
      }, {
         value: 100 - resData.value,
         name: '未检查',
         itemStyle: {
            color: 'transparent'
         }
      }, {
         value: 33,
         name: '',
         itemStyle: {
            color: 'transparent'
         }
      }]
   }
   ],
}