P6 优化篇 - 数据折线图可视化步骤

  1. 增加新页面, 则需要在 page.json里面增加页面信息

    image-20240412221711965

2.添加目录, 和路径

image-20240412221752552
  1. 同时也要添加目录了 , 新建目录LineChart , 添加文件LineChart.vue
image-20240412221825437

4.LineChart.vue 直接复制黏贴

<template><view class="container"><!-- 图表显示区域 --><view class="charts-box"><!-- qiun-data-charts 组件用于显示类型为line的折线图,传入的数据包括图表选项opts和图表数据chartData --><qiun-data-charts type="line" :opts="opts" :chartData="chartData" /></view></view>
</template><script>export default {data() {return {// 温度和湿度数据temp: '',humi: '',// 图表数据对象,包含时间轴(categories)和数据系列(series)chartData: {categories: [], // 时间轴,用于x轴显示series: [{ // 数据系列name: '温度',data: [] // 温度数据数组},{name: '湿度',data: [] // 湿度数据数组}]},// 图表选项opts: {color: ["#1890FF", "#91CB74"], // 系列颜色padding: [15, 10, 0, 15], // 图表内边距enableScroll: false, // 禁用滚动legend: {}, // 图例配置xAxis: {disableGrid: true, // 禁用网格线rotateLabel: true, // 旋转标签},yAxis: {gridType: "dash", // 网格线类型为虚线dashLength: 2 // 虚线段长},extra: {line: {type: "straight", // 线型为直线width: 2, // 线宽activeType: "hollow" // 激活点类型为空心}}},// 认证令牌token: '',}},onLoad(options) {// 页面加载时从本地存储获取认证令牌this.token = uni.getStorageSync('token');},onShow() {// 页面显示时获取设备数据,并设置2秒定时刷新数据this.fetchDevData();setInterval(() => {this.fetchDevData();}, 2000);},methods: {// 获取设备数据的方法fetchDevData() {uni.request({url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', // 示例接口地址method: 'GET',data: {product_id:'43vX0O55iC',device_name:'d1'},header: {'authorization': this.token // 使用认证令牌},success: (res) => {let now = new Date();let hours = now.getHours().toString().padStart(2, '0');let minutes = now.getMinutes().toString().padStart(2, '0');let seconds = now.getSeconds().toString().padStart(2, '0');let currentTime = `${hours}:${minutes}:${seconds}`;// 更新温度和湿度数据this.temp = res.data.data[2].value;this.humi = res.data.data[0].value;// 限制数据点数量,避免数据过多if (this.chartData.categories.length >= 10) {this.chartData.categories.shift();this.chartData.series[0].data.shift();this.chartData.series[1].data.shift();}// 添加新的数据点this.chartData.categories.push(currentTime);this.chartData.series[0].data.push(this.temp);this.chartData.series[1].data.push(this.humi);// 触发图表更新this.chartData = {...this.chartData};}});},}}
</script><style>.container {display: flex;flex-direction: column;}.charts-box {width: 100%;height: 300px;/* 设置图表容器的高度 */}
</style>
  1. 同时因为 4. 里面引入了 图表, 所以我们也要在main.js

    里面引入

    import qiunDataChartsVue from './uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
    
    Vue.component('qiun-data-charts', qiunDataChartsVue)
    
image-20240412222204008
  1. 到了图表页面, 我们还有引入库, 把这个压缩包解压即可

  2. 在index.vue里面去调用图表

image-20240412222634778
  1. 方法里面调用这个, 记得url路径换成图表vue的
            // 跳转到折线图页面的方法goLineChart() {// 将认证令牌存储在本地,供其他页面使用uni.setStorageSync('token', this.token);// 页面跳转uni.navigateTo({url:'/pages/LineChart/LineChart'});},

image-20240412222703517

8.图标vue里面的 id和name要改成自己的

image-20240412224541653

9.LineChart.vue里面的图表数据, 要自己对照:

image-20240412224932894

10.然后运行,其余可以自行修改

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/382409.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速认识EA(Enterprise Architecture)

前言 企业架构&#xff0c;英文是&#xff1a;Enterprise Architecture&#xff0c;简称&#xff1a;EA&#xff0c;是承接企业战略规划与IT建设之间的桥梁&#xff0c;是企业信息化的核心&#xff0c;主要包括业务架构和IT架构。 架构的本质是管理和解决系统的复杂性&#x…

《书生大模型实战营第3期》入门岛 学习笔记与作业:Git 基础知识

文章大纲 Git 是什么&#xff1f;-- 分布式版本控制系统版本控制系统简介Git 基本概念1. 安装 Git1.1 Windows 系统1.2 Linux 系统 2. Git 托管平台3. 常用 Git 操作4. tips4.1 全局设置 vs. 本地设置4.2 如何配置4.3 验证设置4.4 Git 四步曲 5. 常用插件6. 常规开发流程 作业其…

使用MariaDB数据库管理系统

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、数据库管理系统 数据库是指按照某些特定结构来存储数据资料的数据仓库&#xff1b; 数据库管理系统是一种能够对数据库中存放的数据进行建立、修…

使用Amazon Web Services Lambda把天气预报推送到微信

最近北京开始下雨&#xff0c;开始和同事打赌几点能够雨停&#xff0c;虽然Iphone已经提供了实时天气&#xff0c;但是还是想用国内的API试试看看是不是更加准确些。 以下是我使用的服务&#xff1a; 地图SDK/APP获取 经纬度彩云天气API 通过地理位置获取天气信息Lambda 作为…

【数学建模】——多领域资源优化中的创新应用-六大经典问题解答

目录 题目1&#xff1a;截取条材 题目 1.1问题描述 1.2 数学模型 1.3 求解 1.4 解答 题目2&#xff1a;商店进货销售计划 题目 2.1 问题描述 2.2 数学模型 2.3 求解 2.4 解答 题目3&#xff1a;货船装载问题 题目 3.1问题重述 3.2 数学模型 3.3 求解 3.4 解…

JavaWeb系列二十三: web 应用常用功能(文件上传下载)

文件上传下载 基本介绍文件上传基本原理文件上传应用实例文件上传注意事项和细节 文件下载基本原理文件下载应用实例文件下载注意事项 ⬅️ 上一篇: JavaWeb系列二十二: 线程数据共享和安全(ThreadLocal) &#x1f389; 欢迎来到 JavaWeb系列二十三: web 应用常用功能(文件上传…

kafka基础介绍

一、为什么使用消息队列 1.使用同步的通信方式来解决多个服务之间的通信 同步的通信方式会存在性能和稳定性的问题。 2.使用异步的通信方式 针对于同步的通信方式来说,异步的方式,可以让上游快速成功,极大提高了系统的吞吐量。而且在分布式系统中,通过下游多个服务的 分布式事…

使用Web控制端和轻量级客户端构建的开放Web应用防火墙(OpenWAF)

目录 1. 简介2. 项目结构3. Web控制端3.1. 功能概述3.2. 审计&#xff08;攻击&#xff09;日志查看3.3. 多个WAF的集中监控和操作3.4. 使用socket进行封装3.5. 日志的高效存储和检索&#xff08;Redis&#xff09; 4. 轻量级客户端4.1. 功能概述4.2. 对Web程序的防护4.3. 网络…

大语言模型-Bert-Bidirectional Encoder Representation from Transformers

一、背景信息&#xff1a; Bert是2018年10月由Google AI研究院提出的一种预训练模型。 主要用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;特别是机器阅读理、文本分类、序列标注等任务。 BERT的网络架构使用的是多层Transformer结构&#xff0c;有效的解决了长…

docker文件挂载和宿主主机文件的关系

一、背景 在排查docker日志时发现在读取docker的文件时找不到文件&#xff0c;在宿主主机上可以查到对应的文件。这里就要理解docker文件目录和宿主主机上的文件的关系。 二、Docker文件系统和宿主系统 Docker文件和宿主文件之间的关系主要体现在Docker容器的运行环境中。Docke…

CSS画边框线带有渐变线和流光边框实例

流光边框css流光边框动画效果_哔哩哔哩_bilibili流光边框css流光边框动画效果_哔哩哔哩_bilibili纯CSS写一个动态流水灯边框的效果&#xff5e;_哔哩哔哩_bilibili荧光边框CSS 动画发光渐变边框特效_哔哩哔哩_bilibili [data-v-25d37a3a] .flow-dialog-custom {background-col…

recursion depth exceeded” error

有些时候不可以用jax.jit装饰器 参考资料&#xff1a;使用 JAX 后端在 Keras 3 中训练 GAN |由 Khawaja Abaid |中等 (medium.com)

字符的统计——423、657、551、696、467、535

423. 从英文中重建数字 最初思路 首先要有一个指针&#xff0c;对于3/4/5为一组地跳跃。起初想的是后瞻性&#xff0c;如果符合0-9任意&#xff0c;则更换index、跳跃。此时写了一个函数&#xff0c;用来判断s的截取段和0-9中有无符合。这个思路并没有进行下去&#xff0c;虽然…

.NET 情报 | 分析某云系统添加管理员漏洞

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

基于java web新生报到系统设计与实现

第1章 绪论 本章首先对建设新生报到系统的背景&#xff0c;传统新生报到管理所存在的问题进行分析&#xff0c;给出建立新生报到系统的意义&#xff0c;同时提出建设网站的设计思路&#xff0c;最后给出本论文的各章结构介绍。 1.1 引言 21世纪是富有挑战性的世纪。在世纪之…

C语言 | Leetcode C语言题解之第282题给表达式添加运算符

题目&#xff1a; 题解&#xff1a; #define MAX_COUNT 10000 // 解的个数足够大 #define NUM_COUNT 100 // 操作数的个数足够大 long long num[NUM_COUNT] {0};long long calc(char *a) { // 计算表达式a的值// 将数字和符号&#xff0c;入栈memset(num, 0, sizeof(num));in…

【每日刷题Day85】

【每日刷题Day85】 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 125. 验证回文串 - 力扣&#xff08;LeetCode&#xff09; 2. 43. 字符串相乘 - 力扣&#xff08;L…

【数据分享】2013-2022年我国省市县三级的逐月SO2数据(excel\shp格式\免费获取)

空气质量数据是在我们日常研究中经常使用的数据&#xff01;之前我们给大家分享了2000——2022年的省市县三级的逐月PM2.5数据和2013-2022年的省市县三级的逐月CO数据&#xff08;均可查看之前的文章获悉详情&#xff09;&#xff01; 本次我们分享的是我国2013——2022年的省…

大数据-38 Redis 高并发下的分布式缓存 Redis简介 缓存场景 读写模式 旁路模式 穿透模式 缓存模式 基本概念等

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; HadoopHDFSMapReduceHiveFlumeSqoopZookeeperHBaseRedis 章节内容 上一节我们完成了&#xff1a; HBase …

优选算法之二分查找(上)

目录 一、二分查找 1.题目链接&#xff1a;704. 二分查找 2.题目描述&#xff1a; 3.算法流程&#xff1a; 4.算法代码&#xff1a; 二、在排序数组中查找元素的第一个和最后一个位置 1.题目链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 2.题目描述…