uniapp app端 echarts 设置tooltip的formatter不生效问题以及解决办法

需求一: y轴数据处理不同数据增加不同单位
需求二: 自定义图表悬浮显示的内容

需求一:实现方式 在yAxis里面添加formatter
在这里插入图片描述

 yAxis: [{
 //y轴显示value的设置
	  axisLabel: {
      show: true,
	  formatter (value, index) => {
		    var value
		     if (value >= 1000 && value < 10000) {
		         value = value / 1000 + 'k'
		     } else if (value >= 10000) {
		         value = value / 10000 + 'w'
		     } else if (value < 1000) {
		         value = value
		     },
	   	},
      return value
	    color: 'rgba(0,0,0,0.3)',
	    fontSize: '12'
	 },
 }]

问题: formatter 设置未生效 h5可以正常展示能看到单位,但是app端不生效
app端不生效是因为:

在app端,回调函数无法从renderjs外传递,上面的设置使用了回调函数,所以app端不生效。

但是需求功能要使用回调函数才能实现。

查看Echarts组件的代码,发现里面有这样一段代码:
在这里插入图片描述
所以,只需要在函数update(option) {}里面自定义设置相关回调函数即可。

下面是我最终的实现代码
在这里插入图片描述
然后跟update同级添加以下方法(此方法为上方update里面调用)
在这里插入图片描述
在回到调用echarts页面 重新更改下方法

 yAxis: [{
 //y轴显示value的设置
	  axisLabel: {
      show: true,
	formatterFunction: `(value, index) => {
   		var value
        if (value >= 1000 && value < 10000) {
             value = value / 1000 + 'k'
         } else if (value >= 10000) {
             value = value / 10000 + 'w'
         } else if (value < 1000) {
             value = value
         }
         return value
      }`,
      return value
	    color: 'rgba(0,0,0,0.3)',
	    fontSize: '12'
	 },
 }]

这时app端已经可以成功显示了
那需求二就是在此基础上实现可以渲染html代码就可以了

需求二:实现方式 在yAxis里面添加formatter
在这里插入图片描述

对tooltip进行formatter相关的设置

 tooltip: {
	 trigger: 'axis', // axis显示该列下所有坐标轴对应数据,item只显示该点数据
	   formatterFunction: `(params)=>{
	      console.log(params)	//可以先输出看下都有什么内容  
	      // str里面的代码只是部分代码 只演示怎么在这里面写html实现想要的内容样式
	      let str = '<span>'+ params[1].name +'</span></br><span>' +'合计:'+ '</span> <span> '+params[1].value+'</span>'
	      return str; 
	   }`,
	   axisPointer: {
	       type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
	   }
},

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

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

相关文章

Jmeter用于接口测试中,关联如何实现

Jmeter用于接口测试时&#xff0c;后一个接口经常需要用到前一次接口返回的结果&#xff0c;应该如何获取前一次请求的结果值&#xff0c;应用于后一个接口呢&#xff0c;拿一个登录的例子来说明如何获取。 1、打开jmeter, 使用的3.3的版本&#xff0c;新建一个测试计划&#x…

抄写Linux源码(Day6:读闪客文章第一回 “最开始的两行代码”)

按照 Day1 完成了 Linux0.11 的运行之后&#xff0c;可以在 ~/oslab/linux-0.11 找到 linux0.11 的源码 根据闪客的文章第一回&#xff1a;https://mp.weixin.qq.com/s/LIsqRX51W7d_yw-HN-s2DA Linux0.11 的启动代码程序入点在 bootsect.s 里&#xff0c;总共 512 个字节 这…

烘焙小程序蛋糕店烘焙店源码点心店小程序源码

本系统开发使用JAVA技术栈开发 使用uniapp技术栈 支持微信小程序 &#xff0c;对接打印机&#xff0c;对接第三方同城跑腿平台 用户端使用&#xff1a;uniapp 管理端使用&#xff1a;vueelementui 后台服务使用&#xff1a;springbootjpa

Web课堂笔记

Web课堂笔记 文章目录 Web课堂笔记第一周html部分CSS部分php部分 第二周B/S工作原理http协议**块标记** 第三周标准盒状模型标签优先级**伪类选择器**伪元素派生选择器 第四周Flex布局多媒体查询下拉菜单作业 第五周创建一个NodeLocalStorage 和 SessionStorge 异同JQuery作业 …

filebeat kibana elasticsearch 日志监控

解压三个压缩包 一、filebeat的安装部署 1、打开filebeat的配置文件 2、Filebeat inputs 处打开日志输入开关&#xff0c;设置要监控的路径 3、Outputs 输出中设置Elasticsearch output的输出地址 4、配置kibana 的地址 5、执行 ./filebeat setup -e 二、Elasticsearch 安装…

github Recv failure: Connection reset by peer

Recv failure: Connection reset by peer 背景处理ping一下github网页访问一下github项目git配置git ssh配置再次尝试拉取 疑惑点待研究参考 背景 晚上敲着代码准备提交&#xff0c;执行git pull&#xff0c;报错Recv failure: Connection reset by peer。看着这报错我陷入了沉…

SpringBoot百货超市商城系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot框架开发的百货超市系统。首先&#xff0c;这是一个很适合SpringBoot初学者学习的项目&#xff0c;代…

微服务架构的模式介绍

1.微服务架构模式方案 用Scale Cube方法设计应用架构&#xff0c;将应用服务按功能拆分成一组相互协作的服务。每个服务负责一组特定、相关的功能。每个服务可以有自己独立的数据库&#xff0c;从而保证与其他服务解耦。 1.1 聚合器微服务设计模式 聚合器调用多个服务实现应用程…

k8s安装Jenkins

目录 ​编辑 一、环境准备 1.1 环境说明 二、安装nfs 2.1 安装NFS 2.2 创建NFS共享文件夹 2.3 配置共享文件夹 2.4 使配置生效 2.5 查看所有共享目录 2.6 启动nfs 2.7 其他节点安装nfs-utils 三、创建PVC卷 3.1 创建namespace 3.2 创建nfs 客户端sa授权 3.3 创建…

SQL Server数据库 -- 索引与视图

文章目录 一、索引 聚集索引非聚集索引二、视图三、自定义函数 标量函数表值函数四、游标五、总结 前言 在学习完创建库表、查询等知识点后&#xff0c;为了更加方便优化数据库的存储和内容&#xff0c;我们需要学习一系列的方法例如索引与视图等等&#xff0c;从而使我们更加…

SpringBoot项目中使用Lombok插件中Slf4j日志框架

前言&#xff1a;idea需要安装lombok插件&#xff0c;因为该插件中添加了Slf4j注解&#xff0c;可以将Slf4j翻译成 private static final org.slf4j.Logger logger LoggerFactory.getLogger(this.XXX.class); springboot本身就内置了slf4j日志框架&#xff0c;所以不需要单独…

Unity-缓存池

一、.基础缓存池实现 继承的Singleton脚本为 public class Singleton<T> where T : new() {private static T _instance;public static T GetIstance(){if (_instance null)_instance new T();return _instance;} } 1.PoolManager using System.Collections; using S…

中国工商银行长春分行 聚焦融合互促 让机关党建更有活力

党的十八大以来&#xff0c;中国工商银行长春分行党委认真落实中央部署&#xff0c;立足金融工作政治性、人民性的基本原则&#xff0c;深刻把握机关党建的要点、着力破解难点、大力打造亮点&#xff0c;围绕“党建”模式&#xff0c;将党建融入经营管理各个方面&#xff0c;使…

创建邮件服务器(小微企业)

这里写自定义目录标题 目的硬件选型&#xff1a;软件选型&#xff1a;coremail &#xff08;商业版本&#xff09;postfixumail免费开源版本新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适…

docker minio安装

1.介绍 Minio是一款开源的对象存储服务&#xff0c;它可以在任何硬件或云平台上提供高性能、高可用性和高安全性的存储解决方案。Minio最新版是2021年11月发布的RELEASE.2021-11-24T23-19-33Z&#xff0c;它带来了以下几个方面的改进和新特性&#xff1a; - 支持S3 Select AP…

c语言(函数)

目录 何为函数 库函数 自定义函数 二分查找数组下标 链式访问 函数的声明 函数定义 递归 正向打印数字 打印字符个数 使用临时变量 递归(不使用临时变量) n的阶乘 一般形式 递归 斐波那契数 递归 正常做法 何为函数 在计算机科学中&#xff0c;子程序是一个…

Leetcode(一):数组、链表部分经典题目详解(JavaScript版)

数组、链表部分算法题 一、数组1. 二分查找2. 移除数组元素3. 有序数组的平方4. 长度最小的子数组5. 螺旋矩阵 二、链表1. 删除链表元素2. 设计链表3.反转链表4.两两交换链表中的节点5.删除链表倒数第n个节点6.环形链表 提前声明&#xff1a;本博客内容均为笔者为了方便个人理解…

DbVisualizer Pro Crack

DbVisualizer Pro Crack DbVisualizer是适用于开发人员、DBA和分析师的通用数据库工具。它是最终的解决方案&#xff0c;因为相同的工具可以在访问各种数据库的所有主要操作系统上使用。支持的数据库Amazon Redshift、DB2 LUW、Exasol、H2、Informix、JavaDB/Derby、Microsoft …

深度解剖动态内存管理

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大一&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 望小伙伴们点赞&#x1f44d;收藏✨加关注哟&#x1f495;&#x1…

汽车过户时,怎么选到理想的好车牌?

在汽车过户的过程中&#xff0c;选到一副理想的好车牌就像买彩票中大奖一样令人兴奋。但是&#xff0c;怎样找到这样一块车牌呢&#xff1f;这就是本文要探讨的问题。 首先&#xff0c;我们来聊聊选车牌的技巧。很多人喜欢选择有特别数字的车牌&#xff0c;如“8888”、“6666”…