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'}
},

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

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

相关文章

怎么让表格中的一行数据 转置 为一列数据 (WPS )

例如 我现在有一列数据 我想要 变成一行 数据 1.首先选中想要转置的数据&#xff0c;然后control C 2.接着 点击你想放置数据的位置 右键 其实 关键是 找到 选择性复制 3. 找到转置&#xff0c;勾选 最后 确定 反之亦然

【Jmeter】 Report Dashboard 生成html图形测试报告

目录 背景 生成图形报告的方式 1、直接使用一个已存在的 CSV文件生成 2、负载测试完成后自动生成 使用示例 报告内容详情 测试报告摘要图 响应时间随时间变化曲线 活跃线程随时间变化曲线 I/O&#xff08;Bytes&#xff09;随时间变化曲线(忽略事务控制器示例结果) …

有哪些开源和非开源的项目管理工具?

开源和非开源项目管理工具各有其特点和优势。下面是一些常见的开源和非开源项目管理工具以及它们的简要介绍。 开源项目管理工具&#xff1a; OpenProject&#xff1a;OpenProject 是一个功能强大、易于使用的开源项目管理工具。它提供了项目计划、任务管理、团队协作、文档管…

http和https的区别?(网络通讯)

HTTP&#xff1a; 超文本传输协议&#xff08;HTTP&#xff0c;HyperText Transfer Protocol&#xff09;是互联网上应用最为广泛的一种 网络协议 HTTPS&#xff1a; 是以安全为目标的 HTTP 通道&#xff0c;是 HTTP 的安全版。HTTPS 的安全基础是 SSL。 两者区别: 1、HTTPS …

# Windows 环境下载 Android 12源码

前言 Android 官网&#xff08;该方式不适合 Windows 平台&#xff09;&#xff1a;https://source.android.com/source/downloading.html (备注自 2021 年 6 月 22 日起&#xff0c;安卓操作系统不再支持在 Windows 或 MacOS 上进行构建&#xff0c;如果要编译源码推荐先安装…

Nginx配置WebSocket反向代理

1、WebSocket协议 ​ WebSocket协议相比较于HTTP协议成功握手后可以多次进行通讯&#xff0c;直到连接被关闭。但是WebSocket中的握手和HTTP中的握手兼容&#xff0c;它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket。这使得WebSocket程序可以更容易的使用现已存在的…

C#使用libmodbus库与工业设备进行读写测试

一.编译libmodbus库供C#使用 如何编译&#xff1f;请移步&#xff1a;https://blog.csdn.net/weixin_42205408/article/details/119530811 上面博主的文章除了所写的modbus.cs内的代码有点问题外&#xff08;可能上面博主和我的Win 10 64位 Visual Studio 2019平台不一样吧&a…

如何在群晖nas中使用cpolar内网穿透?

如何在群晖nas中使用cpolar内网穿透 文章目录 如何在群晖nas中使用cpolar内网穿透 今天&#xff0c;我们来为大家介绍&#xff0c;如何在群晖系统中&#xff0c;使用图形化界面的cpolar。 cpolar经过图形化改造后&#xff0c;使用方法已经简便了很多&#xff0c;基本与其他应用…

为什么流程工业需要合适的预测性维护方案?

在当今工业中&#xff0c;预测性维护是一项至关重要的战略&#xff0c;它能够帮助企业预测设备故障并防止代价高昂的停机。然而&#xff0c;对于流程制造和离散制造来说&#xff0c;选择合适的预测性维护解决方案是至关重要的&#xff0c;因为这两类行业在设备运营和维护方面存…

redis缓存

1.什么是缓存 缓存就是数据交换的缓冲区&#xff0c;称为cache&#xff0c;是存储数据的临时地方&#xff0c;一般读写性能较高 典型例子就是在计算机的CPU和内存、磁盘。CPU的运算能力非常强大&#xff0c;运算速度已经远远超过内存或者磁盘读写数据的能力。但是先读到数据才…

【内网穿透】内网穿透应用场景

伴随着科学技术的进步&#xff0c;我们身边出现了越来越多的电子设备&#xff0c;特别是移动电子设备的普及&#xff0c;给我们的生活带来极大的便利&#xff0c;而软件技术的发展&#xff0c;更为这些软件设备带来更多应用的可能。虽然移动设备覆盖了了我们生活的绝大部分场景…

Vue3基础知识(待续)

Vue是什么 构用户界面的js的渐进式框架&#xff0c;基于htlm、css、js&#xff0c;并提供声明式组件化的编程模型&#xff0c;帮你高效开发用户界面。无论简单或复杂的界面Vue都可以胜任。 vue是一个框架&#xff0c;同时也是一个生态。因为有很多程序员支持vue&#xff0c;开…

2023年第四届“华数杯”数学建模思路 - 案例:退火算法

## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&#xff0c;退火&#xff08;annealing&#xff09;现象指物体逐渐降温的物理现象&#xff0c;温度愈低&#…

Git基础知识:常见功能和命令行

文章目录 1.Git介绍2.安装配置2.1 查看配置信息 3.文件管理3.1 创建仓库3.2 版本回退3.3 工作流程3.4 撤销修改3.5 删除文件 4.远程仓库4.1 连接远程库4.2 本地上传至远程4.3 从远程库克隆到本地 5.分支管理5.1 创建分支5.2 删除分支5.3 合并分支解决冲突 参考&#xff1a; Git…

《Kali渗透基础》12. 无线渗透(二)

kali渗透 1&#xff1a;无线协议栈1.1&#xff1a;ifconfig1.2&#xff1a;iwconfig1.3&#xff1a;iw1.4&#xff1a;iwlist 2&#xff1a;无线网卡配置2.1&#xff1a;查看无线网卡2.2&#xff1a;查看信道频率2.3&#xff1a;扫描附近 AP2.4&#xff1a;侦听接口添加与删除 …

键入网址到网页显示,期间发生了什么

HTTP 浏览器做的第一步工作是解析URL 首先浏览器做的第一步工作就是要对URL进行解析&#xff0c;从而生成发送给 web 服务器的请求信息。 所以图中长长的URL实际上是请求服务器里的文件资源。 如果图中的蓝色部分URL元素省略了&#xff0c;那应该请求哪个文件呢&#xff1f; 当…

ARM裸机-12(GPIO和LED)

1、点亮LED 1.1、硬件工作原理及原理图查阅 1.1.1、LED物理特性 LED本身有2个接线点&#xff0c;一个是LED的正极&#xff0c;一个是LED的负极。LED这个硬件的功能就是点亮或者不亮&#xff0c;物理上想要点亮一颗LED只需要给他的正负极上加正电压即可&#xff0c;要熄灭一颗…

智能化RFID耳机装配系统:提升效率、精准追踪与优化管理

智能化RFID耳机装配系统&#xff1a;提升效率、精准追踪与优化管理 在当今的智能化时代&#xff0c;无线射频识别技术&#xff08;RFID&#xff09;被广泛应用于各个行业。本文将介绍一种基于RFID技术的智能耳机装配案例&#xff0c;通过RFID技术实现耳机装配过程的自动化控制…

vue 新学习 04 css样式绑定,渲染,key的重要意义

之前的html文件如何去绑定css样式&#xff1f; 01.首先在html文件中&#xff0c;在<head>标签中&#xff0c;用<style>中去写样式&#xff0c;通过html标签(每一个标签都有这样子的属性)中的class或者是id属性来完成<style>中的描绘的样式的用。 例子&#x…

【计算机网络】NAT及Bridge介绍

OSI七层模型 七层模型介绍及举例 为通过网络将人类可读信息通过网络从一台设备传输到另一台设备&#xff0c;必须在发送设备沿 OSI 模型的七层结构向下传输数据&#xff0c;然后在接收端沿七层结构向上传输数据。 数据在 OSI 模型中如何流动 库珀先生想给帕尔梅女士发一封电…