echarts - 条形图grid设置距离绘图区域的距离

在一些数据量过大的情况下，在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变。这时候设置条形图距离绘图区域上下左右的距离可使用如下方式：表示条形图的柱子距离绘图区左边30%，距离右边40%，而距离顶部和底部分别为10px和15px。

但在实际操作中发现，如果上下边距也使用百分比，那么在数据切换的时候，不同数据量时第一条柱子距离绘图区域顶部和底部的高度并不一致！数据量大时，距离绘图区域顶部的距离就大，数据量变小，距离绘图区域顶部的距离就变小。

1 grid: {
2     x: '30%',
3     top: '10px',
4     bottom: '15px',
5     right: '40%'
6 }

对比后发现，grid中的百分比，其实指的是在当前数据量下，占绘图区域大小的比例。因此，在条形图高度确定的情况下，数据量大的，距离就会变大，数据量小的，距离就会变小。

如：指定每个条形图的高度为30px，grid设置的top值为1%。

则：在同一绘图范围内，如果其中一组数据含有30条记录，那么切换到该数据时距离顶部的距离为30*30*1% = 9px；另外一组为100条记录，那么第一条条形图距离绘图区顶部的距离就为100*30*1% = 30px；可以看出，这两组数据之间的切换，各自距离绘图区顶部的距离会各不相同。

而绘图区宽度由于是固定的，所以可以使用百分比进行设置，距离左右绘图区的距离不会因为设置百分比而不同。

同理。如果绘制的为柱状图，则在数据量过大时要能够使得绘图区域左右滑动而不至于使得柱状图过于贴近绘图区域边界，对left和right的设置就需要使用具体数值而不能使用百分比，而对上下边距的设置可以使用百分比。

echarts在一个指定大小的面板中展示条形图且需要对条形图的位置进行设置，不能使得图表过于贴紧绘图区边缘，且需要不同量级的数据切换的展示问题，完美解决。

转载于:https://www.cnblogs.com/lily-sblog666/p/10724693.html

echarts - 条形图grid设置距离绘图区域的距离相关推荐

echarts图表的内边距_echarts - 条形图grid设置距离绘图区域的距离
在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变.这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%, ...
TeeChart for .NET教程：如何设置图表绘图区域的颜色？
TeeChart for .NET图表组件库提供数百种2D和3D图形样式,54种运算和统计函数以及无限数量的坐标轴和14工具箱供你选择.该图表控件还可以有效地用于创建多任务的仪表板. Q:我查 ...
echarts 条形图柱间距设置方法分享
我给柱子加了固定宽,然后百度加属性不生效. 问了同事,她看了下.发现我的配置grid只有top.(因为我菜鸟,没意识到grid那四个参数具体有啥用.)她加了bottom后,高度就撑开了.虽然严格意义上 ...
如何对CAD绘图区域进行设置？
如何对CAD绘图区域进行设置呢?其实设置绘图区域也就是设置边界.也就是图纸的最大极限值,那么该如何快速设置CAD绘图区域?详细教程如下. 1.运行CAD制图工具,进入软件操作界面.打开需要进行编辑的C ...
Python Matplotlib数据可视化绘图之（六）————图片大小、颜色、标题、纵横坐标、画布和绘图区域背景颜色、Legend(图例)等的参数设置详解
文章目录前言一.图片大小的设定和调节 1. 三种调整matplotlib图片大小的方法 1.1 plt.figure(figsize=(n, n)) 1.1.1 代码如下: 1.1.2 输出结果如 ...
QCustomplot控件设备背景图片（Qt图片自适应控件大小），并且设置绘图区域颜色透明
核心代码如下其中customplot是传入的QCustomplot指针 customPlot->setBackground(QPixmap(":/img/line1.png" ...
QGraphicsItem设置绘图区域和鼠标响应以及碰撞检测区域，并实现碰撞检测
QGraphicsItem中有两个方法,分别用来控制QGraphicsItem的绘图区域和碰撞检测区域: 1.[pure virtual] QRectF QGraphicsItem::bounding ...
echarts 折线图设置y轴最小刻度_用plotly和plt画图的基本设置（标题、坐标轴、图例、注释、图像）...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客非常好的文章,值得推荐. 一用matplotlib.py ...
设置弹性框项目之间距离的更好方法
本文翻译自:Better way to set distance between flexbox items To set the minimal distance between flexbox i ...

echarts - 条形图grid设置距离绘图区域的距离

echarts - 条形图grid设置距离绘图区域的距离相关推荐

最新文章

热门文章