v-chart的使用
v-chart介紹
先來個(gè)圖表文檔：v-chart文檔：https://v-charts.js.org/#/props
v-chart文檔是這樣介紹的：在使用 echarts 生成圖表時(shí)京髓，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)西壮，v-charts 的出現(xiàn)正是為了解決這個(gè)痛點(diǎn)睛约。基于 Vue2.0 和 echarts 封裝的 v-charts圖表組件寞肖，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據(jù)格式設(shè)置簡單的配置項(xiàng)纲酗，便可輕松生成常見的圖表。
從介紹可以看出v-char裝了echarts讓圖表使用起來更加快捷新蟆、方便觅赊。如果需要了解可以打開文章開頭鏈接。
最近在寫后臺(tái)管理系統(tǒng)的時(shí)候使用到圖表琼稻，搜索發(fā)現(xiàn)了v-chart吮螺，使用起來非常方便，但是我發(fā)現(xiàn)v-chart的一些圖表屬性并沒有寫清楚帕翻，目前使用使用到的是data-zoom屬性配置鸠补，發(fā)現(xiàn)文檔并沒有說明。
為什么使用data-zoom嘀掸，接下來看圖表使用過程就知道：
首先紫岩，數(shù)據(jù)少時(shí)圖表顯示沒什么問題，也不需要配置data-zoom睬塌，如下圖：
但是數(shù)據(jù)很多時(shí)被因，會(huì)使圖表非常擁擠，不僅不容易閱讀衫仑，而且不美觀，如下圖
所以這個(gè)時(shí)候我們就有需求堕花，能夠讓圖表只顯示一部分文狱，所以就用到了data-zoom屬性配置，data-zoom拆開意思就是數(shù)據(jù)移動(dòng)（英文不好^ - ^）缘挽，但是v-chart文檔并沒有寫瞄崇，所以只能是echarts文檔查看配置了呻粹，只能說echarts好多配置，看的很累苏研，好了等浊，簡單配置如下代碼：
// 這是v-chart柱狀圖
<template>
<div>
//這里需要綁定data-zoom屬性
<ve-histogram :data="chartData" :data-zoom="dataZoom"></ve-histogram>
</div>
</template>
<script>
export default {
data() {
this.dataZoom = [
{
type: 'slider',
start: 0,
end: 20
},
{
type: 'inside',
start: 0,
end: 20
}
]
return {
chartData: {
columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
rows: [
{ 日期: '1/1', 訪問用戶: 1393, 下單用戶: 1093, 下單率: 0.32 },
{ 日期: '1/2', 訪問用戶: 3530, 下單用戶: 3230, 下單率: 0.26 },
{ 日期: '1/3', 訪問用戶: 2923, 下單用戶: 2623, 下單率: 0.76 },
{ 日期: '1/4', 訪問用戶: 1723, 下單用戶: 1423, 下單率: 0.49 },
{ 日期: '1/4', 訪問用戶: 1723, 下單用戶: 1423, 下單率: 0.49 }
]
}
}
},
mounted() {}
}
</script>
這里簡單的解釋一下dataZoom 中的slider和inside這兩個(gè)的作用，配置slider摹蘑，圖標(biāo)就會(huì)出現(xiàn)滾動(dòng)條筹燕，可以使用鼠標(biāo)拖動(dòng)來查看數(shù)據(jù)，start開始顯示數(shù)據(jù)的位置衅鹿，這里是從 0%開始顯示撒踪，end是20%就是結(jié)束位置，相差就是圖表可視區(qū)域顯示整體數(shù)據(jù)的20%大渤。配置inside就是可以在圖表區(qū)域內(nèi)使用鼠標(biāo)滾輪來縮放顯示數(shù)據(jù)的范圍制妄。效果圖如下：
當(dāng)然，在echarts上有更多的配置泵三，有需要更多配置的當(dāng)然要去看echarts文檔了耕捞，這個(gè)就是v-chart上沒有寫的配置了，記錄一下烫幕。
v-chart配合flex布局俺抽，width: 0px;的重要性
通常后臺(tái)管理系統(tǒng)都少不了flex布局，因?yàn)橐獎(jiǎng)討B(tài)適應(yīng)頁面嘛纬霞！但是在頁面自動(dòng)縮放后發(fā)現(xiàn)v-chart表沒有隨預(yù)期的縮放凌埂，頁面變大圖表就會(huì)出現(xiàn)一塊空白，如下圖：
刷新頁面后诗芜，發(fā)現(xiàn)圖表又正常了瞳抓，充滿父元素，但是伏恐，在頁面縮小后孩哑，圖表沒有變小，出現(xiàn)了水平滾動(dòng)條翠桦，如下圖：
這里由于圖表沒有像預(yù)期一樣縮小横蜒，導(dǎo)致父元素沒有縮小，而造成沒有適應(yīng)布局销凑，這個(gè)是由于flex布局引起的丛晌，解決方案是，將父元素width設(shè)置為0斗幼，我的代碼如下：
// sass
.wrap{
display: flex;
.onLeft{
flex: 0 0 300px;
}
.onRight{
flex: 1 1 auto;
width: 0;
}
}
這樣的話澎蛛，可以是父元素自適應(yīng)布局，但是蜕窿，圖片長度會(huì)超出父元素谋逻，如下圖：
到這里也只是解決了flex布局呆馁，子元素過長，造成的自適應(yīng)問題毁兆，接著看浙滤。
監(jiān)聽v-chart縮放，自適應(yīng)布局
首先需要一個(gè)插件來監(jiān)聽頁面元素尺寸的變化气堕。
插件element-resize-detector：https://www.npmjs.com/package/element-resize-detector
首先纺腊。安裝這個(gè)插件
// npm包管理
npm install element-resize-detector
然后在vue對應(yīng)的頁面mounted中引入，就是在節(jié)點(diǎn)加載后送巡，開始監(jiān)聽對應(yīng)元素的變化
<template>
<div ref="chartWrap">
<ve-line :data="chartData" :data-zoom="dataZoom" :settings="chartSettings" height="300px" ref="chart"></ve-line>
</div>
</template>
export default {
mounted() {
// 獲取圖表節(jié)點(diǎn)和圖表父元素節(jié)點(diǎn)
const contall = this.$refs.chartWrap
const chart = this.$refs.chart
//引入插件
const elementResizeDetectorMaker = require('element-resize-detector')
const erd = elementResizeDetectorMaker({
strategy: 'scroll'
})
// 監(jiān)聽父元素尺寸變化摹菠，來重置圖表屬性
erd.listenTo(contall, function(element) {
// 圖表自帶的重置函數(shù)
chart.echarts.resize()
})
}
}
