Echarts在线免费图表

 
            let dataTmp = 70;
let max = 180;
let min = 0;
option = {
   backgroundColor: '#0C1E45',
   series: [
      // 内部中心进度，包含指针
      {
         center: ['50%', '55%'],
         type: 'gauge',
         radius: '50%',//95
         startAngle: 225,
         endAngle: -45,
         min: min,
         max: max,
         axisLine: {
            show: true,
            lineStyle: {
               //假设值为20，小于20指针扫过区域
               width: 80,
               color: [
                  [
                     (dataTmp - min) / (max - min),
                     new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                           offset: 0,
                           color: 'RGBA(14, 78, 139, 1)',//起始渐变色
                        },
                        {
                           offset: 1,
                           color: 'RGBA(12, 57, 120, 1)'
                        }
                     ])
                  ],
                  [1, 'rgba(255,255,255,.0)']
               ]
            }
         },
         axisTick: {
            show: 0
         },
         splitLine: {
            show: 0
         },
         axisLabel: {
            show: 0
         },
         pointer: {
            show: true,
            length: '100%',
            width: 4,
            itemStyle: {
               color: "#fff"//箭头颜色
            }
         },
         //底部点位名称
         detail: {
            show: true,
            offsetCenter: [0, '75%'],
            formatter: ['{name|' + '温度' + '}'].join('\n'),
            rich: {
               name: {
                  fontFamily: 'Microsoft YaHei',
                  fontSize:14,
                  color: '#fff',
                  lineHeight: 52
               }
            }
         },
         data: [
            {
               value: dataTmp
            }
         ]
      },
      //刻度圈
      {
         type: 'gauge',
         radius: '50%',//100
         center: ['50%', '55%'],
         min: min,
         max: max,
         splitNumber: 10,
         startAngle: 225,
         endAngle: -45,
         //最外层渐变色圈，宽度
         axisLine: {
            show: true,
            lineStyle: {
               width:10,
               color: [
                  [
                    0,
                     new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                           offset: 0,
                           color: '#0485FC'
                        },
                        {
                           offset: 1,
                           color: '#0485FC'
                        }
                     ])
                  ],
                  [
                     1,
                     new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                           offset: 0,
                           color: '#0485FC'
                        },
                        {
                           offset: 1,
                           color: '#0485FC'
                        }
                     ])
                  ]
               ]
            }
         },
         axisLabel: {
            //刻度值与刻度距离
            distance: 28,
            textStyle: {
               color: '#fff',
               fontSize: 20
            }
         },
         //小刻度
         axisTick: {
            show: true,
         },
         //大刻度
         splitLine: {
            show: true,
            length:24,
            lineStyle: {
               width: 2,
            }
         },
         pointer: {
            show: 0
         },
         detail: {
            show: 0
         }
      },
      //内部中心圈
      {
         name: '饼图',
         tooltip: {
            show: false
         },
         type: 'pie',
         radius: ['0%', '20%'],//0,35
         center: ['50%', '55%'],
         hoverAnimation: false,
         //数据和单位
         label: {
            normal: {
               show: true,
               position: 'center',
               formatter: function (params) {
                  return '{value|' + dataTmp + '}';
               },
               rich: {
                  value: {
                     fontFamily: 'SFUDINEngschrift',
                     fontSize: 30,
                     color: '#02E2FC',
                     verticalAlign: 'bottom'
                  },

               }
            }
         },
         labelLine: {
            normal: {
               show: false
            }
         },
         itemStyle: {
            color: '#092666', // 将内部中心圈的颜色设置为透明
         },
         animation: false,
         data: [{ value: 1 }]
      }
   ]
};