(Vue)制作时间轴 鼠标移入时显示数据 时间点位置根据时间变化

默认状态

鼠标移入时

其中每个点代表一个时间

鼠标移入到时间点上时

---

<template>
  <div class="timeLineDiv" v-if="timeLineDataList.length>0" @mouseover="timeIsShow=true"
    @mouseleave="timeIsShow=false">
    <hr id="timeLineHr">
    <ul class="timeLineUl" v-show="timeIsShow">
      <li class="timeLineli" v-for="(item,index) in timeLineDataList" :key="index"
        :style="{left: calcTime[index]*30 + 'vw'}" @click="timeClick(index)" @mouseover="hover(index)"
        @mouseout="labelIsShow=-1">
        <div class="timeLabel" v-show="labelIsShow == index" style="color:white;position:absolute;bottom:1vh">
          {{item}}</div>
      </li>
    </ul>
    <span class="startTime timeText">{{timeLineDataList[0].substring(0, 4)}}</span>
    <span class="endTime timeText">{{timeLineDataList[timeLineDataList.length-1].substring(0, 4)}}</span>
  </div>
</template>

<script>
  export default {
    name: 'mapBox',
    data() {
      return {
        timeIsShow: false, //鼠标移入时显示时间点
        labelIsShow: -1, //鼠标移入时间点时显示label
        timeLineDataList: [], //时间轴展示数据

        timeLine_day: [], //根据时间计算距离开始时间的天数，通过百分比返回距离左侧的距离 控制时间点的位置         
        timeElapsed: '', //时间轴头尾的总天数
        calcTime: [], //计算时间点距离左侧的百分比
      };
    },
    methods: {
      initTimeLine() {
        var timeLineData = ['2020/2/4', '2018/5/5', '2020/6/23', '2019/7/16'];
        console.log(timeLineData.length, 'timeLineData.length')

        if (timeLineData.length > 0) {
          //时间排序
          timeLineData.sort(this.compareTime(timeLineData));
          //时间去重
          var index = 0;
          var firstTime = {};
          firstTime = timeLineData[0];

          this.timeLineDataList.push(firstTime);
          for (var i = 1; i < timeLineData.length; i++) {
            if (this.formatDate(this.timeLineDataList[index]) == this.formatDate(timeLineData[i])) {} else {
              var t = {};
              t = timeLineData[i];
              this.timeLineDataList.push(t);
              index++;
            }
          }

        }
        console.log(this.timeLineDataList, 'timeLineDataList');
        this.computDay(this.timeLineDataList);
      },

      //时间比较方法
      compareTime(time) {
        var that = this;
        return function (a, b) {
          var time1 = that.formatDate(a);
          var time2 = that.formatDate(b);
          return time1 - time2;
        }
      },

      //将日期类型字符串转为毫秒
      formatDate(str) {
        return new Date(str.replace(/-/g, '/')).getTime();
      },

      //点击对应时间点触发函数 返回时间
      timeClick(index) {
        console.log(this.timeLineDataList[index]);
        console.log(this.showList);
      },

      // 计算当年过了多少天
      computDay(str) {
        var data = new Date(this.timeLineDataList[0].substring(0, 4), 0, 1, 0, 0, 0); //初始时间
        var data2 = new Date(this.timeLineDataList[str.length - 1].substring(0, 4), 11, 30, 0, 0, 0); //结束时间
        this.timeElapsed = ((data2 - data) / 1000) / (24 * 60 * 60) //总时间
        for (var i = 0; i < str.length; i++) {
          var t = Math.floor((this.formatDate(str[i]) - data) / 1000) / (24 * 60 * 60);
          this.timeLine_day.push(t);
          this.calcTime.push(this.timeLine_day[i] / this.timeElapsed) //百分比
          this.showList.push(false)
        }
        console.log(this.showList);
      },
      
      //鼠标移入时显示label
      hover(index) {
        console.log(index)
        this.labelIsShow = index
      }

    },

    mounted() {
      this.initTimeLine();
    },
  }

</script>

<style scoped>
  /* 时间轴 */
  .timeLineDiv {
    width: 30vw;
    height: 2vh;
    position: absolute;
    left: 3vw;
    z-index: 5;
  }

  /* 时间线 */
  #timeLineHr {
    width: 30vw;
    height: 1vh;
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 5px;
    border-color: transparent;
  }

  /* 时间点 */
  .timeLineUl {
    list-style: none;
    position: absolute;
    display: flex;
    justify-content: start;
    padding-left: 0;
  }

  .timeLineUl li {
    text-align: left;
    position: absolute;
    bottom: 2vh;
    width: 1vh;
    height: 1vh;
    border-radius: 0.5vh;
    background-color: rgba(51, 51, 51, 0.8);
    border: solid rgba(51, 51, 51, 0.8) 1px;
  }
  
  .timeText {
    color: white;
    position: absolute;
    top: 3vh;
  }

  .startTime {
    left: 0;
  }

  .endTime {
    right: 0;
  }

</style>

​