更新记录

1.2.3（2023-07-24）

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

1.2.2（2023-04-11）

1.2.2（2023-04-11）

优化：

• 演示项目 -by LOVEtwelve

1.2.1（2023-03-06）

• 更新在线体验网址

平台兼容性

Lt-sleepCharts 使用说明

〇、简介

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

一、使用说明

• 右侧点击使用 HBuilderX 导入插件

• 引用组件

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

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

• Demo体验地址 ：http://lovetwelve.fun/sleepCharts/index.html（请用手机访问，或用桌面浏览器启动手机调试模式）

• 如果这个插件帮到了您的项目，请麻烦来给个评分谢谢。提出宝贵的意见当然更好！

二、API

• Props

• Events

• Methods

方法通过 ref 调用

三、其他说明

• 测试数据方法

uni.request({ // 仅为示例
    url: 'https://www.fastmock.site/mock/795a674f2fae747b20f110e572ccc16a/sleepValue/demo-1',
    success: (res) => {
        if (res.data.state === 200) {
            this.sleepValue = res.data.data;
        }
    }
});

• 新增睡眠类型

• 新增图表样式

详细请见源码中的注释

四、type配置项

五、示例

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

<script>
    export default {
        data() {
            return {
                sleepValue: [],
            }
        },
        onLoad() {
            this.getData()
        },
        methods: {
            getData() {
                uni.request({
                    url: 'https://www.fastmock.site/mock/795a674f2fae747b20f110e572ccc16a/sleepValue/demo-1', //仅为示例
                    success: (res) => {
                        if (res.data.state === 200) {
                            this.sleepValue = res.data.data;
                        }
                    }
                });
            },
            handleItem(e) {
                console.log("点击的数据为：",e)
            }
        }
    }
</script>

<style></style>