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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【论文阅读】Learning a Few-shot Embedding Model with Contrastive Learning

使用对比学习来学习小样本嵌入模型 引用&#xff1a;Liu, Chen, et al. “Learning a few-shot embedding model with contrastive learning.” Proceedings of the AAAI conference on artificial intelligence. Vol. 35. No. 10. 2021. 论文地址&#xff1a;下载地址 论文代码…

沉浸式娱乐新纪元,什么是5G+实时云渲染VR大空间解决方案?

近年来&#xff0c;虚拟现实&#xff08;VR&#xff09;技术在娱乐、教育、医疗等多个领域展现出巨大的潜力&#xff0c;尤其是VR大空间体验&#xff0c;更是以其沉浸式和互动性的特点&#xff0c;迅速成为市场的新宠。据Statista数据显示&#xff0c;2023年&#xff0c;全球虚…

【笔记】Day2.5.1查询运费模板列表(未完

&#xff08;一&#xff09;代码编写 1.阅读需求&#xff0c;确保理解其中的每一个要素&#xff1a; 获取全部运费模板&#xff1a;这意味着我需要从数据库中查询所有运费模板数据。按创建时间倒序排序&#xff1a;这意味着查询结果需要根据模板的创建时间进行排序&#xff0…

【Java】集合中单列集合详解(一):Collection与List

目录 引言 一、Collection接口 1.1 主要方法 1.1.1 添加元素 1.1.2 删除元素 1.1.3 清空元素 1.1.4 判断元素是否存在 1.1.5 判断是否为空 1.1.6 求取元素个数 1.2 遍历方法 1.2.1 迭代器遍历 1.2.2 增强for遍历 1.2.3 Lambda表达式遍历 1.2.4 应用场景 二、…

【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

aws(学习笔记第二课) AWS SDK(node js)

aws(学习笔记第二课) 使用AWS SDK&#xff08;node js&#xff09; 学习内容&#xff1a; 使用AWS SDK&#xff08;node js&#xff09; 1. AWS SDK&#xff08;node js&#xff09; AWS支持多种SDK开发(除了AWS CLI&#xff0c;还支持其他的SDK) AndroidPythonNode.js(Javas…

数据结构-C语言顺序栈功能实现

栈 栈&#xff1a;类似于一个容器&#xff0c;如我们生活中的箱子&#xff0c;我们向箱子里放东西&#xff0c;那么最先放的东西是最后才能拿出来的 代码实现 #include <stdio.h> #include <stdlib.h>#define MAX_SIZE 100typedef struct {int* base; // 栈底指针…

[Linux#65][TCP] 详解 延迟应答 | 捎带应答 | 流量控制 | 拥塞控制

目录 一、延迟应答 二、捎带应答 三. 流量控制 总结 四. 拥塞控制 1. 拥塞控制 2. 慢启动机制&#xff1a; 3.思考 4.拥塞避免算法 5. 快速恢复算法 一、延迟应答 1. 立即应答问题 接收数据的主机若立刻返回ACK应答&#xff0c;可能返回的窗口较小。例如&#xff1…

univer实现excel协同

快速入门 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><script src&q…

怎么看待数字化转型是大势所趋?

怎么看到数字化转型是大势所趋&#xff1f;下面我结合最新数据给大家讲明白这个事。 近日&#xff0c;我通过大量的数据相关性分析&#xff0c;有了一些关键发现。 【数字化转型】之所以势在必行&#xff0c;主要是因为数字化转型为各个国家数字经济发展提供了重要的参考依据。…

使用js和canvas实现简单的网页贪吃蛇小游戏

玩法介绍 点击开始游戏后&#xff0c;使用键盘上的↑↓←→控制移动&#xff0c;吃到食物增加长度&#xff0c;碰到墙壁或碰到自身就游戏结束 代码实现 代码比较简单&#xff0c;直接阅读注释即可&#xff0c;复制即用 <!DOCTYPE html> <html lang"en"…

SAP将假脱机(Spool requests)内容转换为PDF文档[RSTXPDFT4]

将假脱机(Spool requests)内容转换为PDF文档[RSTXPDFT4] 有时需要将Spool中的内容导出成PDF文件&#xff0c;sap提供了一个标准程序RSTXPDFT4可以实现此功能。 1, Tcode:SP01, 进入spool requests list 2, SE38 运行程序RSTXPDFT4 输入spool reqeust号码18680&#xff0c;然后…

im架构分享 即时通讯架构 即时消息 全球架构师峰会im分享 im分布式 企业级im架构 分布式im 即时通讯im架构

1. 之前收藏的淘宝李厉岷老师在全球架构师峰会上做的im技术分享&#xff0c;贴出来备注下。 2. 李老师infoQ主页链接&#xff1a; 李历岷 3. 文章&#xff1a; 电商IM消息系统架构演进_ArchSummit_李历岷_InfoQ精选文章 4. ppt下载地址 &#xff08;注&#xff1a;同期还有…

GAN(Generative Adversarial Nets)

GAN(Generative Adversarial Nets) 引言 GAN由Ian J. Goodfellow等人提出&#xff0c;是Ian J. Goodfellow的代表作之一&#xff0c;他还出版了大家耳熟能详的花书&#xff08;Deep Learning深度学习&#xff09;&#xff0c;GAN主要的思想是同时训练两个模型&#xff0c;生成…

蓝桥杯刷题--幸运数字

幸运数字 题目: 解析: 我们由题目可以知道,某个进制的哈沙德数就是该数和各个位的和取整为0.然后一个幸运数字就是满足所有进制的哈沙德数之和.然后具体就是分为以下几个步骤 1. 我们先写一个方法,里面主要是用来判断,这个数在该进制下是否是哈沙德数 2. 我们在main方法里面调用…

推荐几本编程入门书目

对于编程入门&#xff0c;推荐以下几本书籍&#xff0c;这些书籍覆盖了不同的编程语言&#xff0c;适合零基础的学习者逐步掌握编程基础&#xff1a; 1. 《Python编程快速上手——让繁琐工作自动化》 特点&#xff1a;以简单易懂的方式介绍了Python的基础知识和编程概念&#…

【最新华为OD机试E卷-支持在线评测】构成正方形的数量(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ,一枚热爱算法的程序员 💻 ACM金牌🏅️团队 | 大厂实习经历 | 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…

vue实现列表自动滚动(纯与原生方式)

Vue实现列表自动滚动(纯与原生方式) 源码放在最后&#xff01;1.效果展示: 2.功能说明: 该滚动可能存在的Bug&#xff1a; 1.如果你写的大屏不是使用的接口轮询的方式可能会存在也页面空白的情况(需要手动刷新才能触发列表滚动)&#xff0c;因为我使用的是监听数据的变化然后…

【C++】关联式容器——map和set的使用

文章目录 一、 序列式容器和关联式容器二、set的介绍1.set的构造和迭代器2.set的增删查3.接口lower_bound和upper_bound4.multiset和set的差异 三、map的介绍1.map的构造2.map的增删查3.multimap和map的差异 四、map和set相关OJ 一、 序列式容器和关联式容器 序列式容器&#…

WordPress添加meta标签做seo优化

一、使用function.php文件添加钩子函数添加 方法1、使用is_page()判断不同页面的page_id进行辨别添加不同页面keyword和description &#xff08;1&#xff09;通过页面前台源码查看对应页面的id &#xff08;2&#xff09;或者通过wordpress后台&#xff0c;点击页面列表&…