每次用到 v-charts 我都一陣頭疼，因爲明明是相同的功能，但是我好像每次用到的解決方法都不一樣？？每次都是在api中各種查，各種嘗試...
直到做了個各種數據圖形的需求，決定還是好好整理一下吧～～
本文涉及到的文檔：
v-chart文檔地址
v-chart源（echarts）文檔
可選擇的圖表插件：
G2圖表插件，你可選擇的不止一種～
本篇涉及到：
- label（餅圖） 數據展示
- label（雷達） 數據更替
- 餅圖 數據顏色更改
- 柱狀圖 x軸標尺旋轉
- 柱狀圖 x軸標尺全部展示
setOption下的屬性都可以直接使用，紅框標註的是最常用的一些屬性，如果有些屬性沒用失效，不妨給傳入的屬性值放入options中，如下面餅圖中的 colors 屬性
餅狀圖事例
<ve-pie
:data="readAbilityIntervalData.pieData"
:tooltip-visible="false"
:settings="readAbilityIntervalData.settings"
:colors="options.colors"
>
</ve-pie>
readAbilityIntervalData: {
pieData: {
columns: ['distributionName', 'ratio'],
rows: [ // 數據
{
"distributionName":"落後",
"ratio":"8" // 8% X 只能傳入number 8% 不識別
},
{
"distributionName":"不足",
"ratio":"13"
},
{
"distributionName":"一般",
"ratio":"39"
},
{
"distributionName":"良好",
"ratio":"30"
},
{
"distributionName":"優秀",
"ratio":"7"
},
{
"distributionName":"拔尖",
"ratio":"3"
}
]
},
msg: '',
settings: {
dataType: 'percent',
label: {
show: true,
position: 'outside',
formatter: '{c}%', // 展示如果需要％
}
}
},
// 重置顏色，圖標如果需要顏色，優先從用戶提供的colors中依次提取，用戶不提供，則根據默認的顏色進行選取
options: {
colors: ['#6ab58f','#80c5d8', '#c8abda', '#dcdb5e', '#e89b84', '#abb7bb','#76d2d2']
},
- colors屬性雖然也在 setOptions下面，但是在傳值時必須在options對象中，且對應的屬性值類型爲Array
-
label.formatter屬性：
字符串模板 模板變量有： // 模版變量可以直接使用 {a}：系列名。 {b}：數據名。 {c}：數據值。 {@xxx}：數據中名爲'xxx'的維度的值，如{@product}表示名爲'product'` 的維度的值。 {@[n]}：數據中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數。
柱形圖事例
// 根據數據列表進行循環 1-6年級
<div :class="idx<1 ? 'mt-30' : ''" v-for="(val, idx) in readERCompareData.dataList12" :key="idx">
<h3>{{gradeList[val.grade]}}</h3>
<div>
<ve-histogram
:data="val.histogramData"
:tooltip-visible="false"
:legend-visible="false"
:settings="readERCompareData.settings"
:xAxis="val.xAxisSet"
>
</ve-histogram>
</div>
</div>readERCompareData: {
dataList12: [
{
grad: 1,
histogramData: {
columns: ["regionName", "averageErScore"],
rows: [
{
averageErScore: 313,
regionName: "全國"
},
{
averageErScore: 301,
regionName: "邯鄲市"
},
{
averageErScore: 299,
regionName: "邱縣"
},
{
averageErScore: 320,
regionName: "經濟開發區"
}
]
},
xAxisSet: {
axisLabel: {
interval: 0,
rotate: 60
},
data: ["全國", "邯鄲市", "邱縣", "經濟開發區"],
// interval: 0,如果數據過多，即使設置爲0，依然不能夠順序展示x軸，可以重新賦值data，解決此問題
type: "category"
}
},
// Object{...}
],
settings: {
label: {
show: true,
position: 'top',
color: '#333'
},
itemStyle: {
color: '#6ab58f',
borderColor: '#6ab58f'
}
}
},//--------------接口返回數據---------------
"dataList":[
{
"grade":1,
"areaCapabilityCompareVOList":[
{
"type":2,
"regionCode":"000000",
"regionName":"全國",
"averageErScore":306
},
{
"type":3,
"regionCode":"130400",
"regionName":"邯鄲市",
"averageErScore":292
},
{
"type":1,
"regionCode":"130430",
"regionName":"邱縣",
"averageErScore":289
}
// Object{...},
// Object{...}
]
},
// Object{...}, // 2年級
// Object{...}, // 3年級
// Object{...}, // 4年級
// Object{...}, // 5年級
// Object{...} // 6年級
]
//--------------處理接口返回數據---------------let _dataList = []
let _xAxisSet = {
type: 'category',
axisLabel:{
interval:0, // 強制全部顯示 1-間隔顯示 2-...
rotate:60,//傾斜顯示，-：順時針旋轉，+或不寫：逆時針旋轉
}
}
res.dataList.forEach((el, idx) => {
let newObj = {}
newObj.grade = el.grade
newObj.xAxisSet = {
data: []
}
newObj.histogramData = {
columns: ['regionName', 'averageErScore'],
rows: []
}
el.areaCapabilityCompareVOList.map((obj) => {
newObj.histogramData.rows.push({
regionName: obj.regionName,
averageErScore: obj.averageErScore
})
newObj.xAxisSet.data.push(obj.regionName)
Object.assign(newObj.xAxisSet, _xAxisSet)
})
_dataList.push(newObj)
})
this.readERCompareData.dataList12 = _dataList.slice(0, 2)- 在表格寬度有限時，爲了能夠展示完整的數據，可以將x軸的數據進行旋轉。 rotate可以根據數據量的多少進行定義，數據多就旋轉角度大點，數據少也可以不旋轉。
雷達圖
// 根據數據列表進行循環 1-6年級
<div :class="idx<2 ? 'mt-30' : ''" v-for="(val, idx) in readUnderstandListData.dataList" :key="idx">
<h3>{{gradeList[val.grade]}}</h3>
<div>
<ve-radar
:data="val.radarData"
:tooltip-visible="false"
:settings="readUnderstandListData.settings"
:colors="options.colors"
>
</ve-radar>
</div>
</div>
readUnderstandListData: {
dataList: [
{
grad: 5,
radarData: {
columns: ["type", "sjyy", "hqxx", "zcpj", "xcjs", "ztgz"],
rows: [
{
hqxx: "0.40",
sjyy: "0.47",
type: "全國",
xcjs: "0.40",
zcpj: "0.40",
ztgz: "0.40"
},
{
hqxx: "0.40",
sjyy: "0.43",
type: "邯鄲市",
xcjs: "0.40",
zcpj: "0.40",
ztgz: "0.40"
}
]
}
},
// Object{...}
],
settings: {
label: {
show: true,
position: 'top',
color: '#333'
},
dataType: 'percent',
labelMap: { // label顯示更改
'sjyy': '實際運用',
'hqxx': '獲取信息',
'zcpj': '做出評價',
'xcjs': '形成解釋',
'ztgz': '整體感知'
}
}
},
- labelMap 可以更改label的數據顯示
- 在做數據處理時，儘量避免出現多餘的小數 number.toFixed(2)