微信小程序使用ucharts折线图,有负数显示0刻度线

当数据有负数和正数的时候默认不会显示0刻度线,不方便看出正负对比

实现思路:显示的刻度线是根据数据的最大值和最小值自动分配到刻度线上面,把最大值和最小值设置为一样,然后平均分配给五个刻度线中间的刻度线就会为0就实现了显示0刻度线 

 

处理数据得到最大值和最小值

// 获取数据里面的最大值和最小值
let min = Math.min(...res.data.arr)
let max = Math.max(...res.data.arr)
// console.log(min, max);
// 判断最小值是否为负
if (min < 0) {
// 如果最小值为负数就把最小值转为绝对值和最大值进行比较,然后设置最大值和最小值为大的那个值,负数就为负if (Math.abs(max) > Math.abs(min)) {this.setData({min: -Math.abs(max),max:max})} else {this.setData({min:min,max: Math.abs(min)})}
} else {
// 最小值不为负就设置为0或者设置成数据的最小值this.setData({min: min,max: max})
}

处理好了最大值和最小值就赋值到yAxis里面data的min和max

yAxis: {gridType: "dash",dashLength: 0, //设置刻度线的间距,0就是直线splitNumber: 4, //设置多少根刻度线,要设置偶数才可以平分刻度线data: [{min: this.data.min, //设置刻度线的最小值max: this.data.max, //设置刻度线的最大值// disabled:true,// 处理数据格式如果为负数改为正数显示,不处理也可以,只是为了好看formatter(value, index, opts) {// console.log(value, index, opts);return Math.abs(value) >= 1000 ? (value / 10000).toFixed(1).replace(/\.0$/, '') + "万" : value.toFixed(1).replace(/\.0$/, '')}}]},

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

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

相关文章

03-Java单例模式 ( Singleton Pattern )

单例模式 单例模式设计要点单例模式基础实现摘要实现范例 单例模式的几种实现方式1. 懒汉式&#xff0c;线程不安全2. 懒汉式&#xff0c;线程安全3. 饿汉式4. 双检锁/双重校验锁&#xff08;DCL&#xff0c;即 double-checked locking&#xff09;5. 登记式/静态内部类6. 枚举…

【刷题题解】编辑距离

给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个字符 这道题也是&#xff0c;一眼动态规划&#xff0c;乍一看感觉很复杂&#xff0c;仔细思考…

python算法与数据结构---动态规划

动态规划 记不住过去的人&#xff0c;注定要重蹈覆辙。 定义 对于一个模型为n的问题&#xff0c;将其分解为k个规模较小的子问题&#xff08;阶段&#xff09;&#xff0c;按顺序求解子问题&#xff0c;前一子问题的解&#xff0c;为后一子问题提供有用的信息。在求解任一子…

TCP与UDP:传输层协议的差异与选择

在计算机网络中&#xff0c;传输控制协议&#xff08;TCP&#xff09;和用户数据报协议&#xff08;UDP&#xff09;是两种常用的传输层协议。然而&#xff0c;随着互联网的快速发展&#xff0c;传统的TCP和UDP在某些场景下存在一些限制。为了解决这些问题&#xff0c;出现了新…

Python 数据可视化:配色方案

1、引言 在这篇文章中&#xff0c;我们将研究Python的一些配色方案&#xff0c;主要是Seaborn库。这将采用 Python Notebook 格式&#xff0c;其中包括绘图的代码。 2、实验数据 首先导入必要的库&#xff1a; import pandas as pd import seaborn as sns import matplotlib…

802.11n 802.11ac (WiFi 4/5 )的核心要点

802.11n 802.11ac &#xff08;WiFi 4/5 &#xff09;是什么&#xff1f; WiFi 4&#xff1a; Ieee 802.11n Enhancements for High Throughput &#xff08;HT&#xff09; WiFi 5&#xff1a; Ieee 802.11ac Enhancements for Very High Throughput &#xff08;VHT&#x…

K8S部署Harbor镜像仓库(含离线安装包harbor-offline-installer国内下载链接)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

C++ dfs 与图有关的知识(四十七)【第七篇】

今天我们接着来学习树上搜索&#xff08;dfs深度优先搜索&#xff09; 1.树的深度与子树大小 树的深度&#xff1a;规定根结点是树的第一层&#xff0c;树根的孩子结点是树的第二层&#xff0c;以此类推&#xff0c;树的深度就是结点的最大层数。 根据定义&#xff0c;如果我们…

Java设计模式-模板方法模式(14)

行为型模式 行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对…

Re-understanding of data storytelling tools from a narrative perspective

作者&#xff1a;任芃锟, 王轶 & 赵凡 发表&#xff1a;Visual Intelligence&#xff0c;新刊&#xff0c;实行单盲同行评议制度。由施普林格以开放获取 (Open Access) 模式出版。获2022“中国科技期刊卓越行动计划高起点新刊”项目资助&#xff0c;目前出版不收取文章处理…

挑战!贪吃蛇小游戏的实现(1)

引言 相信大家都玩过贪吃蛇这个游戏&#xff01; 玩家控制一个不断移动的蛇形角色&#xff0c;在一个封闭空间内移动。随着时间推进&#xff0c;这个蛇形角色会逐渐增长&#xff0c;通常是通过吞食屏幕上出现的物品&#xff08;如点或者其他标志&#xff09;来实现。每当贪吃…

【C/C++ 12】C++98特性

目录 一、命名空间 二、缺省参数 三、函数重载 四、引用 五、内联函数 六、异常处理 一、命名空间 在C/C项目中&#xff0c;存在着大量的变量、函数和类&#xff0c;这些变量、函数和类都存在于全局作用域中&#xff0c;可能会导致命名冲突。 使用命名空间的目的就是对…