Echarts钟表图

      main(){
        var  myChart=echarts.init(document.getElementById('main2'))
        var option = {
          title:{
            show:true,
            x:"center",
            y:"62%",
          },
          tooltip: {
            show: true,
            formatter: "{a}{b}:{c}",
            backgroundColor: '#6eba44',
            borderColor: '#6eba44',
            borderWidth: '1px',
            textStyle: {
              color: 'white'
            }
          },
          series : [
            {
              name: '小时',
              type: 'gauge',
              min:0,
              max: 12,
              startAngle: 90,
              endAngle: -269.9999,
              splitNumber: 12, //刻度数量
              radius: '90%', //图表尺寸
              animation: 0,
              pointer: { //仪表盘指针
                length: '70%',
                width: 6,
              },
              itemStyle: { //仪表盘指针样式
                normal: {
                  color: '#4b68cd',
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 10,
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
                }
              },
              axisLine: {//仪表盘轴线样式
                show: 0,
                lineStyle: {
                  color: [[1, '#337ab7']],
                  width: 10,
                  shadowColor: 'rgba(0,0,0,0.8)',
                  shadowBlur: 12,
                  shadowOffsetX: 3,
                  shadowOffsetY: 3
                }
              },
              splitLine: { //分割线样式
                length: 10,
                lineStyle: {
                  width: 3,}
              },
              axisTick: { //仪表盘刻度样式
                show: true,
                splitNumber: 5, //分隔线之间分割的刻度数
                length: 5, //刻度线长
                lineStyle: {
                  color: ['#ffffff']
                }
              },
              /*axisTick: {
                  show: true,
                  lineStyle: {
                      color: "#6eba44",
                      width: 1
                  },
                  length: 10,
                  splitNumber: 2
              },*/
              /* splitLine: {
                    show: true,
                    length: 20,
                    lineStyle: {
                        color: '#6eba44'
                    }
                },*/
              axisLabel: {//刻度标签
                show: 0,
              },
              detail: {
                show:0,
              },
              title: {//仪表盘标题
                show: 0,
              },
              data: [{
                name: "",
                value:10,
              }]
            },
            {
              name: '分钟',
              type: 'gauge',
              min:0,
              max:60,
              startAngle: 90,
              endAngle: -269.9999,
              splitNumber: 12, //刻度数量
              radius: '90%', //图表尺寸
              animation: 0,
              pointer: { //仪表盘指针
                length: '85%',
                width: 6,
              },
              itemStyle: { //仪表盘指针样式
                normal: {
                  color: '#EE6A50',
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 10,
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
                }
              },
              axisLine: {//仪表盘轴线样式
                show: 0,
                lineStyle: {
                  width: 0,
                }
              },
              splitLine: { //分割线样式
                length: 10,
                lineStyle: {
                  width: 2,
                }
              },
              axisTick: { //仪表盘刻度样式
                show: true,
                splitNumber: 5, //分隔线之间分割的刻度数
                length: 5,//刻度线长
                lineStyle: {
                  color: ['#ffffff']
                }
              },
              /*axisTick: {
                  show: true,
                  lineStyle: {
                      color: "#6eba44",
                      width: 1
                  },
                  length: 10,
                  splitNumber: 2
              },*/
              /* splitLine: {
                    show: true,
                    length: 20,
                    lineStyle: {
                        color: '#6eba44'
                    }
                },*/
              axisLabel: {//刻度标签
                show:0,
              },
              detail: { //指针评价
                show:0,
              },
              title: {//仪表盘标题
                show: 0,
              },
              data: [{
                name: "",
                value:10,
              }]
            },
            {
              name: '秒',
              type: 'gauge',
              min:0,
              max:60,
              startAngle: 90,
              endAngle: -269.9999,
              splitNumber: 12, //刻度数量
              radius: '90%', //图表尺寸
              animation: 0,
              pointer: { //仪表盘指针
                show:true,
                length: '95%',
                width: 4,
              },
              itemStyle: { //仪表盘指针样式
                normal: {
                  color: '#36BF44',
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 10,
                  shadowOffsetX: 4,
                  shadowOffsetY: 4
                }
              },
              axisLine: {//仪表盘轴线样式
                show: 0,
                lineStyle: {
                  color: [[1, '#337ab7']],
                  width: 10,
                }
              },
              splitLine: { //分割线样式
                length: 10,
                lineStyle: {
                  width: 2,
                }
              },
              axisTick: { //仪表盘刻度样式
                show: 1,
                splitNumber: 5, //分隔线之间分割的刻度数
                length: 5, //刻度线长
                lineStyle: {
                  color: ['#ffffff']
                }
              },
              /*axisTick: {
                  show: true,
                  lineStyle: {
                      color: "#6eba44",
                      width: 1
                  },
                  length: 10,
                  splitNumber: 2
              },*/
              /* splitLine: {
                    show: true,
                    length: 20,
                    lineStyle: {
                        color: '#6eba44'
                    }
                },*/
              axisLabel: {//刻度标签
                show:1,
                distance: 6,
                textStyle:{fontWeight:'bold',fontSize:16},
                formatter: function(t)
                {switch (t + '')
                {case '0':return '';
                  case '5':return '1';
                  case '10':return '2';
                  case '15':return '3';
                  case '20':return '4';
                  case '25':return '5';
                  case '30':return '6';
                  case '35':return '7';
                  case '40':return '8';
                  case '45':return '9';
                  case '50':return '10';
                  case '55':return '11';
                  case '60':return '12'}
                }
              },
              detail: { //指针评价
                show:0,
                formatter:'{value}',offsetCenter:[0,'60%']
              },
              title: {//仪表盘标题
                show: 0,
              },
              data: [{
                name: "",
                value:10,
              }]
            }
          ]
        };

        clearInterval(timeTicket);
        var timeTicket = setInterval(function()
        {
          var datetime = new Date();
          var h = datetime.getHours();
          var m = datetime.getMinutes();
          var s = datetime.getSeconds();
          var ms = datetime.getMilliseconds();
          var minutes = m + s / 60;
          var hours_24 = h + m / 60;
          var hours_12;
          if (hours_24 > 12){
            hours_12 = hours_24 - 12;
          }
          else{
            hours_12 = hours_24;
          }
          var seconds = s + ms / 1000;
          option.series[0].data[0].value = (hours_12).toFixed(2);
          option.series[1].data[0].value = (minutes).toFixed(2);
          option.series[2].data[0].value = (seconds).toFixed(2);
          myChart.setOption(option);
        }, 100);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },