横向时间轴的代码实现，亲测可行

<template>
  <div class="time">
    <div class="all">
      <div class="m-timeline-wrap">
        <div class="m-time-dot">
          <div
            class="dan"
            v-for="(item, index) in timelineData"
            :class="['m-dot-box', { active: active === item.visit_code }]"
            @click="onClickYear(item)"
            :key="index"
          >
            <div class="oneThing">
              <p class="u-year">
                {{
                  item.visit_date.substring(0, 4) +
                  '-' +
                  item.visit_date.substring(4, 6) +
                  '-' +
                  item.visit_date.substring(6, 8) +
                  ' ' +
                  item.visit_date.substring(8, 13)
                }}
              </p>
              <div class="m-dot">
                <div class="u-dot"></div>
              </div>
              <div class="detailIntro">
                <li class="type">
                  <span class="bigType">类型：</span>{{ item.visit_type }}
                </li>
                <li>事项：{{ item.dept_name }}</li>
                <!-- <li>疾病：{{ item.name }}</li> -->
                <li>医院：{{ item.hospital_code }}</li>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  name: 'HorizonTimeLine',
  props: {
    timelineData: {
      // 时间轴数据
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    }
    // activeYear: {
    //   // 初始选中年份
    //   // type: Number,
    //   // default: '2023-12-12'
    // }
  },
  data() {
    return {
      // active: this.activeYear
      active: ''
    };
  },
  // 检测时间线的数据改变的时候进行拿去第一个时间的操作
  watch: {
    timelineData: {
      handler() {
        this.getActiveYear();
      }
    }
  },
  created() {
    this.getActiveYear();
    console.log('时间线组件' + this.activeYear);
  },
  methods: {
    getActiveYear() {
      this.active = this.timelineData[0].visit_code;
    },
    // 格式化时间
    dateFormat: function (row, column) {
      var date = row[column.property];

      if (date == undefined || date == '') {
        return '';
      } else {
        return moment(date).format('YYYY-MM-DD');
      }
    },
    onClickYear(item) {
      if (this.active !== item.visit_code) {
        this.active = item.visit_code;
        // console.log('hello', item.year);
      }

      // console.log('000' + item.index);
      this.$emit(
        'onClickYear',
        item.visit_type,
        item.visit_date,
        item.visit_code
      );
    }
  }
};
</script>
<style lang="less" scoped>
.dan {
  // position: relative;
}
.oneThing {
  position: relative;
  width: 212px;
}
.time {
  // width: 2100px;
  overflow: auto;
  // height: 400px;
}
.all {
  height: 330px;
  // width: 2000px;
  overflow: auto;
}
li {
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 3px;
  list-style: none;
  text-align-last: left;
  font-size: 0.7rem;
}
.detailIntro {
  border-radius: 10px;
  margin-top: 20px;
  // padding: 0;
  padding: 5px;
  width: 150px;
  // border: 1px solid #ccc;
  font-size: 9px;
  height: 117px;
  position: absolute;
  left: 13%;
  top: 5px;
  // bottom: -125px;
  overflow: auto;
  background-color: rgb(235, 246, 252);
  margin-right: 20px;
}

@themeColor: #1890ff;
.m-timeline-wrap {
  width: 100%;
  // width: 2000px;
  //   overflow: auto;
  margin: 145px auto;
  height: 3px;
  background: #8dc6f5;
  .m-time-dot {
    // overflow-x: auto;
    width: 100%;
    // width: 2000px;
    display: flex;
    flex-direction: row;
    // justify-content: space-around;
    .m-dot-box {
      width: 100%;
      //   margin: 0 20px;
      cursor: pointer;
      text-align: center;
      transform: translateY(-100%+14px);
      .u-year {
        position: absolute;
        top: -50px;
        left: 35px;
        font-size: 17px;
        font-weight: 400;
        color: #333;
        transform: translateY(-8px);
        transition: all 0.3s ease;
      }
      .m-dot {
        position: absolute;
        left: 42%;
        top: -5px;
        // width: 2000px;
        margin: 0 auto;
        width: 14px;
        height: 14px;
        background: #8dc6f5;
        border-radius: 50%;
        transition: all 0.3s ease;
        .u-dot {
          //   margin: 0 10px;
          //   margin-bottom: -100px;
          width: 14px;
          height: 14px;
          background: #8dc6f5;
          border-radius: 50%;
          transition: all 0.3s ease;
        }
      }
    }
    .m-dot-box:hover {
      .u-year {
        color: @themeColor;
      }
      .m-dot {
        .u-dot {
          background: @themeColor;
        }
      }
    }
    .active {
      .u-year {
        transform: scale(1.5) translateY(-18px); // 同时设置多个transform属性只需用空格间隔，执行时从后往前执行！
        color: @themeColor;
      }
      .m-dot {
        transform: scale(2);
        .u-dot {
          transform: scale(0.67);
          background: @themeColor;
        }
      }
    }
  }
}
.type {
  font-size: 15px;
  // text-align: center;
  width: 98%;
  height: 30px;
  border-radius: 5px;
  margin-top: 5px;
  background-color: #fff;
  color: #2288e9;
}
.bigType {
  color: #333;
  margin-left: 5px;
}
</style>

网上大部分的时间轴都是竖向的，但是有的时候需求不是固定的所以记录一下学到的横向时间轴的组件的写法，这个是当时采用某位大佬的，忘记是哪一个了，当时找了好久终于找到一个可以的，现在想着记录一下，万一以后用到了可以采纳

来一个案例图：

注：

这里实现了一个小功能就是屏幕的适应，根据返回的事件节点个数进行宽度的设定

    lengthWidth() {
      console.log('22时间线数据', this.timelineData);
      // console.log('lllllll时间线长度', this.timelineData.length);
      // console.log(
      //   'llllllll应该有的长度大小向下取整',
      //   Math.floor(this.timelineData.length / 5)
      // );
      // console.log('llllllll应该有的长度大小取模', this.timelineData.length % 5);
      var mathFlag = this.timelineData.length % 5;
      let result = 0;
      if (mathFlag < 3) {
        result = Math.floor(this.timelineData.length / 5) + 0.3;
      } else if (mathFlag < 4) {
        result = Math.floor(this.timelineData.length / 5) + 0.5;
      } else {
        result = Math.floor(this.timelineData.length / 5) + 1;
      }
      if (result < 1) {
        result = 1;
      }
      console.log('时间线长度最终的长度', result);
      return { width: result * 100 + '%' };
    },