HarmonyOS NEXT应用开发实战-物联网应用之开发篇

物联网应用主要是利用物联网智能电闸实现对用电的智能化控制，实时监控预警，可以实时看到使用情况，用到的相关技术和解决方案，希望能帮到大家。

qq_41270181

363人浏览 · 2025-05-15 14:59:16

qq_41270181 · 2025-05-15 14:59:16 发布

0900086000300134184.20201216095126.86523331460016843504112994983392.png

物联网应用主要是利用物联网智能电闸实现对用电的智能化控制，可以实时看到使用情况

一、主要功能

1. 用户可以对能耗今日实时，明日后日等进行监控，还有数据可视化实时生成今日或者本月实时的能耗表现情况。

0900086000300134184.20201216095126.86523331460016843504112994983392.png

2. 用户可以对设备进行一个监控，并进入详情看到电压和回路详情等信息并进行操作

0900086000300134184.20201216095126.86523331460016843504112994983392.png

3. 用户可以对设备进行一个监控，并进行报警

二、所用技术和API

- lottie动画：动画图标。

- list：实现列表和滚动

- tabs：菜单栏，实现多端布局，支持手机、平板和折叠屏

- Search组件：实现搜索。

- CustomDialog组件：实现选择窗口弹窗。

- TextInput组件：用于文本输入。

- echarts结合web组件的封装使用

- router路由跳转

- 首选项：首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询,删除等操作。

- 实现下拉刷新,上拉加载分页组件

三、相关技术难点和解决方案

echarts在鸿蒙next中的渲染，和字体大小的适配，多端布局的适配

0900086000300134184.20201216095126.86523331460016843504112994983392.png

解决方案

字体调节问题

检查配置项：确保textStyle中的fontSize已正确设置，且值符合需求。
避免样式冲突：检查并调整CSS样式，确保没有样式覆盖ECharts内部的字体样式。
动态数据绑定：如果字体大小依赖于动态数据，确保数据在ECharts渲染前已正确赋值

引入html文件渲染web做echarts

示例代码：

        Column() {
        // 图表
          Web({ src: $rawfile('index.html'), controller: this.controller }))
        }
        .width("100%")
        .height(px2vp(800))

index.html为项目下\entry\src\main\resources\rawfile\index.html 以下是html.index的内容:

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts图</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="margin: 0;background: #ebe7e7;">
<div>
    <div id="echart-main" style="height: 600px;border-radius: 20px;background: #fff;"></div>
    <div id="myButton" style="font-size: 30px"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
<script>eruda.init()</script>
<script type="text/javascript">
   window.onload = () => {
        // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('echart-main'));

       // 指定图表的配置项和数据
       var option = {
               title: {
                   text: '今日能耗（单位：KW·h）',
                   show: false,
                   left: 'center',
                   textStyle: {
                       fontSize: 28 // 设置标题字体大小
                   }
               },
               tooltip: {
                   trigger: 'axis'
               },
               grid: {
                    left: "55",
                    containLabel: true
                },
                // 添加 dataZoom 组件
<!--                dataZoom: [-->
<!--                    {-->
<!--                        type: 'slider', // 类型为滑块-->
<!--                        show: false,-->
<!--                        xAxisIndex: [0], // 控制 X 轴，如果有多个 X 轴，可以用数组指定-->
<!--                        // start: 10, // 数据窗口的起始百分比，表示 10% 的数据可见-->
<!--                        // end: 90 // 数据窗口的结束百分比，表示 90% 的数据可见-->
<!--                    },-->
<!--                    {-->
<!--                        type: 'inside', // 类型为内置型，即显示在图表内部-->
<!--                        xAxisIndex: [0],-->
<!--                        start: 10,-->
<!--                        end: 90-->
<!--                    }-->
<!--                ],-->
               xAxis: {
                   type: 'time',
                   boundaryGap: false,
                   axisLabel: {
                       fontSize: 28, // 设置X轴字体大小
                       formatter: function (value) {
                           // value 是时间戳或日期对象
                           var date = new Date(value);
                           var hours = date.getHours().toString().padStart(2, '0');
                           var minutes = date.getMinutes().toString().padStart(2, '0');
                           return hours + ':' + minutes;
                       }
                   }
               },
               yAxis: {
                   type: 'value',
                   axisLabel: {
                       fontSize: 28, // 设置Y轴字体大小
                       padding: [30, 20, 0, 0], // 第二个值表示右内边距，增加这个值（对于Y轴通常是右边距，因为Y轴是垂直的）可以间接影响刻度标签与Y轴轴线的视觉距离
                   },
                   offset:50, // 对 y轴 进行偏移
                   // 隐藏刻度线
                    axisTick: {
                        show: false
                    },
                    // 隐藏分割线
                    splitLine: {
                        show: false
                    },
               },
               series: [{
                   name: '能耗',
                   type: 'line',
                   smooth: true, // 平滑曲线
                   stack: 'total', // 用于堆叠面积图
                   areaStyle: {
                       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                           offset: 0,
                           color: 'blue' // 起始颜色
                       }, {
                           offset: 1,
                           color: 'rgba(0, 0, 255, 0.2)' // 结束颜色（带透明度）
                       }]),
                       opacity: 0.8 // 设置透明度
                   },
                   data: [
                       ['2024-07-23T00:00:00', 0.3],
                       ['2024-07-23T03:00:00', 0.4],
                       ['2024-07-23T08:00:00', 0.47],
                       ['2024-07-23T12:00:00', 0.6],
                       ['2024-07-23T18:00:00', 0.7],
                       ['2024-07-23T23:00:00', 0.5]
                   ]
               }]
           };
       // 接口逻辑
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
   }
</script>
</body>
</html>

以上是鸿蒙原生应用物联网应用的功能、技术选择以及遇到的问题和分享！