企業級時間軸插件Vue-timelinepick

簡介

時間范圍選擇插件 取當前時間之前一段時間范圍 按刻，小時，天分類

在線演示及下載

在線演示: https://yelingfeng.github.io/vue-timelinepick/ 本地下載

依賴

• jquery <=2.x
• d3 < 4.x
• createjs
• tweenMax

使用方法

引入依賴文件

import timelinepick from "vue-timelinepick"
import "vue-timelinepick/dist/vue-timelinepick.css"

Vue.use(timelinpick)

vue組件中直接使用

<timelinepick :option="op" :width="width" :height="height" :handler="changeAction"></timelinepick>

data() {
      return {
          "width": 1200,
          "height":110,
          "op" : {
              "threshold": new Date(),
              "number": 97,
              "spanMinNumber": 10,
              "isFixedDrag" : true,
              "spanIndex": {start: 70, end: 97},
              "type": "quarter",
              "dateFormat" : 'yyyy-MM-dd mm:hh:ss'
          }
      }
  },
methods:{
    changeAction(e){
        this.startTime = e.startTime;
        this.endTime = e.endTime;
    }
}

屬性

屬性	說明
width	寬
height	高
option	配置項

方法

屬性	說明
threshold	起點時間（默認當前） new Date()
number	總刻度 97
isFixedDrag	是否禁止拖拽 false
spanIndex	起始滑塊范圍 {start: 70, end: 97}
type	刻度類型 "quarter"
dateFormat	格式 'yyyy-MM-dd mm:hh:ss'

更多插件