Echarts在线免费图表

 
            let dataTmp = 25.2;
let max = 50;
let min = -10;
let lower = 0;
let upper = 30;
let unit = "℃";
let pointerColor = "#06a299";
let des = "温度";
option = {
   backgroundColor: '#fff',
   series: [
      // 内部中心进度，包含指针
      {
         name: des,
         center: ['50%', '55%'],
         type: 'gauge',
         radius: '48%',//95
         startAngle: 225,
         endAngle: -45,
         min: min,
         max: max,
         axisLine: {
            show: true,
            lineStyle: {
               //假设值为20，小于20指针扫过区域
               width: sizeFormat(0.55),
               color: [
                  [
                     (dataTmp - min) / (max - min),
                     new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                           offset: 0,
                           color: 'rgba(6,162,153,0)',//起始渐变色
                        },
                        {
                           offset: 1,
                           color: 'rgba(30,231,231,1)'
                        }
                     ])
                  ],
                  [1, 'rgba(255,255,255,.0)']
               ]
            }
         },
         axisTick: {
            show: 0
         },
         splitLine: {
            show: 0
         },
         axisLabel: {
            show: 0
         },
         pointer: {
            show: true,
            length: '100%',
            width: sizeFormat(0.04),
            itemStyle: {
               color: "#06a299"//箭头颜色
            }
         },
         //底部点位名称
         detail: {
            show: true,
            offsetCenter: [0, '75%'],
            formatter: ['{name|' + des + '}'].join('\n'),
            rich: {
               name: {
                  fontFamily: 'Microsoft YaHei',
                  fontSize: sizeFormat(0.18),
                  color: '#06a299',
                  lineHeight: sizeFormat(0.24)
               }
            }
         },
         data: [
            {
               dataTmp
            }
         ]
      },
      //刻度圈
      {
         type: 'gauge',
         radius: '50%',//100
         center: ['50%', '55%'],
         min: min,
         max: max,
         startAngle: 225,
         endAngle: -45,
         //最外层渐变色圈，宽度
         axisLine: {
            show: true,
            lineStyle: {
               width: sizeFormat(0.03),
               color: [
                  [
                     (lower - min) / (max - min),
                     new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                           offset: 0,
                           color: '#0578f2'
                        },
                        {
                           offset: 1,
                           color: '#3dffd8'
                        }
                     ])
                  ],
                  [
                     (upper - min) / (max - min),
                     new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                           offset: 0,
                           color: '#3dffd8'
                        },
                        {
                           offset: 1,
                           color: '#3dffd8'
                        }
                     ])
                  ],
                  [
                     1,
                     new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                           offset: 0,
                           color: '#3dffd8'
                        },
                        {
                           offset: 1,
                           color: '#ff3d3d'
                        }
                     ])
                  ]
               ]
            }
         },
         axisLabel: {
            //刻度值与刻度距离
            distance: sizeFormat(0.1),
            textStyle: {
               color: '#192e57',
               fontSize: sizeFormat(0.14)
            }
         },
         //小刻度
         axisTick: {
            show: true,
         },
         //大刻度
         splitLine: {
            show: true,
            length: sizeFormat(0.18),
            lineStyle: {
               width: sizeFormat(0.01),
            }
         },
         pointer: {
            show: 0
         },
         detail: {
            show: 0
         }
      },
      //内部中心圈
      {
         name: '饼图',
         tooltip: {
            show: false
         },
         type: 'pie',
         radius: ['0%', '15%'],//0,35
         center: ['50%', '55%'],
         hoverAnimation: false,
         itemStyle: {
            // normal: {
            //   color: '#000939'
            // },
            // emphasis: {
            //   color: '#000939'
            // }
         },
         //数据和单位
         label: {
            normal: {
               show: true,
               position: 'center',
               formatter: function (params) {
                  return '{value|' + dataTmp + '}\n{unit|' + unit + '}';
               },
               rich: {
                  value: {
                     fontFamily: 'SFUDINEngschrift',
                     fontSize: sizeFormat(0.3),
                     lineHeight: sizeFormat(0.5),
                     color: '#192e57',
                     verticalAlign: 'bottom'
                  },
                  unit: {
                     fontFamily: 'SFUDINEngschrift',
                     fontSize: sizeFormat(0.22),
                     color: '#192e57',
                     lineHeight: sizeFormat(0.3),
                     verticalAlign: 'bottom'
                  }
               }
            }
         },
         labelLine: {
            normal: {
               show: false
            }
         },
         itemStyle: {
            color: '#f6f8fc', // 将内部中心圈的颜色设置为透明
            borderWidth: sizeFormat(0.03), // 设置边框宽度
            borderColor: 'rgba(6, 162, 153,0.2)', // 设置边框颜色为蓝色
            shadowColor: 'rgba(6, 162, 153,0.2)', // 设置发光的颜色为蓝色
            shadowBlur: sizeFormat(0.2) // 设置发光的模糊程度
         },
         animation: false,
         data: [{ value: 1, name: '' }]
      }
   ]
};
//根据屏幕大小调整字体大小
function sizeFormat(res) {
   //获取屏幕宽度并计算比例
   let clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
   if (!clientWidth) {
      return;
   }
   let fontSize = 220 * (clientWidth / 1920);
   return res * fontSize;
}