vue中使用G2问题汇总

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

前言

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

对比了现有的几个比较有名的可视化工具之后,最终还是决定使用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%的幻想.

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