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還有不少須要掌握的,後期使用上要是還遇到比較坑的點還會在此篇文章上進行更新.

不少時候解決問題的方案多是你在深夜中展轉難眠時的靈光乍現,也多是在地鐵上刷博客時的驚鴻一瞥,但願這篇文章也能成爲你的驚鴻一瞥.