脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts grid图表位置配置

echarts中grid图表的位置配置详解

 更新时间：2023年04月23日 12:02:17   作者：爱学习的Akali King  
ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,下面这篇文章主要给大家介绍了关于echarts中grid图表的位置配置的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下

首先还是先认识grid，要弄清楚grid是哪一块区域，这就牵扯到对echarts图表元素的基本认识。为此，我做了一个总结，如图所示：

数学里的笛卡尔坐标系分为直角坐标系 和斜坐标系。而grid只适用于直角坐标系！

我们已经知道了grid表示哪一块区域，接下来具体看看它到底有什么属性，能干什么？

echarts官网中grid组件的属性并不多，但是我们依然就常用的属性看看，熟悉一下

重点：

在ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

option = {
    grid: {
        show: true,                                 //是否显示图表背景网格    
        left: '0%',                                    //图表距离容器左侧多少距离
        right: '40%',                                //图表距离容器右侧侧多少距离
        bottom: '3%',                              //图表距离容器上面多少距离
        top: 50,                                       //图表距离容器下面多少距离
        containLabel: true,                     //防止标签溢出  
        backgroundColor:'#555555',     //网格背景色，默认透明
    }
}
注意：

 grid里面的上下左右，相当于内边距的意思，是距离容器上下左右各多少，并不是向左向右多少距离。这个一般用%或者数字来表示。

containLabel这个属性一般写true，表示防止标签长度动态变化时，可能会溢出容器或者覆盖其他组件。它包括了坐标轴标签在内的所有内容所形成的矩形的位置。相当于label标签的效果。

下面我们看看有containLabel和没有containLabel属性的区别，一看就明白：

加上containLabel：true

不加containLabel：true

总结

到此这篇关于echarts中grid图表的位置配置详解的文章就介绍到这了,更多相关echarts grid图表位置配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 使用JSON格式提交数据到服务端的实例代码

    使用JSON格式提交数据到服务端的实例代码

    这篇文章主要介绍了使用JSON格式提交数据到服务端的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2018-04-04
  • JS实现骰子3D旋转效果

    JS实现骰子3D旋转效果

    这篇文章主要为大家详细介绍了JS实现骰子3D旋转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 使用jquery解析XML的方法

    使用jquery解析XML的方法

    这篇文章主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下
    2014-09-09
  • js移动焦点到最后位置的简单方法

    js移动焦点到最后位置的简单方法

    下面小编就为大家带来一篇js移动焦点到最后位置的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 35个JS中实用工具函数的代码分享

    35个JS中实用工具函数的代码分享

    身为后台开发的各位铁铁，实际开发不管是公司要求或是自身发展，学前端已经是我们内卷路上必定碰到的，那今天小编就给大家总结下那些我们工作中可能遇到的一些实用Js函数
    2022-06-06
  • three.js设置物体的缩放和旋转代码示例

    three.js设置物体的缩放和旋转代码示例

    最近在用three.js做三维模型的时候,需要通过鼠标滑轮向前来控制视角朝鼠标的位置放大,然后通过鼠标滑轮向后将视角复原,这篇文章主要给大家介绍了关于three.js如何设置物体的缩放和旋转的相关资料,需要的朋友可以参考下
    2023-11-11
  • JS中innerHTML和pasteHTML的区别实例分析

    JS中innerHTML和pasteHTML的区别实例分析

    这篇文章主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下
    2016-06-06
  • JS 箭头函数的this指向详解

    JS 箭头函数的this指向详解

    这篇文章主要给大家介绍了关JS 箭头函数的this指向，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • js循环动态绑定带参数函数遇到的问题及解决方案[转]

    js循环动态绑定带参数函数遇到的问题及解决方案[转]

    关于Javascript利用循环绑定事件的例子，需要的朋友可以参考下。
    2010-11-11
  • 详解JavaScript到TypeScript的转换过程

    详解JavaScript到TypeScript的转换过程

    JavaScript是一门强大而灵活的编程语言，TypeScript作为JavaScript的超集，为开发人员提供了静态类型检查、更好的协作能力和面向对象编程的支持，本文将详细讲解如何将JavaScript代码转换为TypeScript，并写一些代码示例参考
    2023-06-06

最新评论