uniapp 使用uchart组件,自定义提示窗ToolTip中的内容 (tooltip提示窗format)数据量较大,放大点击区域_uni-tooltip-程序员宅基地

技术标签: 方法  tooltip自定义  uchart  uniapp  format  修改默认样式  

效果如图:

提示窗ToolTip中内容模板: xx浓度:xx ppm 数字量:xx mv
在这里插入图片描述

在这里插入图片描述
蓝色折线图 提示窗内容很好展示,关键是红色点内容不太好展示。

首先:
1.在template中定义 使用官方文档中的:tooltip提示窗format属性
在这里插入图片描述
2. 同样的需要在源码中进行修改,找到 config-charts.js文件 中的 formatter
3. 添加tooltipTemp1方法
在这里插入图片描述
这里边比较复杂的是,数据比较多,蓝色折线有9000多的数据点,红色部分有7个数据点,浓度展示 是只有红色点部分才会有浓度(效果图图一),蓝色部分只需要展示数字量(效果图图二),因为是手机端,数据量较大,红色点部分比较小,很难点住对应的点,弹窗内容正确显示

所以在方法里做了一个放大区域处理 代码如下

const dot = opts.series[1].newArray.find(r => index > r.index - 70 && index< r.index + 70)

完整代码如下:
template:

<qiun-data-charts style="flex: 1;" 
			   type="tline" 
			   :opts="opts" 
			   :eopts="{seriesTemplate:{smooth:true}}"
			   background="#ffffff" 
			   :chartData="ptData" 
			   tooltipFormat="tooltipTemp1" 
			/>

data中定义相关数据,初始化:

ptData: {
					"categories": [],
					"series": [{
							"name": "气体浓度",
							"data": [],
							// 'textSize': 0.1,
						},
						{
							"data": [],
							name: '点',
							color: "#f04864",
							newArray: [],
							'textSize': 8,
						}
					],
				},
opts: {
					extra: {
						line: {
							type: 'straight',
							width: 1
						},
					},
					legend: {
						show: false
					},
					dataPointShape: false,
					xAxis: {
						disableGrid: true,
						labelCount: 8,
					},
					yAxis: {
						disabled: false,
						showTitle: true,
						data: [{
							min: 0,
							max: 300,
							position: "left",
							title: "μV",
						}]
					},
					rotate: false,
			},

methods方法中:

// 谱图数据
			getDiagnosiSpectrogram() {
				const params = {
					id: this.id
				};
				EquipmentService.getDiagnosiSpectrogram(params).then((res) => {
					if (res.code == 10000) {
						const dots = res.results.dots.map(item => {
							return item.peakPointTime
						})
						const series0 = []
						const seconds = []
						res.results.datas.forEach((r2, index) => {
							const find = res.results.dots.find(r => r.peakPointTime === index)
							if (find) {
								series0.push({
									value: r2,
									...find
								})
								seconds.push({
									value: r2 + ""
								})
							} else {
								series0.push({
									value: r2
								})
								seconds.push(null)
							}
                       })
						this.ptData.series[0].data = series0;
						this.opts.yAxis.data[0].max = res.results.yMax;
						this.opts.yAxis.data[0].title = res.results.yUnit;
						this.ptData.series[1].data = seconds

						this.ptData.categories = res.results.datas;
						this.ptData.series[1].newArray = res.results.dots.map(item => {
							return {
								name: item.componentName + '(' + item.peakHeight + ')',
								nd: item.componentName,
								ndValue: item.peakHeight,
								index: item.peakPointTime
							}
						});

						this.ptData.series[0].format = "seriesDemo2"
						this.ptData.series[1].format = "seriesDemo1"
					}
				});
			},

config-charts.js文件中的方法:

//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
	"formatter": {
	"tooltipTemp1": function(item, category, index, opts) {
		console.log(item, 'item')
		console.log(category, 'category')
		console.log(opts, 'opts')
		const dot = opts.series[1].newArray.find(r => index > r.index - 70 && index< r.index + 70)
		if (dot) {
			return `${dot.nd}浓度:${dot.ndValue}ppm 数字量:${category}mv`
		} else {
			return ` 数字量:${category}mv`
		}
	}

接口返回数据格式:
datas:蓝色折线数据(9000个数据点)
dots:红色点数据(7个数据点)
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Maxueyingying/article/details/124885709

智能推荐

列表分割&字符串分割-程序员宅基地

列表分割&字符串分割字符串分割(slipt)问题如果不想丢失数据,怎么分割字符串?如何分割列表?1. 分割列表等距分割列表类似split函数,丢失分割字符分割列表2.分割字符串(不丢失)字符串分割(slipt)字符串分割有split函数语法:string_name.split(分割字符, num)丢失用于分割的字符,返回数据个数为(num+1)的列表。问题如果不想丢失数据,怎么..._列表分割

【高级】C++中虚函数机制的实现原理-程序员宅基地

多态是C++中的一个重要特性,而虚函数却是实现多态的基石。所谓多态,就是基类的引用或者指针可以根据其实际指向的子类类型而表现出不同的功能。这篇文章讨论这种功能的实现原理,注意这里并不以某个具体的编译器为参照。1、虚函数表的构造class A{public: int data; virtual void foo_0(){} virtual ~A(){}};..._c++中虚函数的实现原理

五、python学习笔记:内存管理-程序员宅基地

变量和内存管理的 细节, 包括:变量无须事先声明 变量无须指定类型 程序员不用关心内存管理 变量名会被“回收” del 语句能够直接释放资源1、变量定义变量只有被创建和赋值后才能被使用2、动态类型还要注意一点,Python 中不但变量名无需事先声明,而且也无需类型声明。Python 语言中, 对象的类型和内存占用都是运行时确定的。尽管代码被编译成字节码,Python 仍然...

在IDEA中编写Spark的WordCount程序-程序员宅基地

1:spark shell仅在测试和验证我们的程序时使用的较多,在生产环境中,通常会在IDE中编制程序,然后打成jar包,然后提交到集群,最常用的是创建一个Maven项目,利用Maven来管理jar包的依赖。2:配置Maven的pom.xml:&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;project xmlns="http:..._tests run: 1, failures: 0, errors: 1, skipped: 0, time elapsed: 2.838 s <<< failure! - in com.example.springboot_mybatis.springb

【c++小白自学笔记】构造函数的类型-程序员宅基地

该类对象被创建时,编译系统对象分配内存空间,并自动调用该构造函数,由构造函数完成成员的初始化工作,故:构造函数的作用:初始化对象的数据成员。有对象才有构造函数。构造函数的分类:一. 默认构造函数即未自定义构造函数,是空的,无作用cstu(){}二.无参数的构造函数cstu(){}三.带参数的构造函数#include &lt;iostream&gt;...

25个让Java程序员更高效的Eclipse插件-程序员宅基地

首页最新文章IT 职场前端后端移动端数据库运维其他技术- 导航条 -首页最新文章IT 职场前端- JavaScript- HTML5- CSS后端- Python- Java- C/C++- PHP- .NET- Ruby- Go移动端- Androi...

随便推点

Windows下使用记事本编辑MySQL db.sql报中文错误_用记事本写的.sql-程序员宅基地

即便已经设置了utf-8字符集DROP DATABASE IF EXISTS `db_lab2`;CREATE DATABASE `db_lab2` DEFAULT CHARACTER SET utf8;USE `db_lab2`;CREATE TABLE `tb_student`( `pk_sno` INT(10) UNSIGNED AUTO_INCREMENT COMMENT '学..._用记事本写的.sql

Javaweb——JQuery、AJAX、JSON(略述)_javaweb中ajax、json以及jquery技术-程序员宅基地

(略述)JQuery 基础×概念: 一个JavaScript框架。简化JS开发,优化HTML文档操作、事件处理、动画设计和Ajax交互。( jquery-xxx.js 与 jquery-xxx.min.js区别:1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快)JQuery对象和JS对象区别与转换:3. 两者相互转换* jq – > js : jq对_javaweb中ajax、json以及jquery技术

AIX 10G HA RAC卸载-程序员宅基地

删除1:crs_stat–t资源都停掉2:停ha3:删除oracle4:删除crs5:删除hasmithacmp6:删除vgexportvg7;卸载hacmpsmitty转载于:https://www.cnblogs.com/liang545621/p/9416989.html..._aix 如何删除ha vg

asp.net中一般处理程序和普通类文件使用HttpContext对象_httpcontext处理文件-程序员宅基地

在asp.net中,web窗体文件可以方便的使用httpContext对象,调用session、request等方法,但是在一般处理程序中却没有办法直接使用,但是依然是有办法的。  1、在一般处理程序(ashx)中使用  因为在一般处理程序中已经构建了httpContext对象,直接使用context.Request、context.Response、context.Session_httpcontext处理文件

uC/OS任务创建函数OSTaskCreate ()参数详解_ostaskcreate的各个参数的含义-程序员宅基地

要使用uC/OS的任务必须先声明任务控制块和创建任务,调用OSTaskCreate ()函数可以创建一个任务。OSTaskCreate ()函数的信息如下表所示。_ostaskcreate的各个参数的含义

Centos7下hadoop安装与伪分布式搭建,详细-程序员宅基地

最近在学习大数据,需要用到hadoop,记录一下在centos7系统下搭建的步骤,与碰到的问题对于hadoop环境的搭建与安装首先需要明白自己要做什么(初学者不要一股脑的照着网上的教程敲敲敲,事后却不知道自己在做什么),这是我总结的一些步骤:安装java,配置java环境变量 解压hadoop,配置hadoop环境变量 修改ssh通讯,修改为免密码登录 修改Hadoop配置文件 启...

推荐文章

热门文章

相关标签