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

news2024/7/4 5:59:54

需求一: 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'
	   }
},

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Uboot实现PSCI

快速链接: . &#x1f449;&#x1f449;&#x1f449; 【目录】ARM/TEE/ATF/SOC微信群问题记录 &#x1f448;&#x1f448;&#x1f448; 付费专栏-付费课程 【购买须知】: 问 &#xff1a; 8核的A72 多核启动 目前用的spin-table的方式&#xff0c;想尝试一下psci方式&…

Redis事务、管道

一.Redis事务 1.概念 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c;按顺序地串行化执行而不会被其它命令插入&#xff0c;不许加塞 2.Redis事务与数据库事物的区别 3.常用命令 4.事务执行情况 正常执行 即整个过程…

全国高校招投标信息在哪里看?

很多投标人在查询招标信息的时候常常没有找到合适的&#xff0c;但是现在网上查询投标信息的网站是很多的。而学校招标信息获取的渠道是比较少的&#xff0c;企业的反而更多一些&#xff0c;那么我们能在那些渠道获取这些信息&#xff1f; 1.教育部网站 教育部提供了招标信息…

LeetCode 周赛上分之旅 # 36 KMP 字符串匹配殊途同归

⭐️ 本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问。 学习数据结构与算法的关键在于掌握问题背后的算法思维框架&#xff0c;你的思考越抽象&#xff0c;它能覆盖的问题域就越广&#xff0c;理解难度…

Java精通 —— 一篇文章弄懂锁

前言 在Java中为了保证操作线程的安全性&#xff0c;我们引入了锁的概念&#xff0c;但随之而来的性能问题让我们在不愿意放弃安全性保证的前提下提出了优化过的锁。在这篇文章中&#xff0c;荔枝会着重梳理不同的锁的概念和普通锁的执行机制相关知识&#xff0c;同时也会对Jav…

【CAS6.6源码解析】深度解析票据淘汰与过期策略-探究数据淘汰策略的设计

票据作为一种时效很敏感的数据&#xff0c;其过期策略的设计对其功能性和性能影响很大。本文将深度解析票据淘汰与过期策略&#xff0c;并基于此探究数据淘汰策略的设计&#xff0c;让我们一起走进企业级中央认证中心CAS的源码&#xff0c;分析其设计的巧妙之处。 文章重点分析…

二十三种设计模式第二十二篇--中介者模式

说到这个模式就有趣了&#xff0c;不知道大家在生活中喷到过中介没&#xff1f;其实中介这个词吧&#xff0c;我也说不上好还是坏&#xff0c;有时候他可以帮助人们更快的达到某个目的&#xff0c;但有的时候吧&#xff0c;这个有贼坑人&#xff0c;相信网络上有各种被中介坑的…

Redis场景应用:详细实现网站粉丝关注与展示的功能

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。多年电商行业从业经验&#xff0c;对系统架构&#xff0c;数据分析处理等大规模应用场景有丰富经验。 &#x1f3c6;本文…

嵌入式Linux下 i2c-tool工具的使用方法 包括i2cdetect、i2cget、i2cset、i2cdump、i2ctransfer

要想用Linux i2c-tools必须安装如下套件&#xff0c;安装后就可以使用i2cdetect、i2cdump、i2cset、i2cget、i2ctransfer了。 sudo apt install i2c-tools -yi2cdetect命令 该命令用于扫描I2C总线上的设备。 语法&#xff1a;i2cdetect [-y] [-a] [-q|-r] i2cbus [first las…

[论文笔记] chatgpt系列 2.6 DeepSpeed-chat 数据集

一、FT数据集 & Reward model数据集 Deepspeed-chat 源代码的数据集: Dahoas/rm-static: 这是一个用于强化学习的静态环境数据集,包含了一个机器人在一个固定环境中的运动轨迹。该数据集旨在用于评估强化学习算法在静态环境下的表现。 Dahoas/full-hh-rlhf: 这是一个用于…

二十三种设计模式第二十四篇--访问者模式(完结撒花)

在访问者模式&#xff08;Visitor Pattern&#xff09;中&#xff0c;我们使用了一个访问者类&#xff0c;它改变了元素类的执行算法。 通过这种方式&#xff0c;元素的执行算法可以随着访问者改变而改变。 这种类型的设计模式属于行为型模式。根据模式&#xff0c;元素对象已接…

openGauss学习笔记-27 openGauss 高级数据管理- JOIN

文章目录 openGauss学习笔记-27 openGauss 高级数据管理- JOIN27.1 交叉连接27.2 内连接27.3 左外连接27.4 右外连接27.5 全外连接 openGauss学习笔记-27 openGauss 高级数据管理- JOIN JOIN子句用于把来自两个或多个表的行结合起来&#xff0c;基于这些表之间的共同字段。 在…

SLA探活工具EaseProbe

工具介绍 EaseProbe可以做三种工作&#xff1a;探测、通知和报告。 项目地址&#xff1a;https://github.com/megaease/easeprobe 1、安装 [rootlocalhost ]# yum -y install unzip go [rootlocalhost ]# unzip easeprobe-main.zip [rootlocalhost ]# cd easeprobe-main [r…

如祺出行冲刺自动驾驶商业化,人少的地方机会多?

网约车&#xff0c;正在迎来让人“不明觉厉”的新一轮竞赛。 网约车监管信息交互系统的数据显示&#xff0c;截至今年6月30日&#xff0c;全国共有318家网约车平台公司取得网约车平台经营许可&#xff0c;环比增加5家&#xff1b;网约车监管信息交互系统6月份共收到订单信息7.…

作为新手小白,你应该了解的五个3DMAX的使用干货小技巧!

3Dmax是一款著名的三维建模和动画制作软件&#xff0c;广泛应用于建筑设计、影视特效、游戏开发等领域。对于初学者来说&#xff0c;熟练掌握一些干货小技巧&#xff0c;可以帮助大家更快地上手和使用这款强大的软件。 一、学习基础操作技巧 首先&#xff0c;你需要学习一些基…

留存测试数据,Apipost接口用例详解

接口用例可以在不影响源接口数据的情况下对接口添加多个用例&#xff0c;方便测试并保存测试数据。 创建用例 左侧目录选择接口后进入接口用例页面&#xff0c;点击添加用例 在弹出窗口中修改各种参数。如登录接口&#xff0c;可修改用户名为空&#xff0c;并添加断言。 执行…

【phaser微信抖音小游戏开发006】给文本增加点击事件

新建st006&#xff0c;为文本增加点击事件。 我们加了一个计数的count&#xff0c;点击一次增加一下&#xff0c;并显示到屏幕上去。 效果如下图&#xff1a; 其它的对象以此类推即可&#xff0c;先置inputEnable为true,然后再增加一个inputDown事件即可。

IO进程线程day4(2023.8.1)

一、Xmind整理&#xff1a; 进程的五态图&#xff1a; 内存分布图&#xff1a; 注&#xff1a;栈区&#xff1a;存储局部变量&#xff0c;形参&#xff08;上边打错了&#xff01;&#xff01;&#xff01;&#xff09; 虚拟内存和物理内存&#xff1a; 进程的STAT&#xff1a…

C++设计模式之装饰者模式

文章目录 C装饰者设计模式什么是装饰者模式优缺点优点缺点 如何使用 C装饰者设计模式 什么是装饰者模式 装饰者模式是一种设计模式&#xff0c;它允许我们动态地将行为附加到对象上&#xff0c;而无需改变对象本身的定义。它将一个对象的行为包装在一个独立的的对象中&#xf…

数据库事务--数据库事务隔离级别实战

2、演示环境 数据库及工具 ➢MySQL版本 5.5.47 ➢数据库工具 Navicat for MySQL 数据库命令 ➢查看数据库版本: select version();➢查看数据库现在的隔离级别: select session.tx_ isolation;➢修改隔离级别: set session.tx_ _isolation级别参数;➢级别参数: READ-UN…