@ebiz/designer-components 0.0.46 → 0.0.48

package/src/components/charts/components/TimelineChart/timeline.js

@@ -1,461 +1,461 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { formatDate } from '../../util/convert';
-import defendXSS from '../../util/defendXSS';
-import Token from '../../feature/token';
-import chartToken from './chartToken';
-
-export default class TimeLine {
-    constructor(
-        canvasId,
-        currentTime,
-        option
-    ) {
-        this.canvas = document.getElementById(canvasId);
-        this.ctx = this.canvas.getContext('2d');
-
-        // 获取配置项
-        this.option = option;
-        // 当前时间
-        this.currentTime = currentTime;
-        // 自定义时间轴的背景色
-        this.canvas.style.background = this.option.background || 'transparent';
-        // 自定义时间轴刻度线的颜色
-        this.axisLineColor = (this.option.axisLineStyle && this.option.axisLineStyle.color) || Token.config.xAxisTickLineColor;
-        // 自定义时间轴文本颜色
-        this.labelColor = (this.option.labelStyle && this.option.labelStyle.color) || Token.config.xAxisLabelColor;
-        // 整个时间轴的时间
-        this.totalHours = null;
-        // 刻度间隔(分钟)
-        this.minuteStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
-        // 最小刻度间距20px
-        this.minScaleSpacing = 20;
-        // 允许的最小大格长度px值 如果调小 大格会变密集
-        this.minLargeScaleSpacing = 80;
-        // 缩放层级
-        this.zoom = 24;
-        // 鼠标选中位置
-        this.selectedPosition = [];
-        // 弹窗定时器
-        this.setTipTimeOut = null;
-        // 初始化时间轴
-        this.init();
-
-        const _this = this;
-        this.eventListener = {
-            mouseup(event) {
-                _this.clickEvent(event);
-                _this.hoverMove(event);
-            },
-            mousemove(event) {
-                _this.hoverMove(event);
-            },
-            mouseleave(event) {
-                _this.init();
-                document.getElementsByClassName('timeline_hoverPointer')[0].style.display = 'none';
-                document.getElementsByClassName('timeline_hoverTooltip')[0].style.display = 'none';
-            }
-        };
-        this.canvas.addEventListener('mousemove', this.eventListener.mousemove);
-        this.canvas.addEventListener('mouseup', this.eventListener.mouseup);
-        this.canvas.addEventListener('mouseleave', this.eventListener.mouseleave);
-    }
-
-    init() {
-        // 更新初始时间戳
-        this.refreshStartTimestamp();
-        // 清空画布
-        this.clearCanvas();
-        // 画刻度
-        this.drawScale();
-        // 画当前时间游标
-        this.option.currentTime && this.drawCursor(this.option.currentTime);
-        // 画warning事件
-        this.option.alarmData && this.drawAlarm(this.option);
-        // 画状态区间背景
-        this.drawRoundRect(20, this.canvas.height - 40, this.canvas.width - 40, 8, [4, 4, 4, 4]);
-        // 画状态区间
-        this.option.statusRangeData && this.drawStatusRange(this.option);
-    }
-
-    // 更新初始时间戳
-    refreshStartTimestamp() {
-        if (this.option.timeRange !== undefined) {
-            this.totalHours = (this.option.timeRange.endTime - this.option.timeRange.startTime) / (60 * 60 * 1000)
-        }
-        // 当currentTime改变或者整个时间轴的totalHours改变的时候 就刷新左边开始时间
-        this.startTimestamp = this.option.timeRange && this.option.timeRange.startTime || this.currentTime - (this.totalHours * 60 * 60 * 1000);
-    }
-
-    // 清空画布
-    clearCanvas() {
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    }
-
-    // 画刻度
-    drawScale() {
-        // px/分钟
-        let oneMinutePx = (this.canvas.width - 40) / (this.totalHours * 60);
-        // px/毫秒
-        let oneMSPx = oneMinutePx / (60 * 1000);
-        // 刻度间隔 默认20px
-        let scaleSpacing = this.minScaleSpacing;
-        // 每格代表多少分钟
-        let scaleUnit = scaleSpacing / oneMinutePx;
-
-        let len = this.minuteStep.length;
-        // 配置项刻度间隔
-        if (this.option.interval !== undefined) {
-            scaleUnit = this.option.interval;
-            scaleSpacing = oneMinutePx * scaleUnit;
-        }
-        // 自动根据画布长度选择合适的刻度间隔
-        else {
-            for (let i = 0; i < len; i++) {
-                if (scaleUnit < this.minuteStep[i]) {
-                    scaleUnit = this.minuteStep[i];
-                    scaleSpacing = oneMinutePx * scaleUnit;
-                    break;
-                }
-            }
-        }
-
-        // 大刻度相当于多少分钟
-        let mediumStep = 30;
-        if (this.option.mediumStep !== undefined) {
-            mediumStep = this.option.mediumStep;
-        }
-        else {
-            for (let i = 0; i < len; i++) {
-                if (this.minLargeScaleSpacing / oneMinutePx <= this.minuteStep[i]) {
-                    mediumStep = this.minuteStep[i];
-                    break;
-                }
-            }
-        }
-
-        let totalScales = (this.canvas.width - 40) / scaleSpacing;
-        // 某个刻度距离最左端的距离
-        let scaleLeft = 0;
-        // 某个刻度的时间
-        let scaleTime = this.startTimestamp;
-        let lineHeight;
-        let leftOffsetMs = scaleUnit * 60 * 1000 - (this.startTimestamp % (scaleUnit * 60 * 1000));
-        // 开始时间偏移距离(px)
-        let leftOffsetPx = leftOffsetMs * oneMSPx;
-        // 一刻度多少毫秒
-        let oneScalesMS = scaleSpacing / oneMSPx;
-        let scaleLineHeight = this.canvas.height - 30;
-
-        // 画刻度线和标签
-        for (let i = 0; i < totalScales + 1; i++) {
-            let date = new Date(scaleTime);
-            if ((scaleTime / (60 * 1000)) % mediumStep === 0) {
-                // 大格刻度标签长度
-                lineHeight = 6;
-                let scaleText = this.createScaleText(date);
-                this.ctx.font = 'normal 12px HarmonyOS_Sans';
-                // 文字颜色
-                this.ctx.fillStyle = this.labelColor;
-                this.ctx.fillText(scaleText, scaleLeft + 20 - this.ctx.measureText(scaleText).width / 2, this.canvas.height - 4);
-            } else {
-                // 小格刻度标签长度
-                lineHeight = 3;
-            }
-            this.ctx.beginPath();
-            this.ctx.moveTo(scaleLeft + 20, scaleLineHeight);
-            this.ctx.lineTo(scaleLeft + 20, scaleLineHeight + lineHeight);
-            this.ctx.closePath();
-            this.ctx.lineWidth = 1;
-            // 刻度线颜色
-            this.ctx.strokeStyle = this.axisLineColor;
-            this.ctx.stroke();
-            // 距离 = 开始偏移距离 + 格数 * 每格得px;
-            scaleLeft = leftOffsetPx + i * scaleSpacing;
-            // 时间 = 左侧开始时间 + 偏移时间 + 格数 * 一格多少毫秒
-            scaleTime = this.startTimestamp + leftOffsetMs + i * oneScalesMS;
-        }
-    }
-
-    // 画当前时间游标
-    drawCursor(currentTime) {
-        this.selectedPosition.push(this.getTimePos(currentTime), formatDate(currentTime, 'hh:mm'));
-        this.drawSelectedPointer(this.selectedPosition);
-    }
-
-    // 叠加warning事件圆点
-    drawAlarm(option) {
-        const alarmData = option.alarmData;
-        const background = option.customBackground;
-        for (let i = 0; i < alarmData.length; i++) {
-            let x = this.getTimePos(alarmData[i].time);
-            let type = alarmData[i].type;
-            this.ctx.beginPath();
-            this.ctx.arc(x, this.canvas.height - 60, 7, 0, 2 * Math.PI);
-            this.ctx.closePath();
-            this.ctx.fillStyle = background[type] || Token.config.colorState.colorNone;
-            this.ctx.fill();
-        }
-    }
-
-    // 叠加状态区间
-    drawStatusRange(option) {
-        const statusRangeData = option.statusRangeData;
-        const timeRange = option.timeRange;
-        const background = option.customBackground;
-        for (let i = 0; i < statusRangeData.length; i++) {
-            let startPosition = this.getTimePos(statusRangeData[i].time[0]);
-            let endPosition = this.getTimePos(statusRangeData[i].time[1]);
-            let type = statusRangeData[i].type;
-            this.ctx.beginPath();
-            if (statusRangeData[i].time[0] === timeRange.startTime && statusRangeData[i].time[1] === timeRange.endTime) {
-                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [4, 4, 4, 4])
-            } else if (statusRangeData[i].time[0] === timeRange.startTime) {
-                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [4, 0, 0, 4]);
-            } else if (statusRangeData[i].time[1] === timeRange.endTime) {
-                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [0, 4, 4, 0]);
-            } else {
-                this.ctx.rect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8);
-            }
-            this.ctx.closePath();
-            this.ctx.fillStyle = background[type] || Token.config.colorState.colorNone;
-            this.ctx.fill();
-        }
-    }
-
-    // 绘制状态区间背景的圆角矩形
-    drawRoundRect(x, y, width, height, radius) {
-        this.ctx.beginPath();
-        this.roundRect(x, y, width, height, radius);
-        this.ctx.closePath();
-        this.ctx.fillStyle = chartToken.roundRectBg;
-        this.ctx.fill();
-    }
-
-    roundRect(x, y, width, height, radiusArray) {
-        // 左上角
-        this.ctx.moveTo(x + radiusArray[0], y);
-        this.ctx.lineTo(x + width - radiusArray[1], y);
-        this.ctx.arcTo(x + width, y, x + width, y + radiusArray[1], radiusArray[1]);
-        // 右上角
-        this.ctx.lineTo(x + width, y + height - radiusArray[2]);
-        this.ctx.arcTo(x + width, y + height, x + width - radiusArray[2], y + height, radiusArray[2]);
-        // 右下角
-        this.ctx.lineTo(x + radiusArray[3], y + height);
-        this.ctx.arcTo(x, y + height, x, y + height - radiusArray[3], radiusArray[3]);
-        // 左下角
-        this.ctx.lineTo(x, y + radiusArray[0]);
-        this.ctx.arcTo(x, y, x + radiusArray[0], y, radiusArray[0]);
-    }
-
-    // 鼠标悬浮事件
-    hoverMove(event) {
-        const mouseX = this.getMouseXRelativePos(event);
-        const hoverPointer = document.getElementsByClassName('timeline_hoverPointer')[0];
-        const hoverTooltip = document.getElementsByClassName('timeline_hoverTooltip')[0];
-        const hoverTime = this.getMousePosTime(event);
-        if (mouseX > 0 && mouseX < this.canvas.width - 40) {
-            this.showElement(hoverPointer);
-            // 开启悬浮指针的时间悬浮框
-            if (this.option.timeTooltip === true) {
-                this.showElement(hoverTooltip);
-                hoverTooltip.innerHTML = `<p>${formatDate(hoverTime, 'yy-MM-dd hh:mm')}</p>`;
-                if (mouseX + 142 > this.canvas.width - 40) {
-                    hoverTooltip.style.left = mouseX - 1 + 20 - 142 + 'px';
-                }
-                else {
-                    hoverTooltip.style.left = mouseX - 1 + 30 + 'px';
-                }
-                hoverTooltip.style.top = this.canvas.height - 30 + 'px';
-            }
-            hoverPointer.style.left = mouseX - 1 + 20 + 'px';
-            hoverPointer.style.top = this.canvas.height - 30 + 'px';
-        } else {
-            this.hideElement(hoverPointer);
-            this.hideElement(hoverTooltip);
-        }
-        this.setAlarmTip(event, mouseX);
-    }
-
-    // 设置Alarm点的tip
-    setAlarmTip(event, mouseX) {
-        const mouseY = this.getMouseYRelativePos(event);
-        const alarmTooltip = document.getElementsByClassName('timeline_alarmTooltip')[0];
-        // 清除定时
-        alarmTooltip.addEventListener('mouseenter', (e) => {
-            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
-        });
-        // 移出悬浮框关闭
-        alarmTooltip.addEventListener('mouseleave', (e) => {
-            this.closeAlarmTip(alarmTooltip);
-        });
-        const alarmData = this.option.alarmData;
-        if (alarmData) {
-            this.processAlarmData(alarmData, mouseX, mouseY, alarmTooltip);
-        }
-    }
-
-    closeAlarmTip(alarmTooltip) {
-        // 增加延时
-        this.setTipTimeOut = setTimeout(() => {
-            this.hideElement(alarmTooltip);
-        }, 200);
-    }
-
-    processAlarmData(alarmData, mouseX, mouseY, alarmTooltip) {
-        for (const data of alarmData) {
-            const x = this.getTimePos(data.time);
-            if (this.isMouseInCircle(mouseX + 20, mouseY, x, this.canvas.height - 60)) {
-                if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
-                this.showElement(alarmTooltip);
-                this.option.onCircleHover(alarmTooltip, data);
-                if ((x - (alarmTooltip.offsetWidth) / 2) < 0) {
-                    alarmTooltip.style.left = '0px'
-                } else if ((x - (alarmTooltip.offsetWidth) / 2) > (this.canvas.width - alarmTooltip.offsetWidth - 40)) {
-                    alarmTooltip.style.left = this.canvas.width - (alarmTooltip.offsetWidth) + 'px'
-                } else {
-                    alarmTooltip.style.left = x - (alarmTooltip.offsetWidth / 2) + 'px';
-                }
-                alarmTooltip.style.top = this.canvas.height - 80 - (alarmTooltip.clientHeight) + 'px';
-                return;
-            }
-            // 移出圆点清除悬浮框
-            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
-            this.closeAlarmTip(alarmTooltip);
-        }
-    }
-
-    // 判断鼠标是否在圆点内
-    isMouseInCircle(mouseX, mouseY, x, y) {
-        let distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2);
-        return distance <= 8;
-    }
-
-    // 鼠标点击事件
-    clickEvent(event) {
-        // 进入选中状态
-        this.isSelected = true;
-        const mouseX = this.getMouseXRelativePos(event);
-        const time = this.getMousePosTime(event);
-        // 选中时间
-        const seletedTime = time.getTime();
-        // 当前北京时间
-        const currentTime = new Date().getTime();
-        // 选中时间小于当前时间以及大于开始时间，不可选中未来时间
-        if (seletedTime <= currentTime && seletedTime >= this.option.timeRange.startTime ) {
-            this.option.onClick && this.option.onClick(time.getTime());
-            // 如果有点击时间，将时间赋值给配置项的当前时间
-            // this.option.currentTime = time;
-            this.selectedPosition.splice(0, this.selectedPosition.length);
-            this.selectedPosition.push(mouseX + 20, formatDate(time, 'hh:mm'));
-            const selectedPointer = document.getElementsByClassName('timeline_selectedPointer')[0];
-            const selectedTooltip = document.getElementsByClassName('timeline_selectedTooltip')[0];
-            const selectedCircle = document.getElementsByClassName('timeline_selectedCircle')[0];
-            if (mouseX > 0 && mouseX < (this.canvas.width - 40)) {
-                this.drawSelectedPointer(this.selectedPosition);
-            } else {
-                this.hideElement(selectedPointer);
-                this.hideElement(selectedTooltip);
-                this.hideElement(selectedCircle);
-            }
-        }
-    }
-
-    // 画选中状态的游标
-    drawSelectedPointer(selectedPosition) {
-
-        const selectedPointer = document.getElementsByClassName('timeline_selectedPointer')[0];
-        const selectedTooltip = document.getElementsByClassName('timeline_selectedTooltip')[0];
-        const selectedCircle = document.getElementsByClassName('timeline_selectedCircle')[0];
-
-        selectedPointer.style.left = selectedPosition[0] - 1 + 'px';
-        selectedPointer.style.top = this.canvas.height - 42 + 'px';
-        this.showElement(selectedPointer);
-
-        selectedTooltip.innerHTML = `<p>${defendXSS(selectedPosition[1])}</p>`;
-        selectedTooltip.style.left = selectedPosition[0] - 20 + 'px';
-        selectedTooltip.style.top = this.canvas.height - 16 + 'px';
-        this.showElement(selectedTooltip);
-
-        selectedCircle.style.left = selectedPosition[0] - 4 + 'px';
-        selectedCircle.style.top = this.canvas.height - 50 + 'px';
-        this.showElement(selectedCircle);
-    }
-
-    // 设置长短刻度标签文字
-    createScaleText(time) {
-        if (time.getTime() === this.option.timeRange.startTime) {
-            return formatDate(time, '00:00');
-        } else if (time.getTime() === this.option.timeRange.endTime && (this.option.timeRange.endTime - this.option.timeRange.startTime) % (24 * 60 * 60 * 1000) === 0) {
-            return formatDate(time, '24:00');
-        }
-        return formatDate(time, 'hh:mm');
-    }
-
-    // 获取鼠标相对于canvas元素左侧20px的相对位置
-    getMouseXRelativePos(event) {
-        let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
-        let x = event.pageX || event.clientX + scrollX;
-        // canvas元素距离窗口左侧距离
-        let baseLeft = this.canvas.getBoundingClientRect().x;
-        return x - baseLeft - 20;
-    }
-
-    // 获取鼠标相对于canvas元素上侧的相对位置
-    getMouseYRelativePos(event) {
-        let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
-        let y = event.pageY || event.clientY + scrollY;
-        // canvas元素距离窗口左侧距离
-        let baseTop = this.canvas.getBoundingClientRect().y;
-        return y - baseTop;
-    }
-
-    // 根据画布的宽度和时间计算出鼠标所在的时间点
-    getMousePosTime(event) {
-        let posX = this.getMouseXRelativePos(event);
-        // 每毫秒多少像素
-        let onePxsMS = (this.canvas.width - 40) / (this.totalHours * 60 * 60 * 1000);
-        let time = new Date(this.startTimestamp + posX / onePxsMS);
-        return time;
-    }
-
-    // 根据时间点计算所在点距离canvas左侧20px的相对位置
-    getTimePos(time) {
-        // 每毫秒多少像素
-        let onePxsMS = (this.canvas.width - 40) / (this.totalHours * 60 * 60 * 1000);
-        let posX = (time - this.startTimestamp) * onePxsMS + 20;
-        return posX;
-    }
-
-    // 显示元素
-    showElement = (element) => {
-        element.style.display = 'block';
-    };
-
-    hideElement = (element) => {
-        element.style.display = 'none';
-    };
-
-    // 设置当前时间
-    setCurrentTime(time) {
-        let newTime;
-        if (typeof time === 'string') {
-            newTime = new Date(time).getTime();
-        } else if (typeof time === 'object') {
-            newTime = time.getTime && time.getTime();
-        } else if (typeof time === 'number') {
-            newTime = time;
-        }
-        this.currentTime = newTime;
-        this.init();
-    }
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { formatDate } from '../../util/convert';
+import defendXSS from '../../util/defendXSS';
+import Token from '../../feature/token';
+import chartToken from './chartToken';
+
+export default class TimeLine {
+    constructor(
+        canvasId,
+        currentTime,
+        option
+    ) {
+        this.canvas = document.getElementById(canvasId);
+        this.ctx = this.canvas.getContext('2d');
+
+        // 获取配置项
+        this.option = option;
+        // 当前时间
+        this.currentTime = currentTime;
+        // 自定义时间轴的背景色
+        this.canvas.style.background = this.option.background || 'transparent';
+        // 自定义时间轴刻度线的颜色
+        this.axisLineColor = (this.option.axisLineStyle && this.option.axisLineStyle.color) || Token.config.xAxisTickLineColor;
+        // 自定义时间轴文本颜色
+        this.labelColor = (this.option.labelStyle && this.option.labelStyle.color) || Token.config.xAxisLabelColor;
+        // 整个时间轴的时间
+        this.totalHours = null;
+        // 刻度间隔(分钟)
+        this.minuteStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
+        // 最小刻度间距20px
+        this.minScaleSpacing = 20;
+        // 允许的最小大格长度px值 如果调小 大格会变密集
+        this.minLargeScaleSpacing = 80;
+        // 缩放层级
+        this.zoom = 24;
+        // 鼠标选中位置
+        this.selectedPosition = [];
+        // 弹窗定时器
+        this.setTipTimeOut = null;
+        // 初始化时间轴
+        this.init();
+
+        const _this = this;
+        this.eventListener = {
+            mouseup(event) {
+                _this.clickEvent(event);
+                _this.hoverMove(event);
+            },
+            mousemove(event) {
+                _this.hoverMove(event);
+            },
+            mouseleave(event) {
+                _this.init();
+                document.getElementsByClassName('timeline_hoverPointer')[0].style.display = 'none';
+                document.getElementsByClassName('timeline_hoverTooltip')[0].style.display = 'none';
+            }
+        };
+        this.canvas.addEventListener('mousemove', this.eventListener.mousemove);
+        this.canvas.addEventListener('mouseup', this.eventListener.mouseup);
+        this.canvas.addEventListener('mouseleave', this.eventListener.mouseleave);
+    }
+
+    init() {
+        // 更新初始时间戳
+        this.refreshStartTimestamp();
+        // 清空画布
+        this.clearCanvas();
+        // 画刻度
+        this.drawScale();
+        // 画当前时间游标
+        this.option.currentTime && this.drawCursor(this.option.currentTime);
+        // 画warning事件
+        this.option.alarmData && this.drawAlarm(this.option);
+        // 画状态区间背景
+        this.drawRoundRect(20, this.canvas.height - 40, this.canvas.width - 40, 8, [4, 4, 4, 4]);
+        // 画状态区间
+        this.option.statusRangeData && this.drawStatusRange(this.option);
+    }
+
+    // 更新初始时间戳
+    refreshStartTimestamp() {
+        if (this.option.timeRange !== undefined) {
+            this.totalHours = (this.option.timeRange.endTime - this.option.timeRange.startTime) / (60 * 60 * 1000)
+        }
+        // 当currentTime改变或者整个时间轴的totalHours改变的时候 就刷新左边开始时间
+        this.startTimestamp = this.option.timeRange && this.option.timeRange.startTime || this.currentTime - (this.totalHours * 60 * 60 * 1000);
+    }
+
+    // 清空画布
+    clearCanvas() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    // 画刻度
+    drawScale() {
+        // px/分钟
+        let oneMinutePx = (this.canvas.width - 40) / (this.totalHours * 60);
+        // px/毫秒
+        let oneMSPx = oneMinutePx / (60 * 1000);
+        // 刻度间隔 默认20px
+        let scaleSpacing = this.minScaleSpacing;
+        // 每格代表多少分钟
+        let scaleUnit = scaleSpacing / oneMinutePx;
+
+        let len = this.minuteStep.length;
+        // 配置项刻度间隔
+        if (this.option.interval !== undefined) {
+            scaleUnit = this.option.interval;
+            scaleSpacing = oneMinutePx * scaleUnit;
+        }
+        // 自动根据画布长度选择合适的刻度间隔
+        else {
+            for (let i = 0; i < len; i++) {
+                if (scaleUnit < this.minuteStep[i]) {
+                    scaleUnit = this.minuteStep[i];
+                    scaleSpacing = oneMinutePx * scaleUnit;
+                    break;
+                }
+            }
+        }
+
+        // 大刻度相当于多少分钟
+        let mediumStep = 30;
+        if (this.option.mediumStep !== undefined) {
+            mediumStep = this.option.mediumStep;
+        }
+        else {
+            for (let i = 0; i < len; i++) {
+                if (this.minLargeScaleSpacing / oneMinutePx <= this.minuteStep[i]) {
+                    mediumStep = this.minuteStep[i];
+                    break;
+                }
+            }
+        }
+
+        let totalScales = (this.canvas.width - 40) / scaleSpacing;
+        // 某个刻度距离最左端的距离
+        let scaleLeft = 0;
+        // 某个刻度的时间
+        let scaleTime = this.startTimestamp;
+        let lineHeight;
+        let leftOffsetMs = scaleUnit * 60 * 1000 - (this.startTimestamp % (scaleUnit * 60 * 1000));
+        // 开始时间偏移距离(px)
+        let leftOffsetPx = leftOffsetMs * oneMSPx;
+        // 一刻度多少毫秒
+        let oneScalesMS = scaleSpacing / oneMSPx;
+        let scaleLineHeight = this.canvas.height - 30;
+
+        // 画刻度线和标签
+        for (let i = 0; i < totalScales + 1; i++) {
+            let date = new Date(scaleTime);
+            if ((scaleTime / (60 * 1000)) % mediumStep === 0) {
+                // 大格刻度标签长度
+                lineHeight = 6;
+                let scaleText = this.createScaleText(date);
+                this.ctx.font = 'normal 12px HarmonyOS_Sans';
+                // 文字颜色
+                this.ctx.fillStyle = this.labelColor;
+                this.ctx.fillText(scaleText, scaleLeft + 20 - this.ctx.measureText(scaleText).width / 2, this.canvas.height - 4);
+            } else {
+                // 小格刻度标签长度
+                lineHeight = 3;
+            }
+            this.ctx.beginPath();
+            this.ctx.moveTo(scaleLeft + 20, scaleLineHeight);
+            this.ctx.lineTo(scaleLeft + 20, scaleLineHeight + lineHeight);
+            this.ctx.closePath();
+            this.ctx.lineWidth = 1;
+            // 刻度线颜色
+            this.ctx.strokeStyle = this.axisLineColor;
+            this.ctx.stroke();
+            // 距离 = 开始偏移距离 + 格数 * 每格得px;
+            scaleLeft = leftOffsetPx + i * scaleSpacing;
+            // 时间 = 左侧开始时间 + 偏移时间 + 格数 * 一格多少毫秒
+            scaleTime = this.startTimestamp + leftOffsetMs + i * oneScalesMS;
+        }
+    }
+
+    // 画当前时间游标
+    drawCursor(currentTime) {
+        this.selectedPosition.push(this.getTimePos(currentTime), formatDate(currentTime, 'hh:mm'));
+        this.drawSelectedPointer(this.selectedPosition);
+    }
+
+    // 叠加warning事件圆点
+    drawAlarm(option) {
+        const alarmData = option.alarmData;
+        const background = option.customBackground;
+        for (let i = 0; i < alarmData.length; i++) {
+            let x = this.getTimePos(alarmData[i].time);
+            let type = alarmData[i].type;
+            this.ctx.beginPath();
+            this.ctx.arc(x, this.canvas.height - 60, 7, 0, 2 * Math.PI);
+            this.ctx.closePath();
+            this.ctx.fillStyle = background[type] || Token.config.colorState.colorNone;
+            this.ctx.fill();
+        }
+    }
+
+    // 叠加状态区间
+    drawStatusRange(option) {
+        const statusRangeData = option.statusRangeData;
+        const timeRange = option.timeRange;
+        const background = option.customBackground;
+        for (let i = 0; i < statusRangeData.length; i++) {
+            let startPosition = this.getTimePos(statusRangeData[i].time[0]);
+            let endPosition = this.getTimePos(statusRangeData[i].time[1]);
+            let type = statusRangeData[i].type;
+            this.ctx.beginPath();
+            if (statusRangeData[i].time[0] === timeRange.startTime && statusRangeData[i].time[1] === timeRange.endTime) {
+                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [4, 4, 4, 4])
+            } else if (statusRangeData[i].time[0] === timeRange.startTime) {
+                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [4, 0, 0, 4]);
+            } else if (statusRangeData[i].time[1] === timeRange.endTime) {
+                this.roundRect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8, [0, 4, 4, 0]);
+            } else {
+                this.ctx.rect(startPosition, this.canvas.height - 40, endPosition - startPosition, 8);
+            }
+            this.ctx.closePath();
+            this.ctx.fillStyle = background[type] || Token.config.colorState.colorNone;
+            this.ctx.fill();
+        }
+    }
+
+    // 绘制状态区间背景的圆角矩形
+    drawRoundRect(x, y, width, height, radius) {
+        this.ctx.beginPath();
+        this.roundRect(x, y, width, height, radius);
+        this.ctx.closePath();
+        this.ctx.fillStyle = chartToken.roundRectBg;
+        this.ctx.fill();
+    }
+
+    roundRect(x, y, width, height, radiusArray) {
+        // 左上角
+        this.ctx.moveTo(x + radiusArray[0], y);
+        this.ctx.lineTo(x + width - radiusArray[1], y);
+        this.ctx.arcTo(x + width, y, x + width, y + radiusArray[1], radiusArray[1]);
+        // 右上角
+        this.ctx.lineTo(x + width, y + height - radiusArray[2]);
+        this.ctx.arcTo(x + width, y + height, x + width - radiusArray[2], y + height, radiusArray[2]);
+        // 右下角
+        this.ctx.lineTo(x + radiusArray[3], y + height);
+        this.ctx.arcTo(x, y + height, x, y + height - radiusArray[3], radiusArray[3]);
+        // 左下角
+        this.ctx.lineTo(x, y + radiusArray[0]);
+        this.ctx.arcTo(x, y, x + radiusArray[0], y, radiusArray[0]);
+    }
+
+    // 鼠标悬浮事件
+    hoverMove(event) {
+        const mouseX = this.getMouseXRelativePos(event);
+        const hoverPointer = document.getElementsByClassName('timeline_hoverPointer')[0];
+        const hoverTooltip = document.getElementsByClassName('timeline_hoverTooltip')[0];
+        const hoverTime = this.getMousePosTime(event);
+        if (mouseX > 0 && mouseX < this.canvas.width - 40) {
+            this.showElement(hoverPointer);
+            // 开启悬浮指针的时间悬浮框
+            if (this.option.timeTooltip === true) {
+                this.showElement(hoverTooltip);
+                hoverTooltip.innerHTML = `<p>${formatDate(hoverTime, 'yy-MM-dd hh:mm')}</p>`;
+                if (mouseX + 142 > this.canvas.width - 40) {
+                    hoverTooltip.style.left = mouseX - 1 + 20 - 142 + 'px';
+                }
+                else {
+                    hoverTooltip.style.left = mouseX - 1 + 30 + 'px';
+                }
+                hoverTooltip.style.top = this.canvas.height - 30 + 'px';
+            }
+            hoverPointer.style.left = mouseX - 1 + 20 + 'px';
+            hoverPointer.style.top = this.canvas.height - 30 + 'px';
+        } else {
+            this.hideElement(hoverPointer);
+            this.hideElement(hoverTooltip);
+        }
+        this.setAlarmTip(event, mouseX);
+    }
+
+    // 设置Alarm点的tip
+    setAlarmTip(event, mouseX) {
+        const mouseY = this.getMouseYRelativePos(event);
+        const alarmTooltip = document.getElementsByClassName('timeline_alarmTooltip')[0];
+        // 清除定时
+        alarmTooltip.addEventListener('mouseenter', (e) => {
+            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
+        });
+        // 移出悬浮框关闭
+        alarmTooltip.addEventListener('mouseleave', (e) => {
+            this.closeAlarmTip(alarmTooltip);
+        });
+        const alarmData = this.option.alarmData;
+        if (alarmData) {
+            this.processAlarmData(alarmData, mouseX, mouseY, alarmTooltip);
+        }
+    }
+
+    closeAlarmTip(alarmTooltip) {
+        // 增加延时
+        this.setTipTimeOut = setTimeout(() => {
+            this.hideElement(alarmTooltip);
+        }, 200);
+    }
+
+    processAlarmData(alarmData, mouseX, mouseY, alarmTooltip) {
+        for (const data of alarmData) {
+            const x = this.getTimePos(data.time);
+            if (this.isMouseInCircle(mouseX + 20, mouseY, x, this.canvas.height - 60)) {
+                if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
+                this.showElement(alarmTooltip);
+                this.option.onCircleHover(alarmTooltip, data);
+                if ((x - (alarmTooltip.offsetWidth) / 2) < 0) {
+                    alarmTooltip.style.left = '0px'
+                } else if ((x - (alarmTooltip.offsetWidth) / 2) > (this.canvas.width - alarmTooltip.offsetWidth - 40)) {
+                    alarmTooltip.style.left = this.canvas.width - (alarmTooltip.offsetWidth) + 'px'
+                } else {
+                    alarmTooltip.style.left = x - (alarmTooltip.offsetWidth / 2) + 'px';
+                }
+                alarmTooltip.style.top = this.canvas.height - 80 - (alarmTooltip.clientHeight) + 'px';
+                return;
+            }
+            // 移出圆点清除悬浮框
+            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
+            this.closeAlarmTip(alarmTooltip);
+        }
+    }
+
+    // 判断鼠标是否在圆点内
+    isMouseInCircle(mouseX, mouseY, x, y) {
+        let distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2);
+        return distance <= 8;
+    }
+
+    // 鼠标点击事件
+    clickEvent(event) {
+        // 进入选中状态
+        this.isSelected = true;
+        const mouseX = this.getMouseXRelativePos(event);
+        const time = this.getMousePosTime(event);
+        // 选中时间
+        const seletedTime = time.getTime();
+        // 当前北京时间
+        const currentTime = new Date().getTime();
+        // 选中时间小于当前时间以及大于开始时间，不可选中未来时间
+        if (seletedTime <= currentTime && seletedTime >= this.option.timeRange.startTime ) {
+            this.option.onClick && this.option.onClick(time.getTime());
+            // 如果有点击时间，将时间赋值给配置项的当前时间
+            // this.option.currentTime = time;
+            this.selectedPosition.splice(0, this.selectedPosition.length);
+            this.selectedPosition.push(mouseX + 20, formatDate(time, 'hh:mm'));
+            const selectedPointer = document.getElementsByClassName('timeline_selectedPointer')[0];
+            const selectedTooltip = document.getElementsByClassName('timeline_selectedTooltip')[0];
+            const selectedCircle = document.getElementsByClassName('timeline_selectedCircle')[0];
+            if (mouseX > 0 && mouseX < (this.canvas.width - 40)) {
+                this.drawSelectedPointer(this.selectedPosition);
+            } else {
+                this.hideElement(selectedPointer);
+                this.hideElement(selectedTooltip);
+                this.hideElement(selectedCircle);
+            }
+        }
+    }
+
+    // 画选中状态的游标
+    drawSelectedPointer(selectedPosition) {
+
+        const selectedPointer = document.getElementsByClassName('timeline_selectedPointer')[0];
+        const selectedTooltip = document.getElementsByClassName('timeline_selectedTooltip')[0];
+        const selectedCircle = document.getElementsByClassName('timeline_selectedCircle')[0];
+
+        selectedPointer.style.left = selectedPosition[0] - 1 + 'px';
+        selectedPointer.style.top = this.canvas.height - 42 + 'px';
+        this.showElement(selectedPointer);
+
+        selectedTooltip.innerHTML = `<p>${defendXSS(selectedPosition[1])}</p>`;
+        selectedTooltip.style.left = selectedPosition[0] - 20 + 'px';
+        selectedTooltip.style.top = this.canvas.height - 16 + 'px';
+        this.showElement(selectedTooltip);
+
+        selectedCircle.style.left = selectedPosition[0] - 4 + 'px';
+        selectedCircle.style.top = this.canvas.height - 50 + 'px';
+        this.showElement(selectedCircle);
+    }
+
+    // 设置长短刻度标签文字
+    createScaleText(time) {
+        if (time.getTime() === this.option.timeRange.startTime) {
+            return formatDate(time, '00:00');
+        } else if (time.getTime() === this.option.timeRange.endTime && (this.option.timeRange.endTime - this.option.timeRange.startTime) % (24 * 60 * 60 * 1000) === 0) {
+            return formatDate(time, '24:00');
+        }
+        return formatDate(time, 'hh:mm');
+    }
+
+    // 获取鼠标相对于canvas元素左侧20px的相对位置
+    getMouseXRelativePos(event) {
+        let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+        let x = event.pageX || event.clientX + scrollX;
+        // canvas元素距离窗口左侧距离
+        let baseLeft = this.canvas.getBoundingClientRect().x;
+        return x - baseLeft - 20;
+    }
+
+    // 获取鼠标相对于canvas元素上侧的相对位置
+    getMouseYRelativePos(event) {
+        let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+        let y = event.pageY || event.clientY + scrollY;
+        // canvas元素距离窗口左侧距离
+        let baseTop = this.canvas.getBoundingClientRect().y;
+        return y - baseTop;
+    }
+
+    // 根据画布的宽度和时间计算出鼠标所在的时间点
+    getMousePosTime(event) {
+        let posX = this.getMouseXRelativePos(event);
+        // 每毫秒多少像素
+        let onePxsMS = (this.canvas.width - 40) / (this.totalHours * 60 * 60 * 1000);
+        let time = new Date(this.startTimestamp + posX / onePxsMS);
+        return time;
+    }
+
+    // 根据时间点计算所在点距离canvas左侧20px的相对位置
+    getTimePos(time) {
+        // 每毫秒多少像素
+        let onePxsMS = (this.canvas.width - 40) / (this.totalHours * 60 * 60 * 1000);
+        let posX = (time - this.startTimestamp) * onePxsMS + 20;
+        return posX;
+    }
+
+    // 显示元素
+    showElement = (element) => {
+        element.style.display = 'block';
+    };
+
+    hideElement = (element) => {
+        element.style.display = 'none';
+    };
+
+    // 设置当前时间
+    setCurrentTime(time) {
+        let newTime;
+        if (typeof time === 'string') {
+            newTime = new Date(time).getTime();
+        } else if (typeof time === 'object') {
+            newTime = time.getTime && time.getTime();
+        } else if (typeof time === 'number') {
+            newTime = time;
+        }
+        this.currentTime = newTime;
+        this.init();
+    }
 };