前言
忙活完動(dòng)態(tài)表單,動(dòng)態(tài)附件,動(dòng)態(tài)表格等等事情后,最近公司又在進(jìn)軍報(bào)表可視化問(wèn)題了,對(duì)于我們前端而言如何將一份份數(shù)據(jù)美美的展示在頁(yè)面上實(shí)為一項(xiàng)艱巨的任務(wù).
對(duì)比了現(xiàn)有的幾個(gè)比較有名的可視化工具之后,最終還是決定使用G2來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā).
G2的使用方式及作用我這里就不展開(kāi)了,想了解的小伙伴可以撮這里: vue中使用G2(一)
該篇文章主要是記錄一下近期在使用G2所遇到的一些比較坑的問(wèn)題,如果正好你也在使用G2,且不巧的遇到了和我一樣的問(wèn)題,那么應(yīng)該能幫助到你一些.
一、forceFit屬性寬度自適應(yīng)問(wèn)題
在創(chuàng)建chart圖表的時(shí)候,要是你圖表的寬度設(shè)置為自適應(yīng)模式,切頁(yè)面為欄柵布局的時(shí)候,如下:
const chart = new G2.Chart({
container: 'g1',
forceFit: true,
height: 270
})
將forceFit屬性設(shè)置為true.
此時(shí)打開(kāi)這個(gè)有圖表的頁(yè)面,會(huì)發(fā)現(xiàn)圖表產(chǎn)生樣式錯(cuò)亂的情況,比如這樣:
canvas超出了父元素的寬度。如果改變?yōu)g覽器的大小，window.resize的時(shí)候才會(huì)觸發(fā)forceFit: true這個(gè)屬性，才會(huì)自適應(yīng)屏幕的寬度，這時(shí)圖表的大小是正常的。
解決方式為:在vue生命周期mounted初始化圖表之后,加入以下代碼即可:
const e = document.createEvent('Event')
e.initEvent('resize', true, true)
window.dispatchEvent(e)
比如我的項(xiàng)目中:
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)
...
}
此時(shí)頁(yè)面正常了:
二、自定義圖表的高度問(wèn)題
如上所述, G2中提供了forceFit 屬性使得圖表寬度能自適應(yīng),但是在實(shí)際開(kāi)發(fā)中我們可能希望圖表的高度隨父級(jí)容器的高度變化而變化.
文檔中規(guī)定高度height屬性必需傳遞一個(gè)數(shù)字.這樣就打破了我想直接設(shè)置高度為100%的幻想.
既然高度必需規(guī)定為一個(gè)數(shù)字的話,那么我們就可以獲取包裹圖表的父元素的高度,然后再賦值給圖表就可以了.
例如下面這個(gè)栗子??:
<template>
<div ref="element" class="element">
<div id="chart"></div>
</div>
</template>
<script>
export default {
mounted () {
const offsetHeight = this.$refs.element.offsetHeight // 獲取父級(jí)高度 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>
- 獲取高度值 （內(nèi)容高+padding+邊框）
let height = this.$refs.element.offsetHeight // 220
- 獲取元素樣式值 （存在單位）
let height = window.getComputedStyle(this.$refs.element).height // 200px
- 獲取元素內(nèi)聯(lián)樣式值（存在單位, 非內(nèi)聯(lián)樣式無(wú)法獲?。?/li>
<div ref="element" class="element" style="height: 300px;"></div>
<script>
let height = this.$refs.element.style.height // 300px
</script>
不過(guò)我在項(xiàng)目中是將圖表封裝到了一個(gè)組件中,所以可以使用$el直接獲取這個(gè)組件的屬性.
<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>
該組件的高度由調(diào)用它的父級(jí)組件控制.
三、圖表內(nèi)容太小變形問(wèn)題
在使用圖表時(shí),有時(shí)候可能需要一些特別小的圖作為儀表盤看板的一部分.比如構(gòu)建一個(gè)寬200px,高150px的圖表,此時(shí)圖表會(huì)出現(xiàn)擠壓變形的情況.
我在最開(kāi)始遇到這個(gè)問(wèn)題的時(shí)候也是各種找解決方案.最終還是在G2的Issues上找到了解決方案.只需要在創(chuàng)建圖表的時(shí)候,將padding設(shè)置為auto就可以了,如下:
const chart = new G2.Chart({
container: 'chart',
widht: 200,
height: 150,
padding: 'auto' // 為了防止小圖時(shí)圖表變形
})
四、字段格式為時(shí)間戳報(bào)錯(cuò)
若是x軸字段的格式為時(shí)間戳:
2019-09-17
2019.09.17
比如后臺(tái)給我的數(shù)據(jù)結(jié)構(gòu)為:
[
{
time: '2019-09-17',
amount: 100
},
{
time: '2019-09-18',
amount: 200
}
]
G2中需要生成一張柱狀圖
此時(shí),控制臺(tái)會(huì)報(bào)錯(cuò):
解決方案:
x 軸默認(rèn)為解析為 time linear 類型了，這個(gè)類型不能堆疊。
將 x 軸scale 配置為 catTime 就可以。
在創(chuàng)建的圖表的時(shí)候,添加上:
chart.scale('time', { // time為你的x軸時(shí)間的字段
type:'timeCat'
})
// 若是使用options配置, 則添加:
options: {
scales: {
time: {
type: 'timeCat'
}
}
}
后語(yǔ)
項(xiàng)目還在開(kāi)發(fā)中,對(duì)于我來(lái)說(shuō)G2還有很多需要掌握的,后期使用上要是還遇到比較坑的點(diǎn)還會(huì)在此篇文章上進(jìn)行更新.很多時(shí)候解決問(wèn)題的方案可能是你在深夜中輾轉(zhuǎn)難眠時(shí)的靈光乍現(xiàn),也可能是在地鐵上刷博客時(shí)的驚鴻一瞥,希望這篇文章也能成為你的驚鴻一瞥.
