vue使用html实现的一个项目进度图

vue使用html实现的一个项目进度图

比如一个项目，可能对应多个不同的时间阶段，需要单独显示。如下图。那么echart和一些其他进度组件，实现起来就比较麻烦，甚至echart无法实现这么好的效果。于是就自己写了一个。

需求是：一个项目需要显示多个阶段，并且每个阶段都要一样的渐变色，并且按照日期显示在准确的比例位置

效果图：

对比echart实现的效果

这个echart的原理是用坐标，将月份视为x坐标，那么比如mar有数据，jun有数据，那么就会出现这么一段，但是他无法实现精准的显示，比如我一个时间是3月5日，他不能按比例显示在正确的位置

再对比另一个echart效果

这个echart的原理是先显示带颜色的部分，然后在用一个和echart背景色相同的，长度为从0到这个带颜色部分的起点位置的bar盖住带颜色的bar就形成了这个效果，那么可见。渐变色达不到效果，圆角达不到效果，而且要实现多个，这个数据结构会很复杂。
综上

还是决定自己用html实现一个，设计一个算法，显示再正确的比例位置

再看一下效果图

html

<div class="chart-box">
                          <div class="chart-top">
                            <div class="chart-top-item" v-for="(item,index) in headerData" :style="{width:100/headerData.length+'%'}" :key="index">
                              <span class="chart-top-item-year">{{ item.year||'' }}</span>
                              <span class="chart-top-item-year2">{{ item.lable }}</span>
                            </div>
                          </div>
                          <div class="chart-bot">
                            <div class="chart-line" :style="{minWidth:headerData.length*80+'px',width:'100%'}" v-for="(item,index) in productData" :key="index">
                              <el-tooltip  effect="dark" placement="top" v-for="(ite,idx) in item.items" :key="idx">
                                <template #content>{{ite.name||'--'}}<br/>开始日期：{{ite.startDateStr}}<br/>结束日期：{{ite.endDateStr}}</template>
                                <div class="chart-line-item"  :style="{left:ite.st+(100/headerData.length/2)+'%',width:(ite.et-ite.st)?(ite.et-ite.st)+'%':'',minWidth:'20px'}"></div>
                              </el-tooltip>
                              <div class="chart-line-split" v-for="(it,ix) in headerData" :style="{left:(ix*(100/headerData.length)+100/headerData.length/2)+'%'}" :key="ix"></div>
                            </div>
                          </div>
                        </div>

scss

.chart-box{
    width: 100%;
    height: calc(100% - 0px);
    // border:1px solid #333;
    overflow-x: scroll;
    /* 设置滚动条的大小 */
    &::-webkit-scrollbar {
        width: 3px; 
        height: 5px; 
    }
    /* 设置滚动条可拖动滑块的样式 */
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: rgba(226, 232, 240, 1);
    }
    /* 设置外层轨道的样式 */
    &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #fff;
    }
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    // padding: 5px 0 0;
    .chart-top{
      width: 100%;
      display: flex;
      .chart-top-item{
        min-width: 80px !important;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(76,73,72);
        position: relative;
        // border-top: 1px solid rgb(76,73,72);
        font-weight: bolder;
        &::before{
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: rgb(76,73,72);
          position: absolute;
          top: 52%;
          left: 50%;
          transform: translate(-52%,-50%);
        }
        &:after{
          content: '';
          display: block;
          width: 100%;
          height: 0px;
          border-top: 2px solid rgb(76,73,72);
          position: absolute;
          top: 52%;
          transform: translateY(-52%);
          left: 0;
        }

        .chart-top-item-year{
          display: block;
          position: absolute;
          top: 10%;
          left: 50%;
          transform: translateX(-50%);
        }
        .chart-top-item-year2{
          position: absolute;
          top: 55%;
          left: 50%;
          transform: translateX(-55%);
        }
      }
    }
    .chart-bot{
      width: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      .chart-line{
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        height: 40px;
        .chart-line-split{
          width: 0.1px;
          height: 100%;
          // border-right: 0.1px solid #ccc;
          background: #ccc;
          position: absolute;
          top: 0;
          transform: translateX(-50%);
          z-index: 1;
        }
        .chart-line-item{
          border-radius: 10px;
          height: 20px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: linear-gradient(to right, rgba(251,147,139,1), rgba(179,13,0,1));
          cursor: pointer;
          z-index: 2;
        }
      }
    }
  }

js

数据由表头和内容构成，如图：

1、表头是需要过滤的，比如23-26年之间都没有数据，那么就这之间的数据就全部不显示，只显示有数据的部分。

2、但是为了避免头部和尾部显示不全，又在已有表头数据的基础上，分别增加了一个节点。

3、为了便于区分，给每个这一年第一次出现的月份增加了一个年份的标记

数据

headerData.value = [

{

"lable": "Sep",

"value": "2023-09",

"year": 2023,

"color": "rgba(255,154,146,1)",

"isfirst": true

},

{

"lable": "Oct",

"value": "2023-10"

},

{

"lable": "Jan",

"value": "2024-01",

"year": 2024,

"color": "rgba(255,103,92,1)",

"isfirst": true

},

{

"lable": "Aug",

"value": "2024-08"

},

{

"lable": "Sep",

"value": "2024-09"

},

{

"lable": "Feb",

"value": "2025-02",

"year": 2025,

"color": "rgba(255,103,92,1)",

"isfirst": true

},

{

"lable": "Mar",

"value": "2025-03"

},

{

"lable": "Apr",

"value": "2025-04"

},

{

"lable": "Jun",

"value": "2025-06"

},

{

"lable": "Jul",

"value": "2025-07"

},

{

"lable": "Sep",

"value": "2025-09"

},

{

"lable": "Jan",

"value": "2026-01",

"year": 2026,

"color": "rgba(255,103,92,1)",

"isfirst": true

},

{

"lable": "Feb",

"value": "2026-02"

},

{

"lable": "Mar",

"value": "2026-03"

}

]
productData.value=[

{

"isShowFolder": true,

"activityFolders": null,

"id": 643109350596677,

"category": "test",

"name": "activity1",

"description": "activity1activity1",

"organizer": "test",

"enabled": true,

"items": [

{

"name": "item1",

"startDate": "2024-01-01 00:00:00",

"startDateStr": "2024-01-01",

"endDate": "2024-01-03 00:00:00",

"endDateStr": "2024-01-03",

"st": 14.516129032258066,

"et": 14.976958525345623

},

{

"name": "items3",

"startDate": "2025-02-12 00:00:00",

"startDateStr": "2025-02-12",

"endDate": "2025-02-13 00:00:00",

"endDateStr": "2025-02-13",

"st": 38.47926267281106,

"et": 38.70967741935484

},

{

"name": "item4",

"startDate": "2024-08-02 00:00:00",

"startDateStr": "2024-08-02",

"endDate": "2024-09-30 00:00:00",

"endDateStr": "2024-09-30",

"st": 21.88940092165899,

"et": 35.483870967741936

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 646198382841925,

"category": "test",

"name": "activity2",

"description": "activity2",

"organizer": "activity2",

"enabled": true,

"items": [

{

"name": "子事项",

"startDate": "2025-06-13 00:00:00",

"startDateStr": "2025-06-13",

"endDate": "2025-07-23 00:00:00",

"endDateStr": "2025-07-23",

"st": 60.13824884792627,

"et": 69.58525345622121

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 646273017249861,

"category": "test",

"name": "activity3",

"description": "activity3",

"organizer": "activity3",

"enabled": true,

"items": [

{

"name": "子事项1",

"startDate": "2025-02-01 00:00:00",

"startDateStr": "2025-02-01",

"endDate": "2025-02-28 00:00:00",

"endDateStr": "2025-02-28",

"st": 35.944700460829495,

"et": 42.16589861751152

},

{

"name": "子事项2",

"startDate": "2025-03-01 00:00:00",

"startDateStr": "2025-03-01",

"endDate": "2025-03-31 00:00:00",

"endDateStr": "2025-03-31",

"st": 43.08755760368664,

"et": 50

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 645519724691525,

"category": "qqqqq",

"name": "qqqqq",

"description": "qqqqq",

"organizer": "qqqqq",

"enabled": true,

"items": [

{

"name": "123",

"startDate": "2023-10-03 00:00:00",

"startDateStr": "2023-10-03",

"endDate": "2025-09-25 00:00:00",

"endDateStr": "2025-09-25",

"st": 7.8341013824884795,

"et": 77.1889400921659

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 646201372651589,

"category": "qqqqq",

"name": "activity2",

"description": "activity2",

"organizer": "activity2",

"enabled": true,

"items": [

{

"name": "子事项1",

"startDate": "2025-04-17 00:00:00",

"startDateStr": "2025-04-17",

"endDate": "2025-04-30 00:00:00",

"endDateStr": "2025-04-30",

"st": 53.91705069124424,

"et": 56.91244239631337

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 645964431528005,

"category": "广泛大概",

"name": "广泛大概",

"description": "广泛大概",

"organizer": "广泛大概",

"enabled": true,

"items": [

{

"name": "子圣西昂",

"startDate": "2026-01-15 00:00:00",

"startDateStr": "2026-01-15",

"endDate": "2026-02-16 00:00:00",

"endDateStr": "2026-02-16",

"st": 82.02764976958525,

"et": 89.40092165898618

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 646201454104645,

"category": "所发生的d",

"name": "的法国队发给",

"description": "d风格豆腐干",

"organizer": "古典风格d",

"enabled": true,

"items": [

{

"name": "",

"startDate": "2025-02-19 00:00:00",

"startDateStr": "2025-02-19",

"endDate": "2025-03-21 00:00:00",

"endDateStr": "2025-03-21",

"st": 40.09216589861751,

"et": 47.69585253456221

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 646274932224069,

"category": "测试测试",

"name": "测试测试",

"description": "测试测试",

"organizer": "测试测试",

"enabled": true,

"items": []

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 649139617321029,

"category": "Test2月27",

"name": "Test",

"description": "Test",

"organizer": "Test",

"enabled": true,

"items": [

{

"name": "Test",

"startDate": "2025-02-01 00:00:00",

"startDateStr": "2025-02-01",

"endDate": "2025-03-31 00:00:00",

"endDateStr": "2025-03-31",

"st": 35.944700460829495,

"et": 50

},

{

"name": "Test2",

"startDate": "2025-02-02 00:00:00",

"startDateStr": "2025-02-02",

"endDate": "2025-04-01 00:00:00",

"endDateStr": "2025-04-01",

"st": 36.175115207373274,

"et": 50.23041474654378

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 649410891395141,

"category": "Test2.28",

"name": "test",

"description": "test",

"organizer": "test",

"enabled": true,

"items": [

{

"name": "test",

"startDate": "2025-02-28 00:00:00",

"startDateStr": "2025-02-28",

"endDate": "2025-03-01 00:00:00",

"endDateStr": "2025-03-01",

"st": 42.16589861751152,

"et": 43.08755760368664

},

{

"name": "test2",

"startDate": "2025-03-01 00:00:00",

"startDateStr": "2025-03-01",

"endDate": "2025-03-02 00:00:00",

"endDateStr": "2025-03-02",

"st": 43.08755760368664,

"et": 43.31797235023042

},

{

"name": "",

"startDate": "2025-02-19 00:00:00",

"startDateStr": "2025-02-19",

"endDate": "2025-02-20 00:00:00",

"endDateStr": "2025-02-20",

"st": 40.09216589861751,

"et": 40.322580645161295

}

]

},

{

"isShowFolder": true,

"activityFolders": null,

"id": 649451403628613,

"category": "A1",

"name": "A2",

"description": "D1",

"organizer": "O1",

"enabled": true,

"items": []

}

]