微信小程序使用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.mzph.cn/news/667548.shtml

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

相关文章

安卓平台valgrind交叉编译

背景 通过上次的文章valgrind跨平台调试及其问题分析,为同事们在大部分平台下进行内存问题分析提供了帮助。但是也遇到了阻塞情况&#xff1a;android 平台&#xff0c;无法交叉编译通过。大家对于编译这件事&#xff0c;似乎天然有一种排斥&#xff0c;本能的拒绝&#xff0c…

qt5入门-事件

参考&#xff1a; Qt 事件(event)_w3cschool https://www.w3cschool.cn/learnroadqt/xvme1j4c.html 本地环境&#xff1a; win10专业版&#xff0c;64位 事件的概念 将事件抽象为一个对象&#xff0c;当用户发起一个行为&#xff0c;就把对应的事件加入事件队列&#xff0c;对…

云计算、Docker、K8S问题

1 云计算 云计算作为一种新兴技术&#xff0c;已经在现代社会中得到了广泛应用。它以其高效、灵活和可扩展特性&#xff0c;成为了许多企业和组织在数据处理和存储方面的首选方案。 1.1 什么是云计算&#xff1f;它有哪些特点&#xff1f; 云计算是一种通过网络提供计算资源…

大型软件编程实例分享,诊所门诊处方笺管理系统多台电脑同时使用的软件教程

大型软件编程实例分享&#xff0c;诊所门诊处方笺管理系统多台电脑同时使用的软件教程 一、前言 以下教程以 佳易王诊所门诊电子处方管理系统V17.2 为例说明 软件资源可以点击最下方官网卡片了解详情 软件左侧为导航栏 1、系统参数设置&#xff1a;可以设置打印等参数 2、…

【数据分享】1929-2023年全球站点的逐年降雪深度数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 之前我们分享过1929-2023年全球气象站点的逐年平均气温数据、逐年最高气温数据…

Debian系统显示中文

开发板上的debian默认不显示中文。 安装字体 sudo apt install fonts-wqy-zenhei 安装locals sudo apt install locales &#xff08;无必要&#xff09;设置/etc/locale.gen、设置/etc/locale.conf 运行dpkg-reconfigure locales dpkg-reconfigure locales 可以选择UT…

Sqli靶场23-->30

不知不觉鸽了几天了&#xff0c;没办法去旅游摸鱼是这样的了&#xff0c;抓紧时间来小更一下 23.过滤注释符号 先手工注入一下&#xff0c;就能发现两个单引号不报错&#xff0c;但是一旦上到注释符号的话就会报错&#xff0c;可以猜测出是对注释符号进行了过滤&#xff0c;我…

【Crypto | CTF】BUUCTF 萌萌哒的八戒

天命&#xff1a;这年头连猪都有密码&#xff0c;真是奇葩&#xff0c;怪不得我一点头绪都没有 拿到软件&#xff0c;发现是.zip的压缩包&#xff0c;打不开&#xff0c;改成7z后缀名&#xff0c;打开了 发现是一张图片 也只有下面这行东西是感觉是密码了&#xff0c;又不可能…

前端面试题——Vue的双向绑定

前言 双向绑定机制是Vue中最重要的机制之一&#xff0c;甚至可以说是Vue框架的根基&#xff0c;它将数据与视图模板相分离&#xff0c;使得数据处理和页面渲染更为高效&#xff0c;同时它也是前端面试题中的常客&#xff0c;接下来让我们来了解什么是双向绑定以及其实现原理。…

eslint报错文档大量红色报错符号 不自动修正

确保eslint在工作 控制台大量报错信息 确保setting.json 开了保存的时候自动格式化代码 这个时候保存的时候代码可以自动被格式化 但是 文档中和控制台中仍然有大量的报错 信息 此时此刻说明 格式化文档的文件不是按照eslint 格式化的 可以网上找找现成可用的setting.json抄…

一站式SpringBoot学习平台:让编程变得轻松有趣!

介绍&#xff1a;Spring Boot是一个开源的Java框架&#xff0c;旨在简化Spring应用程序的开发和部署过程。 Spring Boot由Pivotal团队设计并推出&#xff0c;它的核心优势在于极大地简化了传统Spring应用的初始搭建和开发流程。具体来说&#xff0c;Spring Boot的主要特点包括&…

Bard 最新更新:全球开放访问Gemini Pro并生成图片

深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领域的领跑者。点击订阅&#xff0c;与未来同行&#xff01; 订阅&#xff1a;https://rengongzhineng.io/ 。 今…

【讲座分享】| 复旦大学张奇教授——《自然语言发表论文如何打怪升级?NLP顶会论文发表》

文章目录 1 基础关1.1 基础书籍1.2 提高书籍1.3 课程链接1.4 编程实战 2 阅读关2.1 分层过滤2.2 集团作战&#xff0c;信息获取2.3 论文如何泛读 3 动机 方向关3.1 快速发论文3.2 好的研究 4 写作关4.1 论文写作流程4.2 从读者角度出发4.3 每一部分怎么写4.3.1 Abstract摘要4.3…

Sklearn、TensorFlow 与 Keras 机器学习实用指南第三版(八)

原文&#xff1a;Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十八章&#xff1a;强化学习 强化学习&#xff08;RL&#xff09;是当今最激动人心的机器学习领域之一&#xff0c;也是最古老…

跟着pink老师前端入门教程-day18

3、CSS3 3D转换 生活中的环境是3D的&#xff0c;照片就是3D物体在2D平面呈现的例子 特点&#xff1a;近大远小&#xff0c;物体后面遮挡不可见 3.1 三维坐标系 三维坐标系其实就是指立体空间&#xff0c;立体空间是由3个轴共同组成的 x轴&#xff1a;水平向右 注意&#x…

SpringBoot 使用定时任务(SpringTask)

Spring3.0以后自带的task&#xff0c;可以将它看成一个轻量级的Quartz&#xff0c;而且使用起来比Quartz简单许多。 使用步骤&#xff1a; 1.导入坐标 在spring-boot-starter-web坐标中&#xff0c;就包含了SpringTask&#xff0c;所以一般的Web项目都包含了。 <depende…

基于动作合成视频、线免费使用不需要注册,支持多种视频任务:图像生成视频、文本生成视频、视频修改、视频风格化、用Transformer构建世界模型

基于动作合成视频、线免费使用不需要注册&#xff0c;支持多种视频任务&#xff1a;图像生成视频、文本生成视频、视频修改、视频风格化、用Transformer构建世界模型。 WorldDreamer无缝逐帧AI模型: 基于Transformer生成高质量电影级别视频的通用世界模型"。从20亿数据中…

问题:胚珠裸露于心皮上,无真正的果实的植物为() #经验分享#媒体

问题&#xff1a;胚珠裸露于心皮上&#xff0c;无真正的果实的植物为&#xff08;&#xff09; A.双子叶植物 B.被子植物 C.单子叶植物 D.裸子植物 参考答案如图所示

【节选】Go语言的100个错误使用场景|数据类型

Data types &#x1f31f; 章节概述&#xff1a; 基本类型涉及的常见错误 掌握 slice 和 map 的基本概念&#xff0c;避免使用时产生 bug 值的比较 低效的切片初始化&#xff08;#21&#xff09; 实现一个 conver 方法&#xff0c;将一个切片 Foo 转换成另一个类型的切片 Ba…

基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法(二)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/n…