STM32HAL库+ESP8266+cJSON+微信小步调_毗连华为云物联网平台

STM32HAL库+ESP8266+cJSON+微信小步调_毗连华为云物联网平台

   实行利用资源：正点原子F407
  USART1：PA9P、A10（串口打印调试）
  USART3：PB10、PB11（WiFi模块）
  DHT11：PG9（收罗数据、上报）
  LED0、1：PF9、PF10（根据收到的下令，控制亮灭）
  表现屏（无关紧急）
  0 前置内容准备

以下内容请参考之前写过的博客

• HAL库创建工程【STM32CubeMX安装_stm32cubemx下载-CSDN博客】
  
• ESP8266固件烧录【ESP8266烧录AT指令】
  

1 华为云物联网平台创建产物

1.1新建产物

• 在华为云装备接入IoTDA平台，点击左上角的【创建产物】，参考下图填写产物信息。
  

• 创建完成后进入创建的产物，举行产物模子设置。起首先创建一个服务，服务ID自己根据现实写。
  
• 点击【新增属性】，根据现实需求，添加须要交互的数据及其范例和访问方式。
  

• 点击【添加下令】，举行指令的设置，【下发参数】就是下发指令控制装备，【相应参数】就是读取装备上传信息。
  

1.2 新创建备

在【全部装备】界面，点击的【注册装备】添加装备

1.3 获取MQTT三元素

在新创建的装备中，点击检察MQTT毗连参数，即可获取三元素

1.4 获取订阅Topic

在之前创建的产物中，Topic管理内里包罗我们须要订阅的Topic

2 usart模块

• 将【stm32f1xx_it.c】内里的void USART1_IRQHandler(void) 和void USART3_IRQHandler(void)函数表明掉
  

• 将下面的代码粘贴到【usart.c】中的最下面的/* USER CODE BEGIN 1 */和/* USER CODE END 1 */之间
  

1. /**
2. * @brief       ATK-MW8266D UART printf
3. * @param       fmt: 待打印的数据
4. * @retval      无
5. */
6. void atk_mw8266d_uart_printf(char *fmt, ...)
7. {
8.     va_list ap;
9.     uint16_t len;
10.    
11.     va_start(ap, fmt);
12.     vsprintf((char *)g_uart_tx_buf, fmt, ap);
13.     va_end(ap);
14.    
15.     len = strlen((const char *)g_uart_tx_buf);
16.     HAL_UART_Transmit(&huart3, g_uart_tx_buf, len, HAL_MAX_DELAY);
17. }
19. /**
20. * @brief       ATK-MW8266D UART重新开始接收数据
21. * @param       无
22. * @retval      无
23. */
24. void atk_mw8266d_uart_rx_restart(void)
25. {
26.     g_uart_rx_frame.sta.len     = 0;
27.     g_uart_rx_frame.sta.finsh   = 0;
28. }
30. /**
31. * @brief       获取ATK-MW8266D UART接收到的一帧数据
32. * @param       无
33. * @retval      NULL: 未接收到一帧数据
34. *              其他: 接收到的一帧数据
35. */
36. uint8_t *atk_mw8266d_uart_rx_get_frame(void)
37. {
38.     if (g_uart_rx_frame.sta.finsh == 1)
39.     {
40.         g_uart_rx_frame.buf[g_uart_rx_frame.sta.len] = '\0';
41.         return g_uart_rx_frame.buf;
42.     }
43.     else
44.     {
45.         return NULL;
46.     }
47. }
49. /**
50. * @brief       获取ATK-MW8266D UART接收到的一帧数据的长度
51. * @param       无
52. * @retval      0   : 未接收到一帧数据
53. *              其他: 接收到的一帧数据的长度
54. */
55. uint16_t atk_mw8266d_uart_rx_get_frame_len(void)
56. {
57.     if (g_uart_rx_frame.sta.finsh == 1)
58.     {
59.         return g_uart_rx_frame.sta.len;
60.     }
61.     else
62.     {
63.         return 0;
64.     }
65. }
67. void USART1_IRQHandler(void)
68. {
69. #if SYS_SUPPORT_OS                                                   /* 使用OS */
70.     OSIntEnter();
71. #endif
72.     HAL_UART_IRQHandler(&huart1);                               /* 调用HAL库中断处理公用函数 */
74.     while (HAL_UART_Receive_IT(&huart1, (uint8_t *)g_rx_buffer, RXBUFFERSIZE) != HAL_OK)     /* 重新开启中断并接收数据 */
75.     {
76.         /* 如果出错会卡死在这里 */
77.     }
79. #if SYS_SUPPORT_OS                                                   /* 使用OS */
80.     OSIntExit();
81. #endif
82. }
84. void USART3_IRQHandler(void)
85. {
86.   /* USER CODE BEGIN USART3_IRQn 0 */
88.   /* USER CODE END USART3_IRQn 0 */
89.   HAL_UART_IRQHandler(&huart3);
90.   /* USER CODE BEGIN USART3_IRQn 1 */
91.     uint8_t tmp;
92.    
93.     if (__HAL_UART_GET_FLAG(&huart3, UART_FLAG_ORE) != RESET)        /* UART接收过载错误中断 */
94.     {
95.         __HAL_UART_CLEAR_OREFLAG(&huart3);                           /* 清除接收过载错误中断标志 */
96.         (void)huart3.Instance->SR;                                   /* 先读SR寄存器，再读DR寄存器 */
97.         (void)huart3.Instance->DR;
98.     }
99.    
100.     if (__HAL_UART_GET_FLAG(&huart3, UART_FLAG_RXNE) != RESET)       /* UART接收中断 */
101.     {
102.         HAL_UART_Receive(&huart3, &tmp, 1, HAL_MAX_DELAY);           /* UART接收数据 */
103.         if (g_uart_rx_frame.sta.len < (256 - 1))   /* 判断UART接收缓冲是否溢出
104.                                                                              * 留出一位给结束符'\0'
105.                                                                              */
106.         {
107.             g_uart_rx_frame.buf[g_uart_rx_frame.sta.len] = tmp;             /* 将接收到的数据写入缓冲 */
108.             g_uart_rx_frame.sta.len++;                                      /* 更新接收到的数据长度 */
109.         }
110.         else                                                                /* UART接收缓冲溢出 */
111.         {
112.             g_uart_rx_frame.sta.len = 0;                                    /* 覆盖之前收到的数据 */
113.             g_uart_rx_frame.buf[g_uart_rx_frame.sta.len] = tmp;             /* 将接收到的数据写入缓冲 */
114.             g_uart_rx_frame.sta.len++;                                      /* 更新接收到的数据长度 */
115.         }
116.     }
117.    
118.     if (__HAL_UART_GET_FLAG(&huart3, UART_FLAG_IDLE) != RESET)       /* UART总线空闲中断 */
119.     {
120.         g_uart_rx_frame.sta.finsh = 1;                                      /* 标记帧接收完成 */
121.         
122.         __HAL_UART_CLEAR_IDLEFLAG(&huart3);                          /* 清除UART总线空闲中断 */
123.     }
124.   /* USER CODE END USART3_IRQn 1 */
125. }

复制代码

• 在【usart.c】上面的的/* USER CODE BEGIN 0 */和/* USER CODE END 0 */之间到场下面的代码
  

1. #include <stdarg.h>
2. #include <stdio.h>
3. #include <string.h>
5. #if 1
6. #pragma import(__use_no_semihosting)            
7. //标准库需要的支持函数                 
8. struct __FILE
9. {
10.         int handle;
12. };
14. FILE __stdout;      
15. //定义_sys_exit()以避免使用半主机模式   
16. void _sys_exit(int x)
17. {
18.         x = x;
19. }
20. //重定义fputc函数
21. int fputc(int ch, FILE *f)
22. {      
23.         while((USART1->SR&0X40)==0);//循环发送,直到发送完毕   
24.     USART1->DR = (uint8_t) ch;      
25.         return ch;
26. }
27. #endif
29. uint8_t g_rx_buffer[RXBUFFERSIZE];  /* HAL库使用的串口接收缓冲 */

复制代码

• 在【usart.c】中的void HAL_UART_MspInit(UART_HandleTypeDef* uartHandle)函数中调解制止优先级，WiFi的usart3的高于串口的，同时添加usar使能
  

• 在【usart.h】中的/* USER CODE BEGIN Private defines */和/* USER CODE END Private defines */之间到场下面的代码
  

1. static struct
2. {
3.     uint8_t buf[256];              /* 帧接收缓冲 */
4.     struct
5.     {
6.         uint16_t len    : 15;                               /* 帧接收长度，sta[14:0] */
7.         uint16_t finsh  : 1;                                /* 帧接收完成标志，sta[15] */
8.     } sta;                                                  /* 帧状态信息 */
9. } g_uart_rx_frame = {0};                                    /* ATK-MW8266D UART接收帧缓冲信息结构体 */
10. static uint8_t g_uart_tx_buf[1024]; /* ATK-MW8266D UART发送缓冲 */
11. #define RXBUFFERSIZE   1                        /* 缓存大小 */

复制代码

• 在【usart.h】中的/* USER CODE BEGIN Prototypes */和/* USER CODE END Prototypes */之间到场下面的代码
  

1. void atk_mw8266d_uart_printf(char *fmt, ...);       /* ATK-MW8266D UART printf */
2. void atk_mw8266d_uart_rx_restart(void);             /* ATK-MW8266D UART重新开始接收数据 */
3. uint8_t *atk_mw8266d_uart_rx_get_frame(void);       /* 获取ATK-MW8266D UART接收到的一帧数据 */
4. uint16_t atk_mw8266d_uart_rx_get_frame_len(void);   /* 获取ATK-MW8266D UART接收到的一帧数据的长度 */

复制代码

3 WiFi模块

将提前编写好的esp8266.c/.h文件分别到场Src和Inc文件夹，然后再在keil里将esp8266.c文件到场工程。
4 CJSON模块移植

移植过程检察之前写的另一篇博客【CJSON模块】
5 WIFI毗连华为云

• 创建wifi_HW.c/.h文件。
  
• 在wifi_HW.h中宏界说毗连华为云相干参数。
  

1. // Wi-Fi用户名和密码
2. #define WIFI_User                                                  "***"  // Wi-Fi网络名称
3. #define WIFI_Pass                                            "***"  // Wi-Fi网络密码
5. // ESP8266设备在华为云IoT平台的认证信息
6. #define ESP8266_UserName                                  "***"  // 用户名，通常为设备ID
7. #define ESP8266_PassWord                                 "***"  // 密码或密钥
8. #define ESP8266_ClientID                                 "***"  // MQTT客户端ID
9. #define ESP8266_Domain_Name                                 "***"  // 华为云IoT平台的域名
10. #define ESP8266_Port                                          1883  // MQTT服务端口
11. #define ESP8266_Reconnect                                 1  // 是否允许设备在断开连接后尝试重新连接
13. // 华为云MQTT服务相关设置
14. #define HUAWEI_MQTT_ServiceID                         "***"  // 服务ID
15. #define HUAWEI_MQTT_DeviceID                 "***"  // 设备ID
16. #define HUAWEI_MQTT_commands             "$oc/devices/***/sys/commands/#"  // 命令订阅主题
17. #define HUAWEI_MQTT_commands_response    "$oc/devices/***/sys/commands/response/request_id="  // 命令响应主题
18. #define HUAWEI_MQTT_report               "$oc/devices/***/sys/properties/report"  // 属性上报主题

复制代码

• 编写wifi_HW.c文件，调用esp8266.c中编写的函数毗连华为云，然后将该函数名到场wifi_HW.h中。
  

1. void wifi_init(void){
2.         uint8_t ret = 0;
3.         ret  = ESP8266_Reset();
4.         printf("1: %d\r\n",ret);
5.         ret = ESP8266_ATE(0);
6.         printf("2: %d\r\n",ret);
7.         ret = ESP8066_Mode(1);
8.         printf("3: %d\r\n",ret);
9.         ret = ESP8266_WiFi(WIFI_User, WIFI_Pass);
10.         printf("4: %d\r\n",ret);
11.         ret = ESP8266_MQTTUSERCFG(ESP8266_UserName, ESP8266_PassWord);
12.         printf("5: %d\r\n",ret);
13.         ret = ESP8266_MQTTCLIENTID(ESP8266_ClientID);
14.         printf("6: %d\r\n",ret);
15.         ret =  ESP8266_MQTTCONN(ESP8266_Domain_Name,ESP8266_Port,ESP8266_Reconnect);
16.         printf("7: %d\r\n",ret);
17.         ret =  ESP8266_MQTTSUB(HUAWEI_MQTT_commands);
18.         printf("8: %d\r\n",ret);
19. }

复制代码

6 数据交互

6.1 装备属性上报

参考华为云官方给出的MQTT属性上报样例，在wifi_HW.c中编写report_Json函数，利用cJSON模块封装传感器数据，然后将其发送到云平台。

可以看出该消息的JSON格式：
(1) 在根对象中，有一个名为services的键，其值是一个数组。
(2) 在services数组中，有一个服务对象，它包罗两个键：service_id和properties
(3) 在properties对象中，存放的键值对就是在产物中创建的属性。
根据这种格式，在report_Json函数中封装JSON消息

1. void report_Json(uint8_t temperature, uint8_t humidity,uint8_t adcx){
2.     uint8_t cmd[1024]; // 用于存储构建的AT命令
3.     char *str = NULL; // 指向JSON字符串的指针
4.     int i = 0; // 循环迭代变量
5.     uint8_t params_buf[1024]; // 用于存储处理过的JSON字符串
6.     uint16_t move_num = 0; // 用于记录字符串处理过程中的移动次数
7.    
8.     cJSON *json = cJSON_CreateObject(); // 创建一个空的JSON对象
9.     cJSON *properties_cjson = cJSON_CreateObject(); // 创建一个空的子JSON对象，用于存储属性
10.     cJSON *service = cJSON_CreateObject(); // 创建一个空的子JSON对象，用于存储服务信息
11.     cJSON *services_array = cJSON_CreateArray(); // 创建一个空的JSON数组，用于存储服务数组
12.        
13.         // 向属性对象中添加温度、湿度和光照强度数据
14.     cJSON_AddNumberToObject(properties_cjson, "temperature", temperature);
15.     cJSON_AddNumberToObject(properties_cjson, "humidity", humidity);
16.         cJSON_AddNumberToObject(properties_cjson, "light", adcx);
17.     // 向服务对象中添加服务ID和属性
18.         cJSON_AddStringToObject(service, "service_id", "yun");
19.     cJSON_AddItemToObject(service, "properties", properties_cjson);
20.         cJSON_AddItemToObject(json, "services", services_array);
21.          // 将服务数组添加到JSON对象中
22.         cJSON_AddItemToArray(services_array, service);
23.    
24.     // 将JSON对象转换为无格式的字符串
25.     str = cJSON_PrintUnformatted(json);
26.    
27.     // 打印JSON格式的字符串
28.     //printf("json格式 = %s\r\n", str);
29.    
30.     // 为MQTT发布添加转义字符
31.     for(i = 0; *str != '\0'; i++){
32.         params_buf[i] = *str;
33.         // 如果下一个字符是引号或逗号，添加转义字符
34.         if(*(str + 1) == '"' || *(str + 1) == ','){
35.             params_buf[++i] = '\\';
36.         }
37.         str++;
38.         move_num++;
39.     }
40.     str = str - move_num; // 回退指针到JSON字符串的开始
41.    
42.     // 打印处理过的JSON字符串
43.     //printf("params_buf = %s\r\n", params_buf);
44.    
45.     // 构建AT命令
46.     sprintf((char *)cmd,"AT+MQTTPUB=0,""HUAWEI_MQTT_report"","%s",0,0\r\n",params_buf);
47.    
48.     // 打印即将发送的AT命令
49.     //printf("开始发送数据:%s", cmd);
51.     // 发送AT命令并通过ESP8266模块
52.     ESP8266_Sent_AT(cmd, "OK", 500);
53.    
54.     // 清理JSON对象占用的内存
55.     cJSON_Delete(json);
56.    
57.     // 如果分配了额外的字符串空间，释放它
58.     if(str != NULL){
59.         free(str);
60.         str = NULL;
61.         //printf("释放str空间成功\r\n");
62.     }
63. }

复制代码

6.2 云端下令下发

参考华为云官方给出的MQTT下行哀求样例，在wifi_HW.c中编写rcv_json函数，分析云平台下发的JSON消息字符串，如果乐成吸收后，须要给云平台返回吸收乐成的消息下令。

从给出的样例中可以看出，下发的指令在paras键所对应的JSON值中，只需分析此中的键的名字，然后读取相匹配的键的值，即可获取下发的下令。
参考下图相应参数的格式，可知相应参数只需发送订阅的topic和下发下令中的request_id的值即可，反面的JSON消息体均可省略。

1. void rcv_json(void){
2.     uint8_t *ret = NULL; // 用于存储接收到的数据帧
3.     cJSON *cjson = NULL; // 用于存储解析后的JSON对象
4.     char topic_buff[1024]; // 用于存储MQTT主题
5.     int num; // 用于存储接收数据的数量
6.     char recv_buffer[1024]; // 用于存储接收到的JSON数据
7.         char request_id[37];
8.         char device_id[256];
9.         uint8_t cmd[1024]; // 用于存储构建的AT命令
10.    
11.     ret = atk_mw8266d_uart_rx_get_frame(); // 获取UART接收到的数据帧
12.     atk_mw8266d_uart_rx_restart(); // 重启UART接收
13.        
14.     char *ptr_recv = strstr((const char *)ret,"+MQTTSUBRECV"); // 检查是否包含MQTT订阅数据标志
15.    
16.     if(ptr_recv!=NULL){ // 如果是MQTT订阅数据
17.         memset(device_id,0,sizeof(device_id));
18.                 memset(request_id,0,sizeof(request_id));
19.         
20.                 sscanf((char *)ret, "+MQTTSUBRECV:0,"$oc/devices/%255[^/]/sys/commands/request_id=%36s",%d,%255s", device_id, request_id, &num, recv_buffer);
21.                
22.                 //printf("判断DeviceID:  %s\r\n",device_id);
23.                
24.                 // printf("接收数据成功，开始解析  %s\r\n",recv_buffer);
25.                 //判断DeviceID
26.         if(strstr(device_id,HUAWEI_MQTT_DeviceID)) {
27.             // printf("接收数据成功，开始解析  %s\r\n",recv_buffer);
28.             cjson = cJSON_Parse(recv_buffer); // 解析JSON数据
29.         }
30.         
31.         if(cjson==NULL) // 如果JSON解析失败
32.             printf("cjson 解析错误\r\n"); // 打印错误信息
33.         else{
34.             cJSON *json_data = cJSON_GetObjectItem(cjson,"paras"); // 获取JSON对象中的paras项
35.             if(json_data==NULL){
36.                 printf("cjson  没有数据\r\n"); // 打印错误信息
37.                 return;
38.             }
39.             else{
40.                 // printf("cjson 内存大小为 = %d\r\n",sizeof(cjson)); // 打印JSON对象的内存大小
41.                 // 解析数据
42.                 if(cJSON_GetObjectItem(json_data,"led_flag")!=NULL)
43.                 {
44.                     LED_Switch = cJSON_GetObjectItem(json_data,"led_flag")->valueint;
45.                     printf("csjon解析成功 LED_Switch = %d\r\n",LED_Switch);
47.                 }
48.                 if(cJSON_GetObjectItem(json_data,"temp_flag")!=NULL)
49.                 {
50.                     temp_LED_Switch = cJSON_GetObjectItem(json_data,"temp_flag")->valueint;
51.                     printf("csjon解析成功 temp_LED_Switch = %d\r\n",temp_LED_Switch);
52.                 }
53.                                 char full_topic[256];   
54.                                 snprintf(full_topic, sizeof(full_topic), "%s%s", HUAWEI_MQTT_commands_response, request_id);
55.                                 sprintf((char *)cmd, "AT+MQTTPUB=0,"%s","",0,0\r\n", full_topic);
56.                                 ESP8266_Sent_AT(cmd, "OK", 500);
57.             }
58.             cJSON_Delete(cjson); // 删除JSON对象，释放内存
59.             //cJSON_Delete(json_data);
60.         }
61.     }
62. }

复制代码

7 微信小步调毗连华为云

7.1 开发方式

• 利用微信开发工具创建微信小步调项目
  
• 微信小步调调用应用侧API，获取云平台数据
  
• 将得到的数据举行表现
  

7.2 微信小步调创建

【略…】
7.3 创建IAM账户（云平台）

• 同一身份认证（Identity and Access Management，简称IAM）是华为云提供权限管理的底子服务，可以安全地控制云服务和资源的访问权限。应用侧须要通过IAM服务鉴权，获取token。因此在开发之前须要先创建IAM用户。
  
• 在【同一身份认证服务】页面，点击【创建用户】，参考下图创建账号，内里填写的自界说暗码须要记着，然后将其到场【admin】用户组。
  

• 创建乐成后，退出登录华为云，利用IAM账号登录华为云，验证是否乐成。
  

7.3 获取Token（小步调）

• 参考华为云提供的哀求示例，发送获取Token的http哀求消息
  

• 华为云认证通事后向应用服务器返回鉴权令牌X-Subject-Token，接口返回的相应消息头中X-Subject-Token就是须要获取的用户Token。根据上述示例，在微信开发工具中，利用wx.request发送哀求，然后分析相应消息头，获取Token。
  

1. gettoken(){
2.     var that=this;   
3.     wx.request({
4.         url: 'https://iam.cn-north-4.myhuaweicloud.com/v3/auth/tokens',
5.         data:'{"auth": { "identity": {"methods": ["password"],"password": {"user": {"name": "***","password": "***","domain": {"name": "***"}}}},"scope": {"project": {"name": "cn-north-4"}}}}',
6.         method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
7.         header: {'content-type': 'application/json' }, // 请求的 header
8.         success: function(res){// success
9.             var token='';
10.             token=JSON.stringify(res.header['X-Subject-Token']);//解析消息头的token
11.             token=token.replaceAll(""", "");
12.             wx.setStorageSync('token',token);
13.         },
14.     });
15. }

复制代码

• 获取Token后，再调用其他接口时，须要在哀求消息头中添加X-Auth-Token，其值为获取到的Token。比方Token值为“ABCDEFJ…”，则调用接口时将“X-Auth-Token: ABCDEFJ…”加到哀求消息头即可，如下所示。
  

7.4 获取装备影子（小步调）

• 参考哀求示例，发送哀求获取装备影子数据。
  

• 检察返回的HTTP相应消息，检察所须要的数据所在位置，如下图所示，可以发现我们须要的数据在data内里的shadow[0]中的reported下的properties内里。
  

• 根据分析的效果，在微信开发工具中编写代码，获取数据。
  

1. getinfo(){
2.     var that = this
3.     var token = wx.getStorageSync('token');//读缓存中保存的token
4.       wx.request({
5.         url: 'https://653a151f50.st1.iotda-app.cn-north-4.myhuaweicloud.com:443/v5/iot/661f377e2ccc1a583881a678/devices/661f377e2ccc1a583881a678_yun_dht11/shadow',
6.         data:'',
7.         method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
8.         header: {'content-type': 'application/json','X-Auth-Token':token },
9.       success: function (res) {
10.       that.setData({
11.         humi:res.data.shadow[0].reported.properties.humidity,
12.         temp:res.data.shadow[0].reported.properties.temperature,
13.         light:res.data.shadow[0].reported.properties.light
14.       })
15.       }
16.      });
17. }

复制代码

7.5 下发装备下令（小步调）

参考哀求示例，在微信开发工具中编写代码下发下令。

1. if(that.data.lset > that.data.light){
2.     wx.request({
3.       url: 'https://653a151f50.st1.iotda-app.cn-north-4.myhuaweicloud.com:443/v5/iot/661f377e2ccc1a583881a678/devices/661f377e2ccc1a583881a678_yun_dht11/commands',
4.       data:'{"service_id": "yun","command_name": "led","paras": {"led_flag": true}}',
5.       method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
6.       header: {'content-type': 'application/json','X-Auth-Token':token }, //请求的header
7.       success: function(res){
8.           console.log("下发命令成功");//打印完整消息
9.       },
10.     });
11. }

复制代码

8 小步调界面操持

8.1 主页数据表现

在wxml中设置结构，在wxss中设置样式，如下图所示。

8.2 Echarts数据可视化

ECharts一个利用JavaScript实现的开源可视化库。ECharts提供了通例的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的舆图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，尚有效于BI的漏斗图，仪表盘，而且支持图与图之间的混搭。
微信小步调利用Echarts举行可视化的步调如下所示。

• 将Echarts下载到当地，并放入的微信小步调工程文件夹中，如下图所示。
  

• 在lineset.json中引入ec-canvas组件，如下图所示。
  

• 参考官网给出的折线图堆叠示例，编写该图像的表现函数function line_set(chart,time_data,hum_data,tem_data,ligh_data)。
  
• 初始化图表，同时调用line_set函数表现。
  

1. init_chart: function (time_data,hum_data,tem_data,ligh_data) {        
2.     this.oneComponent.init((canvas, width, height, dpr) => {
3.         const chart = echarts.init(canvas, null, {
4.             width: width,
5.             height: height,
6.             devicePixelRatio: dpr
7.         });
8.         line_set(chart,time_data,hum_data,tem_data,ligh_data)
9.         this.chart = chart;
10.         return chart;
11.     });
12. }

复制代码

• 将得到的影子装备的数据存入数组中，然后将其传入init_chart(date,humi,temp,ligh)中，举行数据及时可视化表现。
  

1. temp = that.data.Temperature;
2. humi = that.data.Humidity;
3. ligh = that.data.Light;
4. date = that.data.Time;
5. temp.push(res.data.shadow[0].reported.properties.temperature);
6. humi.push(res.data.shadow[0].reported.properties.humidity);
7. ligh.push(res.data.shadow[0].reported.properties.light);
8. date.push(formattedTime);
9. if (temp.length > 7) {
10.   temp.shift(); // 移除数组的第一个元素
11.   humi.shift();
12.   ligh.shift();
13.   date.shift();
14. }

复制代码

  32工程源码（CSDN）：【免费】STM32HAL库+ESP8266+cJSON+微信小步调-毗连华为云物联网平台.zip资源-CSDN文库
  微信小步调源码（CSDN）：【免费】STM32HAL库+ESP8266+cJSON+微信小步调-毗连华为云物联网平台(微信小步调侧)资源-CSDN文库
  32工程+微信小步调源码（GitHub）：STM32HAL库+ESP8266+cJSON+微信小步调_毗连华为云物联网平台