当前位置: 首页 > news >正文

uniapp__微信小程序使用秋云ucharts折线图双轴

1、子组件

<template><view class="charts-box"><qiun-data-charts type="line":opts="computedOpts":chartData="chartData"/></view>
</template><script>
export default {props: {chartData: {type: Object,required: true},color: {type: Array,default: () => ["#1890FF", "#91CB74"]},yAxisMax: {type: Number,default: 5},yAxisMin: {type: Number,default: 0}},computed: {computedOpts() {// 在这里封装 opts,并根据父组件传入的 props 动态修改return {color: this.color, // 使用父组件传入的颜色padding: [15, 10, 0, 15],enableScroll: false,xAxis: {disableGrid: true,rotateLabel: true},yAxis: {data: [{type: "value",position: "left",},{type: "value",position: "right",min: this.yAxisMin, // 父组件传入的最小值max: this.yAxisMax  // 父组件传入的最大值}]},extra: {line: {type: "straight",width: 2,activeType: "hollow"},tooltip: {legendShape: "circle"}}};}}
};
</script><style scoped>
.charts-box {width: 715rpx;height: 300px;margin-left: -51rpx;
}
</style>

2、父组件

<lineecharts :chartData="chartData" :color="['#1890FF', '#91CB74']" :yAxisMax="10" :yAxisMin="0">getChartData() {const startTime = new Date();let timePoints = [];for (let i = 0; i < 6; i++) {const time = new Date(startTime.getTime() + i * 5000);const formattedTime = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;timePoints.push(formattedTime);}setTimeout(() => {this.chartData = {categories: timePoints,series: [{name: "心率",data: [35, 8, 25, 37, 4, 20],index: 0},{name: "呼吸",data: [2, 4, 3, 1, 4, 1],index: 1}]};}, 100);},

 双轴series: [{
                                name: "心率",
                                data: [35, 8, 25, 37, 4, 20],
                                index: 0
                            },
                            {
                                name: "呼吸",
                                data: [2, 4, 3, 1, 4, 1],
                                index: 1
                            }
                        ]数据区分使用index

相关文章:

uniapp__微信小程序使用秋云ucharts折线图双轴

1、子组件 <template><view class"charts-box"><qiun-data-charts type"line":opts"computedOpts":chartData"chartData"/></view> </template><script> export default {props: {chartData: {t…...

云原生运维 - 旅程(简约版)

1. 入门阶段 理论学习&#xff1a; 了解云计算和容器技术的基本概念。学习Docker基础知识&#xff0c;包括容器创建、镜像管理等。阅读Kubernetes官方文档的入门部分&#xff0c;了解Kubernetes的核心概念。 实操练习&#xff1a; 安装Docker环境。运行你的第一个Docker容器…...

2014年国赛高教杯数学建模B题创意平板折叠桌解题全过程文档及程序

2014年国赛高教杯数学建模 B题 创意平板折叠桌 某公司生产一种可折叠的桌子&#xff0c;桌面呈圆形&#xff0c;桌腿随着铰链的活动可以平摊成一张平板&#xff08;如图1-2所示&#xff09;。桌腿由若干根木条组成&#xff0c;分成两组&#xff0c;每组各用一根钢筋将木条连接…...

PyCharm打开及配置现有工程(详细图解)

本文详细介绍了如何利用Pycharm打开一个现有的工程&#xff0c;其中包括编译器的配置。 PyCharm打开及配置现有工程 1、打开工程2、配置编译器 1、打开工程 双击PyCharm软件&#xff0c;点击左上角 文件 >> 打开(O)… 选中想要打开的项目之后点击“确定” 2、配置编译器…...

CSP-J

CSP那些事儿 OI赛制是啥OI赛制下的CCF-CSPCSP简介CSP-J考试&#xff08;仅山东&#xff09;考试时间考试地点考试结构 写在最后有趣的代码&#xff1a; OI赛制是啥 OI赛制&#xff0c;不详细说了&#xff0c;就是一股脑做好几个题&#xff0c;一起提交的比赛&#xff08;通俗易…...

Linux系统:Linux中ln命令用法

ln命令功能 将一个文件或目录在同一个文件系统或者另一个不同的文件系统的某个位置建立一个链接&#xff0c;类似windows系统中的超链接&#xff0c;这样当我们在链接处访问被链接的目录或文件时就可以通过此链接来访问&#xff0c;不必要再进入要访问的文件系统中。 建立链接…...

在SpringBoot+VUE中 实现登录-RSA的加密解密

步骤-先理清楚在动手 前端首先调用后端的公钥接口,在前端加密密码传输至后端登录接口后端用私钥解密码拿着用户名去数据库查询出来的盐值加密的 密码1用私钥解密密码登录密码加盐值得到 密码2比较密码1与密码2,相同则登录成功&#xff0c;跳转首页&#xff5c;其他页面 前端实…...

基于Android11简单分析audio_policy_configuration.xml

开篇先贴上一个高通的例子&#xff0c;后续基于此文件做具体分析。 1 <?xml version"1.0" encoding"UTF-8" standalone"yes"?> 2 <!-- Copyright (c) 2016-2019, The Linux Foundation. All rights reserved 3 Not a Contribut…...

kafka-manager修改zookeeper端口号后启动仍然连接2181端口

问题描述&#xff1a; zookeeper默认端口号修改为了2182&#xff0c;kafka-manager的配置文件application.conf中也已经修改了zkhosts为新的端口号&#xff0c;然而启动kafka-manger时报错连接连接超时&#xff0c;发现连接的还是2181端口&#xff0c;很奇怪&#xff1f;&…...

RabbitMQ 入门(三)SpringAMQP

一、Spring AMQP 简介 SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; - 自动…...

celery 项目中mysql 数据库连接数耗尽事故记录

python 项目中使用 celery 中导致mysql数据库连接耗尽记录【mysql数据库连接池使用错误】 结论&#xff1a;由于使用 celery 进行项目的多任务管理&#xff0c;在worker任务定义的过程中&#xff0c;使用了 dbutils 中的 PooledDB 连接池进行 mysql数据库连接&#xff0c; 因此…...

Python数据分析-Scipy科学计算法

1.认识Scipy SciPy&#xff08;发音为 "Sigh Pie"&#xff09;是一个开源的 Python 算法库和数学工具包。 通常与 NumPy、Matplotlib 和 pandas 等库一起使用&#xff0c;这些库共同构成了 Python 的科学计算基础。 2.使用Scipy基本函数 2.1 引用Scipy函数 impor…...

【Python Django + Vue】酒店在线预订系统:用技术说话!

&#x1f393; 作者&#xff1a;计算机毕设小月哥 | 软件开发专家 &#x1f5a5;️ 简介&#xff1a;8年计算机软件程序开发经验。精通Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等技术栈。 &#x1f6e0;️ 专业服务 &#x1f6e0;️ 需求定制化开发源码提…...

禁用微软的windos安全中心

目录 一、为什么禁用 二、WDControl_1.5.0程序禁用windows安全中心 步骤1--- 步骤2--- 三、禁用widows安全中心成功 一、为什么禁用 描述&#xff1a;下载第三方软件常常会收到病毒防护秒杀&#xff0c; 第1---直接无法下载 第2---提前下载在U盘解压会被干掉程序文件 …...

2.html编辑器介绍

html编辑器介绍 HTML 编辑器推荐 理论上我们可以使用记事本进行html编码和开发&#xff0c;但是在实际开发html页面的时候&#xff0c;使用一些专业的开发工具可以使我们更加快速和高效的进行开发&#xff0c;下面介绍几种开发工具&#xff1a; VS Code&#xff1a;https://…...

树莓派应用--AI项目实战篇来啦-17.YOLOv8目标检测-安全帽检测

1. YOLOv8介绍 YOLOv8是Ultralytics公司2023年推出的Yolo系列目标检测算法&#xff0c;可以用于图像分类、物体检测和实例分割等任务。YOLOv8作为YOLO系列算法的最新成员&#xff0c;在损失函数、Anchor机制、样本分配策略等方面进行了全面优化和创新。这些改进不仅提高了模型的…...

git-secret介绍

git-secret介绍 git-secret 是一个与git兼容的命令行工具,旨在安全地存储和管理敏感数据,如源代码中的密码、密钥以及敏感文件。它通过 GPG 加密来保护文件,确保只有授权的用户才能访问这些敏感信息。 使用流程 1、安装 Git-Secret:在本地开发环境中安装 git-secret。 2…...

【实战】Nginx+Lua脚本+Redis 实现自动封禁访问频率过高IP

大家好&#xff0c;我是冰河~~ 自己搭建的网站刚上线&#xff0c;短信接口就被一直攻击&#xff0c;并且攻击者不停变换IP&#xff0c;导致阿里云短信平台上的短信被恶意刷取了几千条&#xff0c;加上最近工作比较忙&#xff0c;就直接在OpenResty上对短信接口做了一些限制&am…...

计算机专业大一课程:线性代数探秘

计算机专业大一课程&#xff1a;线性代数探秘 对于计算机专业的大一新生来说&#xff0c;线性代数是一门基础且重要的课程。它不仅是数学的一个分支&#xff0c;更是计算机科学中不可或缺的工具。那么&#xff0c;线性代数究竟包含哪些内容&#xff0c;对我们的计算机学习有何…...

vscode写markdown插入图片视频并放在指定目录

目录 前言正文 前言 各种云文档非常好用&#xff0c;但是当你想把这些资料保存在本地时&#xff0c;markdown我觉得是最好的选择 markdown编辑器也有很多&#xff0c;但我还是觉得vscode最好用&#xff0c;直接粘贴文件就可以插入也类似云文档的使用体验&#xff0c;但是想要…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...