vue中使用G2问题汇总

前言

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

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

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

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

1、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)
    ...
}
复制代码

此时页面正常了:

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

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

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

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

<template>
  <div ref="element" class="element">
    <div id="chart"></div>
  </div>
</template>
<script>
export default {
  mounted () {
    const offsetHeight = this.$refs.element.offsetHeight // 获取父级高度 200
    const chart = new G2.Chart({
      container: 'chart',
      forceFit: true,
      height: offsetHeight,
    })
    ....
  }
}
</script>
<style scoped>
.element {
  width: 300px;
  height: 200px;
}
</style>
复制代码

vue中获取元素高度的几种方式: 例以下面的DOM:

<div ref="element" class="element"></div>
<style> .element { width: 200px; height: 200px; background-color: red; padding: 10px; } </style>
复制代码

1. 获取高度值 （内容高+padding+边框）

let height = this.$refs.element.offsetHeight // 220
复制代码

2. 获取元素样式值 （存在单位）

let height = window.getComputedStyle(this.$refs.element).height // 200px
复制代码

3. 获取元素内联样式值（存在单位, 非内联样式没法获取）

<div ref="element" class="element" style="height: 300px;"></div>
<script> let height = this.$refs.element.style.height // 300px </script>
复制代码

不过我在项目中是将图表封装到了一个组件中,因此可使用$el直接获取这个组件的属性.

<template>
  <div class='width_full height_full'>
    <div id="chart"></div>
  </div>
<script>
export default {
  mounted () {
    const offsetHeight = this.$el.offsetHeight // 获取组件高度
    const chart = new G2.Chart({
      container: 'chart',
      forceFit: true,
      height: offsetHeight,
    })
    ....
  }
}
</script>
</template>
复制代码

该组件的高度由调用它的父级组件控制.

3、图表内容过小变形问题

在使用图表时,有时候可能须要一些特别小的图做为仪表盘看板的一部分.好比构建一个宽200px,高150px的图表,此时图表会出现挤压变形的状况.

我在最开始遇到这个问题的时候也是各类找解决方案.最终仍是在G2的Issues上找到了解决方案.只须要在建立图表的时候,将padding设置为auto就能够了,以下:

const chart = new G2.Chart({
      container: 'chart',
      widht: 200,
      height: 150,
      padding: 'auto' // 为了防止小图时图表变形
    })
复制代码

4、字段格式为时间戳报错

如果x轴字段的格式为时间戳:

2019-09-17
2019.09.17
复制代码

好比后台给个人数据结构为:

[
  {
    time: '2019-09-17',
    amount: 100
  },
  {
    time: '2019-09-18',
    amount: 200
  }
]
复制代码

G2中须要生成一张柱状图 此时,控制台会报错:

解决方案: x 轴默认为解析为 time linear 类型了，这个类型不能堆叠。

将 x 轴scale 配置为 catTime 就能够。

在建立的图表的时候,添加上:

chart.scale('time', { // time为你的x轴时间的字段
    type:'timeCat'
 })

// 如果使用options配置, 则添加:
options: {
  scales: {
    time: {
      type: 'timeCat'
    }
  }
}
复制代码

后语

项目还在开发中,对于我来讲G2还有不少须要掌握的,后期使用上要是还遇到比较坑的点还会在此篇文章上进行更新.

不少时候解决问题的方案多是你在深夜中展转难眠时的灵光乍现,也多是在地铁上刷博客时的惊鸿一瞥,但愿这篇文章也能成为你的惊鸿一瞥.