echarts 实现时钟效果

最新推荐文章于 2024-07-29 17:35:12 发布

小菜花29

最新推荐文章于 2024-07-29 17:35:12 发布

阅读量1.1k

点赞数 1

文章标签： echarts

本文链接：https://blog.csdn.net/jinse29/article/details/120764366

版权

先放一张效果图，外圈颜色表示各个时段某项指标的状态，可自定义设置

本质是利用guage和pie实现，废话不多说，直接放代码

drawClockChart() {
      var datetime = new Date();
      var h = datetime.getHours();
      var m = datetime.getMinutes();
      var s = datetime.getSeconds();
      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 gethour = (hours_12).toFixed(2);
      var getminutes = (minutes).toFixed(2);
      this.rainbowLine = this.$echarts.init(document.getElementById('clockBox'));
      var dataType = []
      for (let i = 0; i < 48; i++) { // 虚拟数据
        var color
        if (i > 44) {
          color = "#072a70"
        } else if (i == 10) {
          color = "#f8dd1d"
        } else if (i == 16) {
          color = "#ffa901"
        } else if (i == 15) {
          color = "#ab0000"
        } else {
          color = '#64c127'
        }
        dataType.push({
          name: i,
          value: 1,
          trueValue: i,
          itemStyle: {
            normal: {
              color: color
            }
          },
        })
      }
      var option = {
        series: [{ // 时钟外圈颜色状态
          type: "pie",
          name: 'pie',
          radius: ["70%", "85%"],
          center: ["50%", "50%"],
          hoverAnimation: true,
          z: 10,
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: "#003359"
            }
          },
          label: {
            show: false
          },
          data: dataType,
          labelLine: {
            show: false
          }
        },
          { ///大表盘时针
            name: '小时',
            type: 'gauge',
            radius: '70%', //仪表盘半径
            min: 0,
            max: 12,
            startAngle: 90,
            endAngle: -269.9999,
            splitNumber: 12,
            animation: 0,
            pointer: { //仪表盘指针
              length: '50%',
              width: '5%'
            },
            itemStyle: { //仪表盘指针样式
              normal: {
                color: '#fff',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            axisLine: { //仪表盘轴线样式
              lineStyle: {
                width: 1,
              }
            },
            axisTick: { //仪表盘刻度样式
              distance: 0,
              length: '3%',
              splitNumber: 5, //分隔线之间分割的刻度数
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: { //分割线样式
              distance: 0,
              length: '5%',
              lineStyle: {
                color: '#fff',
                width: 5
              }
            },
            axisLabel: {
              show: true,
              formatter: function(param) {
                if (param !== 0) {
                  return param
                } else {
                  return null
                }
              },
              color: '#fff',
              fontSize: 10,
              distance: 5,
            },
            title: {
              show: 0
            }, //仪表盘标题
            detail: {
              show: 0
            }, //仪表盘显示数据
            data: [{
              value: gethour
            }]
          }, { ///大表盘分针
            name: '分钟',
            type: 'gauge',
            radius: '65%', //仪表盘半径
            min: 0,
            max: 60,
            startAngle: 90,
            endAngle: -269.9999,
            splitNumber: 12,
            animation: 0,
            pointer: { //仪表盘指针
              length: '85%',
              width: '3%'
            },
            itemStyle: { //仪表盘指针样式
              normal: {
                color: '#fff',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            axisLine: { //仪表盘轴线样式
              lineStyle: {
                width: 1,
              }
            },
            splitLine: { //分割线样式
              show: false,
            },
            axisTick: { //仪表盘刻度样式
              show: false,

            },
            axisLabel: {
              show: false,
            }, //刻度标签
            title: {
              show: 0
            }, //仪表盘标题
            detail: {
              show: 0
            }, //仪表盘显示数据
            data: [{
              value: getminutes
            }]
          },
          { //指针内环
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['0%', '5%'],
            z: 10,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 10,
              itemStyle: {
                normal: {
                  color: "#FFFFFF"
                }
              }
            }]
          }
        ]
      };
      this.clockChart.setOption(option);