标签：vue const G2 汇总 chart height 图表 true

前言

忙活完动态表单,动态附件,动态表格等等事情后,最近公司又在进军报表可视化问题了,对于我们前端而言如何将一份份数据美美的展示在页面上实为一项艰巨的任务.

对比了现有的几个比较有名的可视化工具之后,最终还是决定使用G2来进行项目开发.

G2的使用方式及作用我这里就不展开了,想了解的小伙伴可以撮这里: vue中使用G2(一)

该篇文章主要是记录一下近期在使用G2所遇到的一些比较坑的问题,如果正好你也在使用G2,且不巧的遇到了和我一样的问题,那么应该能帮助到你一些.

一、forceFit属性宽度自适应问题

在创建chart图表的时候,要是你图表的宽度设置为自适应模式,切页面为栏栅布局的时候,如下:

const chart = new G2.Chart({
          container: 'g1',
          forceFit: true,
          height: 270
      })
复制代码

将forceFit属性设置为true. 此时打开这个有图表的页面,会发现图表产生样式错乱的情况,比如这样:

canvas超出了父元素的宽度。如果改变浏览器的大小，window.resize的时候才会触发forceFit: true这个属性，才会自适应屏幕的宽度，这时图表的大小是正常的。

解决方式为:在vue生命周期mounted初始化图表之后,加入以下代码即可:

const e = document.createEvent('Event')
e.initEvent('resize', true, true)
window.dispatchEvent(e)
复制代码

比如我的项目中:

mounted () {
  this.initComponent()
},
methods: {
  initComponent () {
    const chart = new G2.Chart({
          container: 'g1',
          forceFit: true,
          height: 270
    })
    const e = document.createEvent('Event')
    e.initEvent('resize', true, true)
    window.dispatchEvent(e)
    ...
}
复制代码

此时页面正常了:

二、自定义图表的高度问题

如上所述, G2中提供了forceFit 属性使得图表宽度能自适应,但是在实际开发中我们可能希望图表的高度随父级容器的高度变化而变化.

文档中规定高度height属性必需传递一个数字.这样就打破了我想直接设置高度为100%的幻想.

既然高度必需规定为一个数字的话,那么我们就可以获取包裹图表的父元素的高度,然后再赋值给图表就可以了. 例如下面这个栗子

标签：vue,const,G2,汇总,chart,height,图表,true
来源： https://blog.csdn.net/qq_31967569/article/details/115428996

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。