如何配置圖表信息
echart的配置項可謂是相當的海量,能不看就不看。而v-chart對其進行了不少的簡化,所以我們想要自定義一個圖表時,最好按照以下步驟來檢查:
圖表私有屬性
v-chart每一個圖表都有自己獨有的設置項,想要配置這些項需要在組件上加入 :setting="chartSettings"
,然後在vue組建的data裏設置chartSettings的值,如下:
<template>
<ve-line :data="chartData" :settings="chartSettings"></ve-line>
</template>
<script>
export default {
data () {
this.chartSettings = {
xAxisType: 'time'
}
return {
chartData: {
columns: ['日期', '訪問用戶'],
rows: [
{ '日期': '2018-01-01', '訪問用戶': 1393 },
{ '日期': '2018-01-02', '訪問用戶': 3530 },
{ '日期': '2018-01-03', '訪問用戶': 2923 }
]
}
}
}
}
</script>
圖表公有屬性
v-chart所有圖表組件中共有的屬性,直接在圖標組件上掛載:屬性名稱="屬性值"
即可設置,下面是一些比較常用的
名稱 | 類型 | 默認值 | 介紹 |
---|---|---|---|
data | Object | 無 | 圖表的顯示數據 |
setting | Object | 無 | 圖表的私有屬性 |
height | String | 400px | 高度 |
width | String | auto | 寬度,默認根據高度自動適配 |
tooltip-visible | boolean | true | 是否顯示提示框 |
legend-visible | boolean | true | 是否顯示圖例 |
extend | Object | 無 | 設置echart的詳細屬性 |
公共屬性上最重要的可以說就是extend屬性了,在vchart的公共屬性裏extend居然不在基本屬性了,而是放在文檔後面專門開了一段講。當時爲了找到這個屬性可以說是廢了老半天功夫。如果你在前兩者中都沒有找到想要的設置項,那就可以通過這個屬性來設置echart的配置,畢竟是基於echart的嘛,所以echart的所有配置在這裏都可以適用,下邊是配置示例:
<template>
<ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram>
</template>
<script>
export default {
data () {
this.chartExtend = {
series: {
barWidth: 10
},
tooltip: {
trigger: 'none'
}
}
/* 等同於
this.chartExtend = {
series (v) {
v.forEach(i => {
i.barWidth = 10
})
return v
},
tooltip (v) {
v.trigger = 'none'
return v
}
}
等同於
this.chartExtend = {
'series.0.barWidth': 10,
'series.1.barWidth': 10,
'tooltip.trigger': 'none'
}
*/
return {
chartData: { ... }
}
}
}
</script>
Echart配置項
接下來就是重頭戲了,如果你在前兩者裏都沒有找到,那就只能從echart的配置項裏找了,下面是一些目前比較常用的配置項
名稱 | 類型 | 介紹 |
---|---|---|
legend | Object | 用於控制圖表的圖例組件,包括位置、樣式、類型、圖標等 |
series | Object | 每個圖表的專屬設置項,用於控制圖表的詳細樣式位置等 |
其中series的屬性就可以完成絕大多數配置了,下邊是一個配置示例 實現的效果爲:
- 圖例位於圖表右方,且距右邊緣20px
- 圖例顏色#A0A0A0,字體12px
- 環圖中心相對於左上角距離112px, s92px
- 隱藏環圖上的文本標籤和引導線
- 環圖內半徑55px與外半徑72px
//template
<ve-ring :settings="chartSetting" legend-position="right" :extend="chartExtend"></ve-ring>
...
//script
data () {
return {
chartExtend: {
series: {
center: [112, 92]
},
legend: {
right: 20,
textStyle: {
color: '#A0A0A0',
fontSize: 12
}
}
}
chartSetting: {
label: {
show: false
},
labelLine: {
show: false
},
radius: [55, 72]
}
}
}