{"_id":"@boyzcf/vue3-time-line","_rev":"3-b52b2f3766426337e3df589a474fb2ce","name":"@boyzcf/vue3-time-line","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.1":{"name":"@boyzcf/vue3-time-line","version":"0.0.1","keywords":["vue3","@boyzcf/vue3-time-line","canvas","timeline","time axis"],"author":{"name":"boyzcf"},"license":"MIT","_id":"@boyzcf/vue3-time-line@0.0.1","maintainers":[{"name":"boyzcf","email":"2945482076@qq.com"}],"homepage":"https://github.com/gitboyzcf/time-line#readme","bugs":{"url":"https://github.com/gitboyzcf/time-line/issues"},"dist":{"shasum":"b9d746ba323af16197c8ecbeadf6d88246a2b50d","tarball":"https://registry.npmjs.org/@boyzcf/vue3-time-line/-/vue3-time-line-0.0.1.tgz","fileCount":6,"integrity":"sha512-h87IS9VdaYgiRF4KwrlRuVh16dzdGiVs5MrvD1CC4bJ3hECCbzMZYmSj+QBaIEc9w2Uk235DLBW8TnPafTMplA==","signatures":[{"sig":"MEQCIEtIXJD13CIMStpyMjwUMNjIkdEYyosccnvSN8RCQWg9AiA9WGe5dvMxa48lIQ2ZLrSALaOWbO99eumEEi+/m3xyBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182324},"main":"./time-line.umd.cjs","module":"./time-line.js","exports":{".":{"import":"./time-line.js","require":"./time-line.umd.cjs"}},"gitHead":"2828c5afbcb4f01b0f75b5780fee90c881eadcc5","private":false,"_npmUser":{"name":"boyzcf","email":"2945482076@qq.com"},"repository":{"url":"git+https://github.com/gitboyzcf/time-line.git","type":"git"},"_npmVersion":"9.6.7","description":"一个基于Vue3、Vite的时间轴组件，一般用于监控视频的回放","directories":{},"_nodeVersion":"18.17.0","dependencies":{"dayjs":"^1.11.10"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue3-time-line_0.0.1_1698055055811_0.34104317810668205","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@boyzcf/vue3-time-line","version":"1.0.0","keywords":["vue3","@boyzcf/vue3-time-line","canvas","timeline","time axis","vue3-time-line"],"author":{"name":"boyzcf"},"license":"MIT","_id":"@boyzcf/vue3-time-line@1.0.0","maintainers":[{"name":"boyzcf","email":"2945482076@qq.com"}],"homepage":"https://github.com/gitboyzcf/vue3-time-line#readme","bugs":{"url":"https://github.com/gitboyzcf/vue3-time-line/issues"},"dist":{"shasum":"ea29b23bf7d9be83b89bfd64f6441c98614a42c2","tarball":"https://registry.npmjs.org/@boyzcf/vue3-time-line/-/vue3-time-line-1.0.0.tgz","fileCount":6,"integrity":"sha512-RRQZ+VqP9E4VA1ZaHmA++tGSt7OeWVNdqI4wjH0qOMhDScOCnOeL7+pgCuQHDEILR7GMJEF+QKiCtb3obrIp2Q==","signatures":[{"sig":"MEUCIQCHGAe5QFUcQ9mxb70y4V49W455wWfAU/rmoXRJQegDawIgCs53KXAu69y97QqjLGZDSCFv+d5jengp8d2JEM0uPvQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":95895},"main":"./lib/vue3-time-line.umd.cjs","types":"./lib/vue3-time-line.d.ts","module":"./lib/vue3-time-line.mjs","exports":{".":{"import":"./vue3-time-line.js","require":"./vue3-time-line.umd.cjs"}},"gitHead":"395ae6259789aa90e474a391beb143a2aed6e8f7","scripts":{"dev":"vite","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","build":"vite build --mode lib","format":"prettier --write src/","preview":"vite preview","test:unit":"vitest","build:demo":"vite build --mode demo"},"_npmUser":{"name":"boyzcf","email":"2945482076@qq.com"},"repository":{"url":"git+https://github.com/gitboyzcf/vue3-time-line.git","type":"git"},"_npmVersion":"10.7.0","description":"一个基于Vue3的时间轴组件，一般用于监控视频的回放","directories":{},"_nodeVersion":"20.15.0","dependencies":{"vue":"^3.3.4","sass":"^1.69.3","dayjs":"^1.11.10","vue3-time-line":"file:./lib"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.1.0+sha1.ab7948c89104fdd3fc88b5b391fa4b73fd800631","devDependencies":{"vite":"^4.4.9","jsdom":"^22.1.0","eslint":"^8.49.0","vitest":"^0.34.4","vue-tsc":"^2.2.10","prettier":"^3.0.3","typescript":"^5.8.3","@types/node":"^22.15.12","@vue/tsconfig":"^0.7.0","@vue/test-utils":"^2.4.1","vite-plugin-dts":"^4.5.3","eslint-plugin-vue":"^9.17.0","@vitejs/plugin-vue":"^4.3.4","@vitejs/plugin-vue-jsx":"^3.0.2","@rushstack/eslint-patch":"^1.3.3","vite-plugin-style-inject":"^0.0.1","@typescript-eslint/parser":"^8.32.0","@vue/eslint-config-prettier":"^8.0.0","@vuedx/typescript-plugin-vue":"^0.7.6","typescript-plugin-css-modules":"^5.1.0","@typescript-eslint/eslint-plugin":"^8.32.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-time-line_1.0.0_1746603540127_0.09390520083668519","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@boyzcf/vue3-time-line","version":"1.0.1","description":"一个基于Vue3的时间轴组件，一般用于监控视频的回放","main":"./lib/vue3-time-line.umd.js","module":"./lib/vue3-time-line.mjs","types":"./lib/vue3-time-line.d.ts","exports":{".":{"import":"./lib/vue3-time-line.mjs","require":"./lib/vue3-time-line.umd.js"}},"keywords":["vue3","@boyzcf/vue3-time-line","canvas","timeline","time axis","vue3-time-line"],"author":{"name":"boyzcf"},"scripts":{"dev":"vite","build":"vite build --mode lib","build:demo":"vite build --mode demo","preview":"vite preview","test:unit":"vitest","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format":"prettier --write src/"},"dependencies":{"@boyzcf/vue3-time-line":"^1.0.0","dayjs":"^1.11.10","sass":"^1.69.3","vue":"^3.3.4","vue3-time-line":"file:./lib"},"devDependencies":{"@rushstack/eslint-patch":"^1.3.3","@types/node":"^22.15.12","@typescript-eslint/eslint-plugin":"^8.32.0","@typescript-eslint/parser":"^8.32.0","@vitejs/plugin-vue":"^4.3.4","@vitejs/plugin-vue-jsx":"^3.0.2","@vue/eslint-config-prettier":"^8.0.0","@vue/test-utils":"^2.4.1","@vue/tsconfig":"^0.7.0","@vuedx/typescript-plugin-vue":"^0.7.6","eslint":"^8.49.0","eslint-plugin-vue":"^9.17.0","jsdom":"^22.1.0","prettier":"^3.0.3","typescript":"^5.8.3","typescript-plugin-css-modules":"^5.1.0","vite":"^4.4.9","vite-plugin-dts":"^4.5.3","vite-plugin-style-inject":"^0.0.1","vitest":"^0.34.4","vue-tsc":"^2.2.10"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/gitboyzcf/vue3-time-line.git"},"bugs":{"url":"https://github.com/gitboyzcf/vue3-time-line/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"packageManager":"pnpm@10.1.0+sha1.ab7948c89104fdd3fc88b5b391fa4b73fd800631","_id":"@boyzcf/vue3-time-line@1.0.1","gitHead":"395ae6259789aa90e474a391beb143a2aed6e8f7","homepage":"https://github.com/gitboyzcf/vue3-time-line#readme","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-VyxS9k4x3cfLEZJae8z6Bs978wa4YZ8rR1VMKsYEaKy9GJT0t7dv+D9l+s3BMDOHOEvmqqjznTkrsXZS9ePW7w==","shasum":"a7c68c498bbea9ca78aa9af1481426ae679c58f1","tarball":"https://registry.npmjs.org/@boyzcf/vue3-time-line/-/vue3-time-line-1.0.1.tgz","fileCount":6,"unpackedSize":95942,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDsgvledMweFIKIZzD+AJIJxjwmeE18KBeXJrxzaeqi6AiEA9QDM35qBgascJKUWYRB0/pU2JJZ96M4jgBqcRsypixM="}]},"_npmUser":{"name":"boyzcf","email":"2945482076@qq.com"},"directories":{},"maintainers":[{"name":"boyzcf","email":"2945482076@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-time-line_1.0.1_1746603821119_0.9279294882344886"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-23T09:57:35.689Z","modified":"2025-05-07T07:43:41.475Z","0.0.1":"2023-10-23T09:57:35.983Z","1.0.0":"2025-05-07T07:39:00.337Z","1.0.1":"2025-05-07T07:43:41.282Z"},"bugs":{"url":"https://github.com/gitboyzcf/vue3-time-line/issues"},"author":{"name":"boyzcf"},"license":"MIT","homepage":"https://github.com/gitboyzcf/vue3-time-line#readme","keywords":["vue3","@boyzcf/vue3-time-line","canvas","timeline","time axis","vue3-time-line"],"repository":{"type":"git","url":"git+https://github.com/gitboyzcf/vue3-time-line.git"},"description":"一个基于Vue3的时间轴组件，一般用于监控视频的回放","maintainers":[{"name":"boyzcf","email":"2945482076@qq.com"}],"readme":"# time-line\r\n\r\n一个基于Vue3、Vite的时间轴组件，一般用于监控视频的回放\r\n\r\n# 安装\r\n\r\n```bash\r\nnpm install @boyzcf/vue3-time-line\r\nor\r\npnpm install @boyzcf/vue3-time-line\r\nor\r\nyarn add @boyzcf/vue3-time-line\r\n```\r\n\r\n# 全局引入\r\n\r\n```js\r\n// main.js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\n\r\nimport TimeLine from '@boyzcf/vue3-time-line'\r\n\r\nconst app = createApp(App)\r\n\r\napp.use(TimeLine, { comName: 'TimeLine' })\r\napp.mount('#app')\r\n```\r\n\r\n# 基础用法\r\n\r\n\r\n展开查看
\r\n\r\n\r\n```js\r\n\r\n\r\ntime2: '2021-01-15 00:00:00',\r\nconst timeChange = (time) => {\r\n defaultData.time = t\r\n}\r\n```\r\n\r\n
\r\n\r\n \r\n\r\n# 显示时间段\r\n\r\n\r\n展开查看
\r\n\r\n\r\n```js\r\n \r\n \r\n
当前时间：{{ showTime2 }}
\r\n
\r\n \r\n
\r\n
\r\n \r\n\r\n# 多个时间轴\r\n\r\n当超过一个播放窗口时可以显示多个时间轴。\r\n\r\n展开查看
\r\n\r\n\r\n```js\r\n\r\n \r\n
当前时间：{{ showTime3 }}
\r\n
\r\n \r\n
\r\n
\r\n \r\n\r\n# 显示自定义元素\r\n\r\n有时候会想在时间轴上显示一些自定义的东西，比如某个时间段显示一张图片之类的，这可以通过监听某个时间点的位置来实现。\r\n\r\n展开查看
\r\n\r\n\r\n```js\r\n\r\n \r\n
当前时间：{{ showTime4 }}
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n\r\n# API\r\n\r\n## 属性\r\n\r\n| 参数 | 说明 | 类型 | 可选值 | 默认值 |\r\n| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------ | ------------------- |\r\n| initTime | 初始时间，中点所在的时间，默认为当天0点。可以传递数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00 | Number/String | — | |\r\n| timeRange | 中间刻度所允许显示的时间范围，即当前时间的限定范围，对象类型，字段见表1-1 | Object | — | |\r\n| initZoomIndex | 初始的时间分辨率，数字索引，时间分辨率数组为：['半小时', '1小时', '2小时', '6小时', '12小时', '1天', '3天', '15天', '30天', '365天', '3650天'] | Number | — | 5 |\r\n| showCenterLine | 是否显示中间的竖线 | Boolean | — | true |\r\n| centerLineStyle | 中间竖线的样式，对象类型，字段见表1-2 | Object | — | |\r\n| textColor | 日期时间文字的颜色 | String | — | rgba(151,158,167,1) |\r\n| hoverTextColor | 鼠标滑过显示的时间文字颜色 | String | — | rgb(194, 202, 215) |\r\n| lineColor | 时间刻度的颜色 | String | — | rgba(151,158,167,1) |\r\n| lineHeightRatio | 时间刻度高度占时间轴高度的比例，对象格式，字段见表1-3 | Object | — | |\r\n| showHoverTime | 鼠标滑过时是否显示实时所在的时间 | Boolean | — | true |\r\n| timeSegments | 要显示的时间颜色段，对象数组类型，对象字段见表1-4 | Array | — | [] |\r\n| backgroundColor | 时间轴背景颜色 | String | — | #262626 |\r\n| enableZoom | 是否允许鼠标滚动切换时间分辨率 | Boolean | — | true |\r\n| enableDrag | 是否允许拖动 | Boolean | — | true |\r\n| windowList | 播放窗口列表，播放窗口数量大于1的话可以配置此项，会显示和窗口对应数量的时间轴，只有一个窗口的话请直接使用基本时间轴，对象数组类型，对象字段见表1-5 | Array | — | [] |\r\n| baseTimeLineHeight | 当显示windowList时的基础时间轴高度 | Number | — | 50 |\r\n| initSelectWindowTimeLineIndex | 初始选中的窗口时间轴索引 | Number | — | -1 |\r\n| maxClickDistance（v0.1.2+） | 鼠标按下和松开的距离小于该值认为是点击事件 | Number | — | 3 |\r\n| roundWidthTimeSegments（v0.1.6+） | 绘制时间段时对计算出来的坐标进行四舍五入，可以防止相连的时间段绘制出来有间隔的问题 | Boolean | — | true |\r\n| customShowTime（v0.1.7+） | 自定义显示哪些时间，详细请阅读下方【属性详解1-1】 | Function | — | |\r\n| hoverTimeFormat（v0.1.9+） | 格式化鼠标滑过时间，函数类型，接收一个`time`参数，代表当前鼠标所在的时间戳，函数需要返回一个格式化后的时间字符串，默认显示的时间格式为`YYYY-MM-DD HH:mm:ss` | Function | — | |\r\n| showDateAtZero（v0.1.9+） | `0`点处是否显示日期，时间轴上默认`0`点处显示的日期，需要显示成时间，那么就需要设为`false`，然后通过`formatTime`属性自定义格式化 | Boolean | — | true |\r\n| formatTime（v0.1.9+） | 格式化时间轴显示时间，默认规则是`年`模式`YYYY`、`年月`模式`YYYY-MM`、`0`点`MM-DD`、其他`HH:mm`，如果想自定义，比如`0`点还是显示时间，不显示日期，就可以通过该函数进行格式化。如果该函数返回值为空值，那么还会走内部规则。 | Function | — | |\r\n| extendZOOM（v0.1.9+） | 扩展ZOOM列表，详细请参考下方【属性详解1-2】 | Array | — | [] |\r\n\r\n### 属性详解1-1 customShowTime的用法\r\n\r\n> 该属性在v0.1.7+版本开始支持\r\n\r\n当你在使用本组件的时候可能会遇到一个很常见的问题，比如容器的宽度很小，然后时间段展示的又是几天、甚至半个月的时间，那么很容易遇到时间段里面时间都挤在一起的问题，比如这个[issue](https://github.com/wanglin2/VideoTimeLine/issues/3)，其实组件内部是内置了一些判断方法，比如在`3天`的时间分辨率下，对应的`initZoomIndex=6`，对应关系可参考上方属性表格，那么就会使用`3天`的这个判断规则，如下：\r\n\r\n```js\r\n;(date) => {\r\n // 每三小时显示\r\n return date.getHours() % 3 === 0 && date.getMinutes() === 0\r\n}\r\n```\r\n\r\n意思是显示`3`的倍数的整点小时，那么当你容器宽度不够，且时间分辨率设置的比较大，那么时间就会挤在一起看不清，这时候你就可以通过`customShowTime`属性传入自定义的判断方法，这个方法接收两个参数：\r\n\r\n- `date`：是否要显示的时间，可以根据该时间进行判断是否要显示这个时间\r\n- `currentZoomIndex`：当前的时间分辨率，比如`3天`对应的就是`6`，对应关系可参考上方属性表格\r\n\r\n那么如果内置的规则不满足的话，就可以自定义，比如`3天`的时间分辨率下我想只显示`12`倍数的小时，可以这么做：\r\n\r\n```html\r\n\r\n```\r\n\r\n```js\r\nexport default {\r\n methods: {\r\n customShowTime(date, zoomIndex) {\r\n if (zoomIndex === 6) {\r\n return date.getHours() % 12 === 0 && date.getMinutes() === 0\r\n }\r\n }\r\n }\r\n}\r\n```\r\n\r\n函数返回值需要注意一下，如果要显示返回`true`，如果不显示返回`false`，如果不处理，仍旧交给内部规则，返回其他值。\r\n\r\n### 属性详解1-2 extendZOOM的用法\r\n\r\n该属性用于扩展`ZOOM`列表，即时间分辨率，内置了`11`个时间分辨率，可以参考上方表格`initZoomIndex`属性，如果内置的时间分辨率满足不了你，那么可以通过该属性进行扩展。\r\n\r\n`extendZOOM`为数组类型，数组的每一项为：\r\n\r\n```js\r\n{\r\n zoom: 26, // 时间分辨率，整个时间轴表示的时间范围，单位：小时\r\n zoomHourGrid: 0.5, //时间分辨率对应的每格小时数，即时间轴上最小格代表多少小时\r\n mobileZoomHourGrid: 2, // 手机模式下时间分辨率对应的每格小时数，如果不用适配手机端，可以不用设置\r\n}\r\n```\r\n\r\n这个数组的数据会追加到内部的`ZOOM`数组，对应的`zoomIndex`往后累加即可，内部一共有`11`个`zoom`，那么你追加了一项，对应的`zoomIndex`为11，因为是从零开始计数。\r\n\r\n同时你需要传递`customShowTime`属性来自定义控制时间显示，否则会报错，因为内置的规则只有`11`个。\r\n\r\n接下来看一个案例。\r\n\r\n> 只显示当天的时间， 从00:00:00到23:59:59，详细请看这个[issue](https://github.com/wanglin2/VideoTimeLine/issues/6)\r\n\r\n首先默认的`initZoomIndex`为`5`，即`1`天，刚好满足，不用修改，然后将`enableZoom`设为`false`，不允许修改时间分辨率；将`enableDrag`设为`false`，不允许拖拽； 然后再将`initTime`设为当天的`12:00:00`，那么刚好整个时间轴显示的就是当前的时间，到这里，似乎就可以了。但是实际上会存在一些问题，如前面的`issue`中所示。\r\n\r\n问题1：`0`点处显示的是日期，需要改成时间\r\n\r\n很简单，将`showDateAtZero`设为`false`，`0`点就不会显示日期了\r\n\r\n问题2：鼠标滑过显示的还是带日期的，这个好办，通过`hoverTimeFormat`属性自定义格式化规则即可：\r\n\r\n```js\r\nhoverTimeFormat(time) {\r\n // 小于今天，大于今天的时间不显示\r\n if (\r\n dayjs(time).isBefore(dayjs().format('YYYY-MM-DD 00:00:00')) ||\r\n dayjs(time).isAfter(dayjs().format('YYYY-MM-DD 23:59:59'))\r\n ) {\r\n return ''\r\n }\r\n return dayjs(time).format('HH:mm:ss')\r\n}\r\n```\r\n\r\n问题3：左右两侧的时间显示不出来\r\n\r\n即`0`点和`24`点的时间刚好是两端，因实现原理问题，无法显示，怎么办呢，其实很简单，假如时间轴表示的时间范围为`25`小时，那么左右两端不就会各多出半小时的时间吗，这个空间足够显示时间了，但是内部的时间分辨率没有`25`小时的，这时就需要扩展时间分辨率了：\r\n\r\n```js\r\nextendZOOM: [\r\n {\r\n zoom: 25,\r\n zoomHourGrid: 0.5\r\n }\r\n]\r\n```\r\n\r\n扩展了`extendZOOM`，`customShowTime`不能少，否则会报错：\r\n\r\n```js\r\ncustomShowTime(date, zoomIndex) {\r\n // 当zoomIndex等于11，也就是等于我们开展的zoom时才自己处理\r\n if (zoomIndex === 11) {\r\n // 时间是2的倍数时才会显示\r\n return date.getHours() % 2 === 0 && date.getMinutes() === 0\r\n }\r\n}\r\n```\r\n\r\n到这里，你还会发现一个问题，`24`点实际上是下一天的`0`点，所以显示的是`00:00`，这样可能不符合我们的需求，这时我们可以通过`formatTime`来格式化时间轴上的时间显示，判断是下一天的`0`点，那么就改成`24:00`：\r\n\r\n```js\r\nformatTime(time) {\r\n // 下一天的00:00显示24:00\r\n if (time.isAfter(dayjs().format('YYYY-MM-DD 23:59:59'))) {\r\n return '24:00'\r\n }\r\n if (\r\n time.hour() === 0 &&\r\n time.minute() === 0 &&\r\n time.millisecond() === 0\r\n ) {\r\n return time.format('HH:mm')\r\n }\r\n}\r\n```\r\n\r\n完整代码请参考：[CustomZoom.vue](https://github.com/wanglin2/VideoTimeLine/blob/main/demo/src/components/CustomZoom.vue)。\r\n\r\n### 表1-1 timeRange对象的字段格式\r\n\r\n| 字段名 | 说明 | 类型 | 可选值 | 默认值 |\r\n| ------ | --------------------------------------------------------------------------------------- | ------------- | ------ | ------ |\r\n| start | 允许显示的最小时间，可以传递数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00 | Number/String | — | |\r\n| end | 允许显示的最大时间，可以传递数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00 | Number/String | — | |\r\n\r\n### 表1-2 centerLineStyle对象的字段格式\r\n\r\n| 字段名 | 说明 | 类型 | 可选值 | 默认值 |\r\n| ------ | ---------------- | ------ | ------ | ------ |\r\n| width | 线的宽度，单位px | Number | — | 2 |\r\n| color | 线的颜色 | String | — | #fff |\r\n\r\n### 表1-3 lineHeightRatio对象的字段格式\r\n\r\n| 字段名 | 说明 | 类型 | 可选值 | 默认值 |\r\n| ------ | -------------------------- | ------ | ------ | ------ |\r\n| date | 0点时的日期线段高度 | Number | — | 0.3 |\r\n| time | 显示时间的线段高度 | Number | — | 0.2 |\r\n| none | 不显示时间的线段高度 | Number | — | 0.1 |\r\n| hover | 鼠标滑过时显示的时间段高度 | Number | — | 0.3 |\r\n\r\n### 表1-4 timeSegments数组的对象元素的字段格式\r\n\r\n| 字段名 | 说明 | 类型 | 可选值 | 默认值 |\r\n| ---------- | --------------------------------------------- | ------ | ------ | ------ |\r\n| beginTime | 起始时间戳，必填 | Number | — | |\r\n| endTime | 结束时间戳，必填 | Number | — | |\r\n| color | 颜色，必填 | String | — | |\r\n| startRatio | 高度的起始比例，即top=时间轴高度\\*startRatio | Number | — | 0.6 |\r\n| endRatio | 高度的结束比例，即bottom=时间轴高度\\*endRatio | Number | — | 0.9 |\r\n\r\n> 从v0.1.8+版本开始，时间段可以只传一个beginTime，绘制一根宽度为1px的线段\r\n\r\n### 表1-5 windowList数组的对象元素的字段格式\r\n\r\n| 字段名 | 说明 | 类型 | 可选值 | 默认值 |\r\n| ------------ | ----------------------------------------- | ----- | ------ | ------ |\r\n| timeSegments | 要显示的时间段，对象数组，对象字段见表1-4 | Array | — | [] |\r\n\r\n可以添加你需要的其他任意字段\r\n\r\n## 事件\r\n\r\n| 事件 | 说明 | 回调函数参数 |\r\n| ------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| timeChange | 当前时间切换事件 | currentTime（当前时间，时间戳格式） |\r\n| dragTimeChange | 拖动时间条结束后的事件 | currentTime（当前时间，时间戳格式） |\r\n| mousedown | 鼠标按下事件 | e（事件对象） |\r\n| mouseup | 鼠标松开事件 | e（事件对象） |\r\n| click_timeSegments | 点击到了基础时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、time（v0.1.10+，点击位置对应的时间戳）、 date（v0.1.10+，点击位置对应的日期时间字符串）、 x（v0.1.10+，点击位置相对时间轴左侧的距离） |\r\n| click_window_timeSegments | 点击到了窗口时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、index（时间轴索引）、item（时间轴数据） |\r\n| change_window_time_line | 点击窗口时间轴进行切换选中时触发 | index（时间轴索引）、item（时间轴数据） |\r\n| click_timeline（v0.1.2+） | 时间轴的点击事件 | time（点击位置对应的时间戳）、 date（点击位置对应的日期时间字符串）、 x（点击位置相对时间轴左侧的距离） |\r\n\r\n## 方法\r\n\r\n| 方法名 | 说明 | 参数 |\r\n| --------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| updateWatchTime | 手动更新观察的时间位置，比如页面滚动后时间轴的整体位置变化了需要调用，如果没有显示自定义元素时无需调用 | |\r\n| reRender | 重新渲染 | |\r\n| setTime | 设置当前时间 | t（数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00） |\r\n| setZoom | 设置分辨率 | index（分辨率索引） |\r\n| watchTime | 设置要观察的时间点，会返回该时间点的实时位置，可以根据该位置来设置一些自定义元素的位置，位置为相对于浏览器可视窗口的位置 | time（要观察的时间，数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00）, callback（时间点位置变化时会调用，回调参数为x水平位置、y重置位置，单位px）, windowTimeLineIndex（如果自定义元素是要显示到某个窗口时间轴里的话，可以通过该参数来指定第几个时间轴，数字索引，从1开始） |\r\n| onResize | 如果时间轴所在的容器尺寸变化了需要调用该方法来适应 | |\r\n","readmeFilename":"README.md"}