Echarts柱状图设置柱间距不生效

2023-10-31

由于要做进度条样式的柱状图,如图所示,
在这里插入图片描述

所以想做点柱子之间的间距,于是设置barGap代码配置如下(这里是错误示范):

series: [{
          name: '',
          type: 'bar',
          data: this.downLoadChartsData.seriesData,
          barWidth: 8, // 柱图宽度
          barGap: 36, // 柱图之间的间距
       }]

到这里很多人还说不生效,看下边这一句,是重点!!!!!

但是发现不生效,官网配置肯定是没问题的,最后发现是我的grid没有top,只有leftbottomright,需要把这几个全设置,才生效。

!!正确示范:---------------------------------------------------------------------------------------------------------

series: [{
    name: '',
    type: 'bar',
    data: this.seriesData,
    barWidth: 8, // 柱图宽度
    barGap: 36, // 柱图之间的间距
 }],
 // 注意grid这里上下左右全部都要设置齐全
grid: {
     containLabel: true,
      top:30,
      left: 10,
      right: 10,
      bottom: 8
  },

如果碰巧设置完还不生效,那就是代码其他地方有问题,可以先在echarts官网上调试正确,再往自己代码中粘贴。

希望记录的问题能帮助到你~

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

Echarts柱状图设置柱间距不生效 的相关文章

随机推荐

  • C语言题目解析(一)

    C语言题目解析 1 打印 1 100之间的奇数 1 1 题目描述 1 2 解法思路 1 3 代码 1 4 运行结果 2 打印9 9乘法 诀表 2 1 题目描述 2 2 解题思路 2 3 解法代码 2 4 运行结果 3 打印素数 3 1 题目
  • 禁用cookie和私密浏览模式情况下localstorage需要注意的问题

    localstorage是html5新增的一个功能 用于本地存储 主要解决cookie存储量小的问题 官方建议每个网站最多存储5M大小 localstorage相关的函数 cookieEnabled 移动端在使用localstorage需要
  • TCP和UDP详解

    本篇文章主要是从运输层协议概述 UDP TCP 可靠传输的工作原理 TCP首部格式 TCP可靠传输的实现 TCP流量控制 TCP的拥塞控制 TCP的连接管理这几个方面进行解析 不对之处还望指出 喜欢的可以点赞关注一下 谢谢 一 运输层协议概
  • 写一段js代码,完成字段校验规则:字段的长度必须介于6-20位之间,必须包含大小写字母和数字。...

    var regex new RegExp a z A Z 0 9 a zA Z0 9 6 20 if regex test fieldValue 校验通过 else 校验不通过
  • Dynamics 365 自动化发布工具Spkl介绍

    本篇主要是为了后面讲述CI CD时用到的工具做一个说明 先奉上spkl的github地址 没听说过的可以去查看下 挺不错的工具 我们主要用这个工具来部署WebResource Plugin和Workflow Activities 以及后续的
  • 一篇搞定SpringCloud面试(两万字)

    本文来自一位非常卷的在校学生写的学习笔记 哎 这样太卷了 作为一个苦逼的在读大学生 又要面临半年一度的期末考试了 因为上课没听 我啥都不会 什么通信原理 单片机 饶了我吧 给你们看看我上课在干啥你就知道我为啥啥都不会了 上课笔记 emmm
  • 群晖 NAS WebDAV服务手机ES文件浏览器远程访问【无公网IP内网穿透】

    iOS开发上架主页 在强者的眼中 没有最好 只有更好 我们是移动开发领域的优质创作者 同时也是阿里云专家博主 关注我们的主页 探索iOS开发的无限可能 我们与您分享最新的技术洞察和实战经验 助您在移动应用开发领域取得成功 欢迎访问我们的微信
  • 【YOLO v7】论文笔记

    YOLO v7 论文笔记 文章地址及源码 文章 https arxiv org abs 2207 02696 源码 https github com WongKinYiu yolov7 研究背景及主要贡献 针对目标群体 执行实时目标检测的计
  • docker安装seata1.5.2及其使用

    前言 最近进行了seata的安装和使用 对照网上的文章和文档进行安装配置使用的过程中绕了不少弯路 现在完成工作之后写一篇博文对此进行总结和记录 直接上案例 首先要注意Spring Cloud Alibaba Spring Cloud Spr
  • 了解并使用Xposed 框架神器

    什么是Xposed框架 Xposed 框架是个神器 帮助文档 关于Xposed框架的安装以及使用 https sspai com post 24538 Xposed下载地址以及模块库 https repo xposed info modul
  • 使用Qt Creator开发动态链接库,并在程序中调用(动态链接库)

    在 QT 中 一般将驱动 动态库 dll文件一概而论 一路下一步 至工程建立 dynamiclibrary h ifndef DYNAMICLIBRARY H define DYNAMICLIBRARY H include dynamicl
  • 以日期作为ts切片文件名问题的解决过程

    一 需求 EasyDarwin使用FFmpeg来保存流媒体 以多个ts分片形式存在 但由于EasyDarwin调用FFmpeg命令时 没有对生成名字做处理 所以默认生成的ts文件名都是out0 ts out1 ts 这种名称意义不大 需要以
  • 【华为OD机试真题 Java】最长连续子序列

    前言 本专栏将持续更新华为OD机试题目 并进行详细的分析与解答 包含完整的代码实现 希望可以帮助到正在努力的你 关于OD机试流程 面经 面试指导等 如有任何疑问 欢迎联系我 wechat steven moda email nansun09
  • 22款常用微信小程序UI框架推荐!

    22个好看 常用的微信小程序UI组件库推荐 1 WeUI 地址 https developers weixin qq com miniprogram dev extended weui 预览码 2 ColorUI 地址 https gith
  • flutter 数据持久化之sqflite

    sqflite 是一款轻量级的关系型数据库 类似SQLite 支持iOS和Android 适用于存储数据库 表类型的数据 使用 添加依赖 dependencies flutter sdk flutter sqflite插件 sqflite
  • html怎么在网页标题栏上添加图标

    需求 像下图这样给网页标题栏加个图标 方法 需要先把图片格式转换为 ico类型 在这个网址在线转换很方便 https www easyicon net covert 在加一行来显示图标 注意 如果加入了没有效果 检查一下路径是否正确 文件名
  • Linux安装rsync命令失败,rsync 常见错误与解决方法整理

    我们都是通过错误日志查看 在rsyncd log里面或 err文件里面 大家可以用记事本打开查看 注意windows下面我们需要给SvcwRsync用户 管理同步目录的所有权限 基本上这样就可以了 问题一 ERROR chroot fail
  • MySQL基本原理以及框架图

    数据库的定义 数据库简单来说是本身可视为电子化的文件柜 存储电子文件的所处 用户可以对文件 的数据运行新增 截取 更新 删除等操作 数据库指的是以一定的方式存储在一起 能为多个用户共享 具有尽可能小的冗余度 与应用程序彼此独立的数据集合 数
  • 反转链表:双指针法

    给你单链表的头节点 head 请你反转链表 并返回反转后的链表 指针 快慢指针 pre指向前一个节点 cur指向当前节点 temp用于保存当前节点的下一个节点 Definition for singly linked list public
  • Echarts柱状图设置柱间距不生效

    由于要做进度条样式的柱状图 如图所示 所以想做点柱子之间的间距 于是设置barGap代码配置如下 这里是错误示范 series name type bar data this downLoadChartsData seriesData ba