微信小程序使用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.mfbz.cn/a/370858.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp /微信小程序 使用map组件实现手绘地图方案

获取地图范围 点图拾取坐标-地图开放平台|腾讯位置服务 获取需要手绘地图左下角和右上角GPS坐标 以北京故宫为例&#xff1a; 截取需要手绘地图进行手绘地图制作 ​​​​​​​​​​​​​​ 素材处理 由于地图素材文件比较大&#xff0c;小程序又限制包大小<2M,无…

13.从桥接模式细品人生的几座桥

“物理学不存在了&#xff0c;今后也不会存在。”——《三体》 在《三体》中&#xff0c;有这样一个桥段&#xff0c;顶级的物理学家杨冬在三体文明超级计算机“智子”的干扰和误导下&#xff0c;得出了物理实验的结果在实验之前就会被某种力量确定的结论&#xff0c;导致自己…

PyTorch 2.2 中文官方教程(九)

在生产环境中部署 PyTorch 模型 通过 Flask 在 Python 中部署 PyTorch 的 REST API 原文&#xff1a;pytorch.org/tutorials/intermediate/flask_rest_api_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这里下载完整的示例代码 作者&#…

Windows鼠标右键菜单闪一下就没了?说不定是这个搞的鬼!

前言 这几天接到有些小伙伴反馈&#xff1a;Windows的右键菜单闪一下就没了。 本来是要按鼠标右键进行界面刷新或者新建文件夹等操作的&#xff0c;结果闪一下就没有了&#xff0c;感觉这个系统就好像中了病毒了一样。 相信很多小伙伴应该也遇到过同样的情况&#xff0c;但具…

BUGKU-WEB Simple_SSTI_1

02 Simple_SSTI_1 题目描述 解题思路 进入场景后&#xff0c;显示&#xff1a; You need pass in a parameter named flag。ctrlu 查看源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Simpl…

ElementUI 组件Layout布局 el-row和el-col 简介

Layout布局 el-row属性简介 el-row 组件 提供 gutter 属性来指定每一栏之间的间隔&#xff0c;默认间隔为 0。 提醒&#xff1a; el-row :gutter需要与el-col :span 一起使用才能生效 el-col属性简介 el-col的span属性 默认值为24&#xff0c;表示每一行共24份&#xff0c;:s…

030 可变参数

可变参数定义 public static void main(String[] args) {// 多参数方式传递System.out.println(max(1,3,5,3,6,1,2));// 数组方式传递System.out.println(max(new int[]{1,3,5,3,6,1,2})); }static int max(int... nums){int max Integer.MIN_VALUE;for (int num : nums) {if(…

Mysql架构系列——生产常用的高可用部署模式介绍

模式 高可用模式 Galera Cluster是由Codership开发的MySQL多主集群&#xff0c;包含在MariaDB中&#xff0c;同时支持Percona xtradb、MySQL&#xff0c;是一个易于使用的高可用解决方案&#xff0c;在数据完整性、可扩展性及高性能方面都有可接受的表现。 将会基于Galera C…

三层交换组网实验(华为)

思科设备参考&#xff1a;三层交换组网实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 三层交换技术的出现&#xff0c;解决子网必须依赖路由器进行管理的问题&#xff0c;解决传统路由器低速、复杂所造成的网络瓶颈问题。一个具有三层交换功能的设备可简单理解为…

2.4日总结

第一题&#xff1a;选数 题解&#xff1a;思路还是很简单的&#xff0c;只需要想清楚dfs里的函数都是什么就可以了&#xff0c;还有一个简单的判断素数的函数&#xff0c;这题真没啥难度&#xff0c;就是属于基础题吧&#xff0c;请看AC代码 #include <stdio.h> #includ…

redis的缓存击穿和缓存雪崩和缓存穿透问题解决方法

Redis的缓存击穿&#xff1a; 热点的key&#xff0c;在不停的扛着大并发&#xff0c;当这个key失效时&#xff0c;一瞬间大量的请求冲到持久层的数据库中&#xff0c;就像在一堵墙上某个点凿开了一个洞&#xff01; 解决方法&#xff1a; 1.热点key永不过期&#xff1a; 统计访…

Facebook的数字合作愿景:创新与未来发展

随着科技的飞速发展&#xff0c;Facebook一直处于数字创新的前沿&#xff0c;致力于构建开放、智能、社交的数字社交体验。本文将深入探讨Facebook的数字合作愿景&#xff0c;探索其在创新与未来发展方面的雄心壮志。 引言 在当今数字化时代&#xff0c;社交媒体不仅是人们沟通…

Qt案例 在对QGraphicsView视图修改和撤销修改图元操作时,使用命令模式实现。

当项目中有QGraphicsView视图直接修改图元的功能时&#xff0c;常会有CtriZ和CtrlY这种执行与撤销图元修改的功能&#xff0c;以便于在修改图元后能够进行一个还原/执行操作&#xff0c;此时就适合使用命令模式设计来实现这个功能。 以下示例在WINDOWS系统&#xff0c;Qt Creat…

Stable Diffusion 模型下载:EnvyHyperrealXL01

模型介绍 一个基于 EnvyHyperdrive 和 NewReality 的超写实模型&#xff0c;使生成的照片级真实感模型在主题和视觉上与我的其他模型相似&#xff0c;除了&#xff0c;你知道&#xff0c;照片级真实感。 &#x1f603; 条目内容类型大模型基础模型SDXL 1.0来源CIVITAI作者_En…

SpinrgBoot-Mybatis基础

​ JDBCMyBatis概述MyBatis基础应用MyBatis动态标签 一、JDBC( Java DataBase Connectivity )&#xff1a;Java连接数据库的解决方案 概念&#xff1a;JDBC就是Java后端操作数据库的解决方案&#xff0c;操作数据的指令应该来自于前端&#xff0c;前端把数据提交到后端Java代…

CHS_09.2.3.6_2+多生产者-多消费者

CHS_09.2.3.6_2多生产者-多消费者 问题描述问题分析如何实现如何实现假如我们把盘子的容量设为二知识回顾 在这个小节中 我们会学习一个多生产者 多消费者的这样一个问题模型 问题描述 先来看一下问题的描述 假设桌子上面有一个盘子 每次只能向这个盘子里放一个水果 有四个人…

搜索专项---Flood Fill

文章目录 池塘计数城堡问题山峰与山谷 一、池塘计数OJ链接 1.BFS做法 #include <bits/stdc.h>#define x first #define y secondtypedef std::pair<int,int> PII;constexpr int N1010;int n,m; char g[N][N]; bool st[N][N];//用来表示已经记录过的 std::queue&…

3D力导向树插件-3d-force-graph学习002

一、实现效果&#xff1a;节点文字同时展示 节点显示不同颜色节点盒label文字并存节点上添加点击事件 二、利用插件&#xff1a;CSS2DRenderer 提示&#xff1a;以下引入文件均可在安装完3d-force-graph的安装包里找到 三、关键代码 提示&#xff1a;模拟数据可按如下格式填…

笔记---容斥原理

AcWing,890.能被整除的数 给定一个整数 n n n 和 m m m 个不同的质数 p 1 , p 2 , … , p m p_{1},p_{2},…,p_{m} p1​,p2​,…,pm​。 请你求出 1 ∼ n 1∼n 1∼n 中能被 p 1 , p 2 , … , p m p_{1},p_{2},…,p_{m} p1​,p2​,…,pm​ 中的至少一个数整除的整数有多少…

SemiDrive E3 MCAL 开发系列(1) – 环境搭建

一、 概述 本文将会介绍 SemiDrive E3 系列 MCU 的MCAL 开发环境搭建&#xff0c;包括如何获取及安装 EB 和 MCAL&#xff0c;E3 Gateway 开发板介绍&#xff0c;MCAL 工程的编译、下载等。 二、 EB 和 MCAL 的获取及安装 2.1 软件获取 EB Tresos 是用于进行 MCAL 配置…
最新文章