echart柱状图Y轴最小间隔问题,Y轴不显示小数

2023-11-08

今天来说说echart 柱状图 Y轴的最小值、间隔问题。

最近项目中用到柱状图,数据量少的时候,Y轴会出现小数,但是我们产品小哥哥说不能出现小数,好了,那就开干!在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        data: [0, 1, 0, 2, 0, 0, 0],
        type: 'bar'
    }]
};

设置最小刻度跟间隔不就可以实现了吗?
查阅官方文档,找到Y轴以下两个配置
1、yAxis.min :坐标轴刻度最小值。
2、yAxis.minInterval: 自动计算的坐标轴最小间隔大小。

于是我就给加上了这两个配置项,运行结果是Y轴确实是不出现小数了,但是发现问题没有!!,周二那条数量为1的柱子不见啦!
在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        min:1,
        minInterval:1,
    },
    series: [{
        data: [0, 1, 0, 2, 0, 0, 0],
        type: 'bar'
    }]
};

认真看了下,Y轴不是从0开始,而是从1开始了,所以数量为1的柱子就“不见”了,删掉min配置,即可。
在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        minInterval:1,
    },
    series: [{
        data: [0, 1, 0, 2, 0, 0, 0],
        type: 'bar'
    }]
};

总结:yAxis. min是指Y轴最小刻度。不设置的时候会自动计算最小值,一般都是0。yAxis.minInterval是Y轴最小间隔,如我的需求中,设置为1就确保都是整数了。

第一次写文章,希望自己能够继续加油,一直坚持写下去。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echart柱状图Y轴最小间隔问题,Y轴不显示小数 的相关文章

随机推荐

  • 【我的第一千篇文章】

    作为一名Java开发者 我很自豪地宣布 这里是我输出的第一千篇文章 在过去的六年里 我一直坚持每月输出优质内容 并将其分享给了全世界的读者们 这一千篇文章中 有很多关于Java编程的技巧 经验分享 优秀实践示例 案例分析等等 每篇文章都代表
  • 决策树分析例题经典案例_一级造价师考试——工程造价案例分析之2.3决策树分析法在方案评价中的应用...

    一级造价师考试 工程造价案例分析之2 3决策树分析法在方案评价中的应用 决策树分析方法一般会和资金时间价值综合起来进行考核 要会正确绘制决策树 根据资金时间价值计算各机会点的期望值 进行方案选择和决策 1 决策树的概念 决策树是以方框 和圆
  • Maven 命令

    输出依赖树 mvn dependency tree 输出依赖树到指定文件 mvn dependency tree gt tree txt 输出lib mvn dependency copy dependencies DoutputDirec
  • 如何将爬虫的数据添加到mysql数据库中

    以爬取糗事百科中24小时网页中第一列表页中所有文章的内容 作者 搞笑数 评论数为例 将爬取的四项内容存入到mysql数据库中 思路 要想存入到数据库中就需要用到数据库中的表 所以我们首先创建一个名叫 myblog 的数据库 然后在此数据库中
  • PHP 的Laravel 框架

    在windows下 搭建PHP的Laravel框架很简单 先把PHP的安装目录 加入到环境变量里 在命令行能访问到php v 就说明可以了 然后 这些是需求的环境 PHP gt 7 1 3 不用说了 OpenSSL PHP扩展 用compo
  • 51单片机编写60秒倒计时程序

    include
  • linux下mysql安装

    一 解压缩mysql 5 6 4 m7 tar zip 1 gt unzip mysql 5 6 4 m7 tar zip 会生成mysql 5 6 4 m7 tar gz的压缩文件 2 gt tar zxvf mysql 5 6 4 m7
  • mysqlbinlog命令使用

    参考 https www cnblogs com zouhong p 14540380 html https www iteye com blog wx1568934009 2469938 获取二进制日志列表show binary logs
  • Shell Script—线程

    本文主要介绍shell中的线程 线程中的等待和信号 1 线程 Shell中线程的实现有多种方式 目前只介绍通过 符号 通过在命令末尾加上 符号 可以在后台启动一个进程并立即返回 允许Shell进程继续执行其他命令 示例 bin bash N
  • 023.二叉树的最近公共祖先

    题目链接 236 二叉树的最近公共祖先 大概思路 题目要求 给定一个二叉树 找到该树中两个指定节点q p的最近公共祖先x q p一定存在且值不同 最近公共祖先 两个节点共同的祖先 同时深度尽可能大 其中一个可以是祖先本身 思路 q p的最近
  • 作业asd

    餐馆 class Restaurant def init self restaurant name cuisine type self restaurant name restaurant name self cuisine type cu
  • UI设计基础知识点之Android设计规范篇

    目录 基础概念 Android界面设计规范 Android切图标注 安卓开发单位换算 总结 一 基础概念 1 什么是DPI DPI Dots Per Inch 每英寸点数 表示指屏幕密度 是测量空间点密度的单位 最初应用于打印技术中 它表示
  • 杂项:art-template-loader

    ylbtech 杂项 art template loader 1 返回顶部 2 返回顶部 3 返回顶部 4 返回顶部 5 返回顶部 1 https www npmjs com package art template loader 2 ht
  • Vivado中怎么做set_input_delay约束

    参考 https forums xilinx com t5 Timing Analysis Hold violation in ISERDES td p 715121 前言 在STA中 要分析上游器件和FPGA之间的时序关系就得指定inpu
  • VSCode+arm-none-eabi+msys使用Make实现STM32交叉编译

    记录一下在Windows平台下 利用VSCode的arm none eabi扩展和msys使用Make实现STM32的交叉编译 准备 1 安装arm none eabi扩展 在VSCode的扩展窗口 搜索eabi 安装windows arm
  • 解决HttpClient工具中application/x-www-form-urlencoded表单提交时,请求参数中文乱码问题

    一 参数乱码现象 当我去请求第三方接口时 接口接收格式为Form表单的时候 使用HttpClient工具类 这时 对于封装进HttpPost对象里的请求参数 如果有中文参数 会出现乱码的现象 二 代码现象复现 controller层 Res
  • c语言中\n,\t,\r,\b的用法和区别

    1 n 最容易理解 就是 换行 跳到下一行的起始位置 2 t 也容易理解 即跳到下一制表位 举例如下图所示 3 r 回车 不换行 r后边的数字替代 这一行最开始的相等数目的数字 举例 4 b 退格 也就是电脑键盘上的backspace b后
  • python pip命令安装 pyinstaller失败提示Installing build dependencies ... error

    1 现象 2 解决方案 自己下载 手动安装 2 1 下载地址 https pypi org project PyInstaller 3 5 files 2 2 解压到E python PyInstaller 3 5 2 3 cmd进入到解压
  • 差分信号简述

    差分信号是一种信号传输技术 传统的传输方法使用一根信号线传输信号 一根地线接地 差分信号需要在两根线上都传输信号 且两个信号振幅相同 相位相反 这样的信号就是差分信号 使用差分信号传输的好处是 只要传输正负信号的两根线在物理上是紧密耦合在一
  • echart柱状图Y轴最小间隔问题,Y轴不显示小数

    今天来说说echart 柱状图 Y轴的最小值 间隔问题 最近项目中用到柱状图 数据量少的时候 Y轴会出现小数 但是我们产品小哥哥说不能出现小数 好了 那就开干 option xAxis type category data Mon Tue