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

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

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

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

 yAxis: [{//y轴显示value的设置axisLabel: {show: true,formatter (value, index) => {var valueif (value >= 1000 && value < 10000) {value = value / 1000 + 'k'} else if (value >= 10000) {value = value / 10000 + 'w'} else if (value < 1000) {value = value},},return valuecolor: '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 valueif (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 valuecolor: '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'}
},

相关文章:

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

需求一&#xff1a; y轴数据处理不同数据增加不同单位 需求二&#xff1a; 自定义图表悬浮显示的内容 需求一&#xff1a;实现方式 在yAxis里面添加formatter yAxis: [{//y轴显示value的设置axisLabel: {show: true,formatter (value, index) > {var valueif (value > 1…...

Spring入门-技术简介、IOC技术、Bean、DI

前言 Spring是一个开源的项目&#xff0c;并不是单单的一个技术&#xff0c;发展至今已形成一种开发生态圈。也就是说我们可以完全使用Spring技术完成整个项目的构建、设计与开发。Spring是一个基于IOC和AOP的架构多层j2ee系统的架构。 SpringFramework&#xff1a;Spring框架…...

深度学习之反向传播

0 特别说明 0.1 学习视频源于&#xff1a;b站&#xff1a;刘二大人《PyTorch深度学习实践》 0.2 本章内容为自主学习总结内容&#xff0c;若有错误欢迎指正&#xff01; 1 forward&#xff08;前馈运算&#xff09;过程 通过输入相应的x和权重w&#xff08;可能涉及bais偏置…...

网络安全 Day23-mariadb数据库数据管理和备份

mariadb数据库数据管理和备份 1. 管理数据库中的库2. 管理库中的表3. 管理表中的字段(列)4. 管理表中的数据(行)5. 数据库数据备份与恢复 1. 管理数据库中的库 进入指定数据库: use 数据库名字库的增删改查 创建数据库: create database 数据库名字指定字符及创建数据库: CREA…...

Centos7 上安装 redis-dump 和redis-load 命令

一、安装rvm 1、安装GPG keys gpg2 --keyserver keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDBcurl -sSL http://rvm.io/mpapis.asc | gpg2 --import - curl -sSL http://rvm.io/pkuczynski.asc | g…...

【NLP PyTorch】字符级RNN循环网络模型姓氏对应国家分类(项目详解)

字符级RNN模型姓氏对应国家分类 1 序言1 数据来源与加载1.1 数据来源1.2 数据加载2 数据预处理2.1 单个字符数据处理标准2.2 单词的张量构造3 模型创建4 模型训练5 模型检验6 模型预测7 模型部署1 序言 本文的任务主要来源于PyTorch的官方教程,即给定各国人名的数据集,你需要…...

C++设计模式之责任链设计模式

C责任链设计模式 什么是责任链设计模式 责任链设计模式是一种行为型设计模式&#xff0c;它允许多个处理请求的对象串联起来&#xff0c;形成一个处理请求的链。每个对象都有机会处理请求&#xff0c;如果该对象不能处理请求&#xff0c;则将请求传递给链中的下一个对象。 该…...

《Java-SE-第二十三章》之单例模式

文章目录 单例模式概述饿汉模式懒汉模式单线程版懒汉单例多线程版枚举实现单例 单例模式概述 单例模式是设计模式中的一种,其作用能保证某个类在程序中只存在唯一一份实例,而不会创建多份实例。单例模式具体的实现方式, 分成 “饿汉” 和 “懒汉” 两种.。饿汉模式中的饿不并不…...

如何快速同步第三方平台数据?

全量的数据主要是针对多个系统的历史数据,大概有几千万数据,只需要初始化一次即可。 而增量的数据,是系统后续变更的数据。 这个需求其实不简单,至少有以下难点: 不能直接访问第三方数据库。 不能将历史数据导出到excel中,有泄露数据的风险。 如何快速同步历史数据? 增…...

反射(一)

动态 VS 静态语言 动态语言&#xff1a;运行时&#xff0c;可以改变其结构。 Object-C、C#、JS、PHP、Python JS 就是动态语言。 function f() {var x "var a3; var b5; alert(ab)";eval(x); }静态语言&#xff1a;运行时&#xff0c;结构不可变。 Java、C、C J…...

29.利用fminbnd 求解 最大容积问题(matlab程序)

1.简述 用于求某个给定函数的最小值点。 使用方法是&#xff1a; xfminbnd(func,x1,x2) func是函数句柄&#xff0c;然后x1和x2就是函数的区间&#xff0c;得到的结果就是使func取最小值的x值 当然也可以使用[x,fv]fminbnd(func,x1,x2)的方式&#xff0c;这个时候fv就是函数…...

express学习笔记7 - docker跟mysql篇

安装Docker和Navicat Docker 进官⽹https://docs.docker.com/get-docker/ 选择机型安装即可。 Navicat&#xff08;也可以在网上找个破解版本&#xff09; 进官⽹https://www.navicat.com/en/products/navicat-premium 安装完之后连接新建⼀个数据库连接 然后再⾥⾯新建⼀个数…...

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

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

内网穿透的底层原理是什么

目录 内网穿透的功能 内网穿透的底层原理 内网穿透的功能 前段时间研究了一下内网穿透&#xff0c;果真是一个神奇的技术&#xff0c;就拿企业级内网穿透-神卓互联来说&#xff0c;在需要在本地安装一个神卓互联客户端&#xff0c;简单设置一下服务应用的端口号&#xff0c;就…...

Bash配置文件

当Bash以登录Shell启动的时候&#xff0c;会首先读取并执行文件“/etc/profile”中的命令。 接着&#xff0c;Bash会依次查找文件“~/.bash_profile”&#xff0c;“~/.bash_login”&#xff0c;“~/.profile”&#xff0c;读取并执行找到的第一个文件中的命令。也就是说&…...

写Acknowledgement的时候,latex日志出现警告

用latex写论文的时候&#xff0c;\section{Conclusion}下面添加 \backmatter \bmhead{Acknowledgments}时报错&#xff1a;错误log&#xff1a; \bmhead Package hyperref Warning: Difference (4) between bookmark levels is greater than one, level....错误原因&#xff…...

GCC生成map文件

要生成GCC的map文件&#xff0c;可以使用以下指令&#xff1a; gcc <source_files> -Wl,-Map<output_file>.map 其中&#xff0c; <source_files>是要编译的源文件列表&#xff0c;<output_file>是生成的map文件的名称-Wl选项告诉GCC将后面的参数传…...

IOS看书最终选择|源阅读转换|开源阅读|IOS自签

环境&#xff1a;IOS想使用 换源阅读 问题&#xff1a;换新手机&#xff0c;源阅读下架后&#xff0c;没有好的APP阅读小说 解决办法&#xff1a;自签APP 转换源仓库书源 最终预览 &#xff1a;https://rc.real9.cn/ 背景&#xff1a;自从我换了新iPhone手机&#xff0c;就无法…...

easyui实用点

easyui实用点 1.下拉框&#xff08;input框只能选不能手动输入编辑&#xff09; data-options"editable:false"//不可编辑2.日期框&#xff0c;下拉框&#xff0c;文本框等class class"easyui-datebox"//不带时分秒 class"easyui-datetimebox"…...

算法训练营第五十六天||● 583. 两个字符串的删除操作 ● 72. 编辑距离 ● 编辑距离总结篇

● 583. 两个字符串的删除操作 这道题涉及到两个字符串删除操作&#xff0c;注意递推公式&#xff0c;理解不到位&#xff0c;需要再次做 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff1a;以i-1为结尾的字符串word1&#xff0c;和以j-1位结尾…...

SQLines数据库迁移工具终极指南:5分钟快速上手跨平台SQL转换

SQLines数据库迁移工具终极指南&#xff1a;5分钟快速上手跨平台SQL转换 【免费下载链接】sqlines SQLines Open Source Database Migration Tools 项目地址: https://gitcode.com/gh_mirrors/sq/sqlines 在当今多元化的数据库环境中&#xff0c;数据库迁移和SQL转换已成…...

Linux下解决FlexNet Publisher依赖缺失问题

1. 问题现象与初步诊断最近在Linux服务器上部署FlexNet Publisher许可证管理服务时&#xff0c;遇到了一个典型问题&#xff1a;执行lmgrd启动命令后系统报错No such file or directory。这个错误看似简单&#xff0c;但实际上可能涉及多个层面的问题。作为长期从事企业级软件部…...

你的脑洞,值得被“电”亮!TimechoAI 有奖反馈征集令!

五月初&#xff0c;我们“官宣”了将时序大模型“上云”的智能服务平台&#xff1a;TimechoAI&#xff0c;无门槛体验&#xff0c;注册即能试用全部功能&#xff01;体验过 TimechoAI 的你&#xff0c;心里一定有点想法吧&#xff1f;是惊喜&#xff1f;是建议&#xff1f;还是…...

LERF:将语言嵌入3D辐射场,实现开放词汇的3D语义查询

1. 项目概述&#xff1a;当语言成为3D场景的“探针”如果你玩过NeRF&#xff08;神经辐射场&#xff09;&#xff0c;肯定被它从几张2D照片生成逼真3D场景的能力震撼过。但不知道你有没有和我一样的感受&#xff1a;生成的3D模型虽然好看&#xff0c;但像个“美丽的哑巴”。我们…...

JS逆向实战:加密库动态Hook的工程化落地方法

1. 这不是写个console.log就能搞定的事&#xff1a;为什么主流加密库的Hook总在关键时刻失效“JS逆向实战&#xff1a;一键Hook主流加密库的调试与拦截”——看到这个标题&#xff0c;很多刚入行的朋友第一反应是&#xff1a;“不就是给CryptoJS、SM2、RSA.js这些库的encrypt方…...

航空航班延误预测:可解释性模型与四源融合实战

1. 项目概述&#xff1a;这不是一个“预测准不准”的问题&#xff0c;而是一个“预测有没有用”的问题我做航班延误预测项目&#xff0c;不是为了在Kaggle排行榜上刷个0.89的AUC就收工。真正让我在凌晨三点改完第17版特征工程脚本、盯着滚动的日志等模型收敛的&#xff0c;是去…...

Anthropic率先盈利:大模型商业化曙光初现,IPO竞争谁能笑到最后?

1. 前沿模型盈利曙光乍现前沿模型公司的利润表终于出现了正数。据《华尔街日报》报道&#xff0c;Anthropic正迎来关键季度&#xff0c;预计2026年第二季度收入超109亿美元&#xff0c;较第一季度的48亿美元增长超一倍&#xff0c;且首次实现季度营业利润。路透社称其二季度预计…...

选RFID仓储管理系统厂家别只盯着参数!老采购教你用场景思维找到真正靠谱的供应商

很多企业在选型RFID仓储管理系统时&#xff0c;第一反应是翻遍全网找“RFID智能仓储管理系统厂家有哪些”&#xff0c;然后把七八家供应商的参数表摊在桌上逐一对比。读取速度多少、识别距离多远、支持多少标签同时读取——这些指标当然重要&#xff0c;但如果你的选型逻辑仅停…...

Claude Mythos:首个具备自主渗透能力的通用AI安全模型

1. 这不是一次普通升级&#xff1a;Mythos 的能力跃迁到底意味着什么 如果你过去三年一直在跟进大模型的演进节奏&#xff0c;大概率会记得2023年Claude 2发布时那种“稳扎稳打”的观感——推理更连贯、长文本更可靠、代码能力有提升&#xff0c;但整体仍属于渐进式优化。2024年…...

AI 自动剪辑不是‘一键成片’:90% 的技术团队踩在逻辑断层与工程适配陷阱里

当团队首次将「AI 自动剪辑」纳入短视频生产管线时&#xff0c;最典型的误判是把它当作一个黑盒触发器&#xff1a;导入原始素材 → 点击「智能剪辑」→ 导出成品。这种认知忽略了背后三重断裂——语音转写与气口检测的精度断层、镜头语义理解与叙事逻辑的错位、以及单机操作与…...