更新记录

1.3.0（2024-06-18）下载此版本

修复fastmock平台停运导致无法演示数据

1.2.3（2023-07-24）下载此版本

修复微信小程序无法显示的问题

1.2.2（2023-04-11）下载此版本

1.2.2（2023-04-11）

优化：

演示项目 -by LOVEtwelve

平台兼容性

HbuilderX/cli最低兼容版本
3.1.0

uni-app

Vue2	Vue3
√	?

app-vue	app-nvue	app-android	app-ios	app-harmony
?	?	?	?	?

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
?	?	?	?	?	?	?	?	?

微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	钉钉小程序	快手小程序	飞书小程序	京东小程序
?	?	?	?	?	?	?	?	?

快应用-华为	快应用-联盟
?	?

uni-app x

app-android	app-ios
?	?

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
?	?	?	?	?	?	?	?	?

Lt-sleepCharts 使用说明

〇、简介

这是一个绘制睡眠分布的图标插件，支持通过点击显示区域所对应的信息，希望可以帮助到你更快的完成开发

一、使用说明

右侧点击使用 HBuilderX 导入插件
引用组件

<Lt-sleepCharts :sleepValue="sleepValue" @handleItem="handleItem"></Lt-sleepCharts>


```javascript
data() {
    return {
        sleepValue: [],
    }
},

Demo体验地址：http://lovetwelve.fun/sleepCharts/index.html（请用手机访问，或用桌面浏览器启动手机调试模式）
如果这个插件帮到了您的项目，请麻烦来给个评分谢谢。提出宝贵的意见当然更好！

二、API

Props

参数名	类型	默认值	说明	必填
sleepValue	Array	`[]`	实例见下方demo的api	否
setStyle	Object	`{marginLeft: "5%" ,width: "90%"}` \| 填写`marginLeft`和`width`	否
type	Number	`1`	见第四部分type类型	否
color	Array	`["#ffffff", "#33C7F7", "#32cd99", "#3E4CA8", "#F0AD4E", "#4CD964", "#999999", "#ff0000"]`	每个类型的颜色	否

Events

事件名称	说明	返回值
handleItem	点击图表中某一个区域触发事件	e={startTime,endTime,sleepState,sleepStateText}，startTime（开始时间），endTime（结束时间），sleepState（数据类型），sleepStateText（数据类型文字内容）

Methods

方法通过 ref 调用

方法名称	说明
-	-

三、其他说明

测试数据方法

[{
        "startTime": 1604172565,
        "endTime": 1604173585,
        "sleepState": 1,
        "deviceNo": "641938001790"
    },
    // ......
]

新增睡眠类型
新增图表样式

详细请见源码中的注释

四、type配置项

参数值	说明
1	默认样式，每个数据柱从最底部出发
2	悬浮样式，各个数据类型的起始高度不同

五、示例

<template>
    <div>
        <Lt-sleepCharts :sleepValue="sleepValue" @handleItem="handleItem"></Lt-sleepCharts>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sleepValue: [],
            }
        },
        onLoad() {
            this.getData()
        },
        methods: {
            getData() {
    this.sleepValue = [{
        "startTime": 1604172565,
        "endTime": 1604173585,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604173585,
        "endTime": 1604173645,
        "sleepState": 3,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604173645,
        "endTime": 1604173945,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604173945,
        "endTime": 1604175265,
        "sleepState": 3,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604175265,
        "endTime": 1604175985,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604175985,
        "endTime": 1604176345,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604176345,
        "endTime": 1604177485,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604176753,
        "endTime": 1604176778,
        "sleepState": 16,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604177485,
        "endTime": 1604178025,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604178025,
        "endTime": 1604178205,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604178205,
        "endTime": 1604178385,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604178385,
        "endTime": 1604178445,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604178445,
        "endTime": 1604179645,
        "sleepState": 3,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604178812,
        "endTime": 1604178892,
        "sleepState": 16,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604178932,
        "endTime": 1604178972,
        "sleepState": 16,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604179645,
        "endTime": 1604179765,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604179765,
        "endTime": 1604179885,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604179885,
        "endTime": 1604180065,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604180065,
        "endTime": 1604181085,
        "sleepState": 3,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604181085,
        "endTime": 1604181325,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604181325,
        "endTime": 1604182165,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604182165,
        "endTime": 1604184205,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604184205,
        "endTime": 1604184325,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604184325,
        "endTime": 1604185225,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604185225,
        "endTime": 1604186305,
        "sleepState": 3,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604186305,
        "endTime": 1604186605,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604186605,
        "endTime": 1604186725,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604186725,
        "endTime": 1604187325,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604187325,
        "endTime": 1604187385,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604187385,
        "endTime": 1604187925,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604187925,
        "endTime": 1604188585,
        "sleepState": 2,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604188585,
        "endTime": 1604189905,
        "sleepState": 1,
        "deviceNo": "641938001790"
    }, {
        "startTime": 1604190254,
        "endTime": 1604190276,
        "sleepState": 16,
        "deviceNo": "641938001790"
    }]
},
handleItem(e) {
                console.log("点击的数据为：",e)
            }
        }
    }
</script>

<style></style>

【Lt-sleepCharts】睡眠分布图表 Lt-sleepCharts canvas ucharts echarts

更新记录

1.3.0（2024-06-18）下载此版本

1.2.3（2023-07-24）下载此版本

1.2.2（2023-04-11）下载此版本

1.2.2（2023-04-11）

优化：

平台兼容性

uni-app

uni-app x

Lt-sleepCharts 使用说明

〇、简介

一、使用说明

二、API

三、其他说明

四、type配置项

五、示例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

【Lt-sleepCharts】睡眠分布图表

Lt-ECG - 多导心电图

yt-Windows

yt-ECG

【Lt-sleepCharts】 睡眠分布图表 Lt-sleepCharts canvas ucharts echarts

更新记录

1.3.0（2024-06-18） 下载此版本

1.2.3（2023-07-24） 下载此版本

1.2.2（2023-04-11） 下载此版本

1.2.2（2023-04-11）

优化：

平台兼容性

uni-app

uni-app x

Lt-sleepCharts 使用说明

〇、简介

一、使用说明

二、API

三、其他说明

四、type配置项

五、示例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

【Lt-sleepCharts】 睡眠分布图表

Lt-ECG - 多导心电图

yt-Windows

yt-ECG

Modal title

【Lt-sleepCharts】睡眠分布图表 Lt-sleepCharts canvas ucharts echarts

1.3.0（2024-06-18）下载此版本

1.2.3（2023-07-24）下载此版本

1.2.2（2023-04-11）下载此版本

【Lt-sleepCharts】睡眠分布图表