vue可視化圖表 基于Echarts封裝好的v-charts
近期公司又一個新的需求腿堤，要做一個訂單和銷售額統(tǒng)計的項目，需要用到可視化圖表來更直觀的展示數(shù)據(jù)如暖。首先我想到的是Echarts笆檀，眾所周知Echarts是一個應用很廣的可視化圖表庫，用來展示統(tǒng)計數(shù)據(jù)更合適不過盒至，但是偶然間發(fā)現(xiàn)了一個更為方便的圖表庫酗洒，就是我們今天要介紹的v-charts，它是基于Echarts圖表庫進行了一次封裝枷遂，讓我們可以更好更方便更簡單的來展示我們的數(shù)據(jù)樱衷，首先附上他的官方介紹：點擊這里
v-charts對于用戶很友好，把數(shù)據(jù)封裝成很好的模式酒唉，不進讓我們更好的來使用它矩桂，而且他還完全支持Echarts的所有方法和屬性。Echarts有的圖表痪伦，v-charts都進行了封裝侄榴。
下面先來一個柱狀圖：
現(xiàn)附上效果圖：
下面是使用方法：
1.安裝依賴
這里需要說明，由于v-charts是基于Echarts進行封裝的网沾，所以我們在安裝依賴的時候癞蚕，需要把Echarts和v-charts都進行安裝。
npm install echarts v-charts --save-dev
2.依賴安裝好之后绅这，我們直接引入v-charts即可涣达，我們在main.js中進行引入
import VCharts from 'v-charts'
Vue.use(VCharts)
3.我們在相應的組件中直接使用就可以了，比如說柱狀圖是ve-histogram，我們直接寫標簽即可度苔，不需要在創(chuàng)建一個div容器了
<ve-histogram
:data="chartData"
:colors="chartColor"
:legend-visible="true"
:loading="loading"
:data-empty="dataEmpty"
:extend="extend"
:settings="chartSettings">
</ve-histogram>
這里介紹一下我上面用到的幾個屬性匆篓，
data：就是我們要綁定的數(shù)據(jù)，下面會詳細介紹
colors：就是我們圖表中每一項對應的顏色
legend-visible：是否顯示圖例
loading：是否顯示loaidng
data-empty：在數(shù)據(jù)為空的時候寇窑，是否顯示暫無數(shù)據(jù)
extend：就是我們自定義的Echarts的原有屬性鸦概，在v-charts的一些屬性滿足不了我們的需求的情況下，我們可以配置extend甩骏，來直接使用Echarts的optios窗市，來覆蓋v-charts的屬性。
settings：一些v-charts封裝好的設置饮笛。
下面就是我們的屬性配置了：
在這里需要說明一下咨察，v-charts的無數(shù)據(jù)和loading的樣式是單獨的，如果需要這兩個需求福青，我們需要引入css摄狱，如果不需要，不引入就行无午。
import 'v-charts/lib/style.css'
export default {
name: 'VCharts',
data () {
return {
chartSettings: {
xAxisType: 'time',
area: true,
yAxisName: ['訂單總數(shù)', '訂單金額'],
axisSite: {right: ['orderAmount']},
labelMap: {'orderCount': '訂單數(shù)量', 'orderAmount': '訂單金額'}
},
chartData: {
columns: ['date', 'orderCount', 'orderAmount'],
rows: []
},
extend: {
series: {
symbolSize: 10,
label: {
normal: {
show: true
}
}
}
},
chartColor: ['#89dd47', '#3cabf4'],
loading: false,
dataEmpty: false
}
}
created () {
this.getData()
}
methods: {
async getData () {
const res = await getOrderData(})
if (res.data.length === 0) {
this.dataEmpty = true
} else {
this.chartData.rows = res.data.rows
this.dataEmpty = false
}
console.log(res)
},
}
}
上述代碼中的getOrderData()方法是我調用的接口方法媒役，如下所示：
// 圖表訂單和金額
export function getOrderData (res) {
return http.post({
url: base_url + '/order/getOrderData',
data: res
})
}
上述的http.post方法是我封裝的axios的post請求方法，篇幅有限宪迟，這里不在敘述酣衷，具體封裝方法，會在其他文章進行講解次泽。
在這里我展示一下請求過來的data的結構
rows: [
{date: '2018-11-01', orderCount: 10, orderAmount: 1093},
{date: '2018-11-02', orderCount: 20, orderAmount: 2230},
{date: '2018-11-03', orderCount: 33, orderAmount: 3623},
{date: '2018-11-04', orderCount: 50, orderAmount: 6423},
{date: '2018-11-05', orderCount: 80, orderAmount: 8492},
{date: '2018-11-06', orderCount: 60, orderAmount: 6293},
{date: '2018-11-07', orderCount: 20, orderAmount: 2293},
{date: '2018-11-08', orderCount: 60, orderAmount: 6293},
{date: '2018-11-09', orderCount: 50, orderAmount: 5293},
{date: '2018-11-10', orderCount: 30, orderAmount: 3293},
{date: '2018-11-11', orderCount: 20, orderAmount: 2293},
{date: '2018-11-12', orderCount: 80, orderAmount: 8293},
{date: '2018-11-13', orderCount: 100, orderAmount: 10293},
{date: '2018-11-14', orderCount: 10, orderAmount: 1293},
{date: '2018-11-15', orderCount: 40, orderAmount: 4293}
]
這些都完成之后穿仪，我們就能在瀏覽器看到一開是的截圖了。
下面附上完整代碼箕憾，由于異步接口無法直觀的展示我們的data結構牡借，所以我在完整代碼里面用的是靜態(tài)數(shù)據(jù)拳昌，方便大家更直觀的查看
<template>
<ve-histogram
:data="chartData"
:colors="chartColor"
:legend-visible="true"
:loading="loading"
:data-empty="dataEmpty"
:extend="extend"
:settings="chartSettings">
</ve-histogram>
</template>
<script>
const DATA_FROM_BACKEND = {
rows: [
{date: '2018-11-01', orderCount: 10, orderAmount: 1093},
{date: '2018-11-02', orderCount: 20, orderAmount: 2230},
{date: '2018-11-03', orderCount: 33, orderAmount: 3623},
{date: '2018-11-04', orderCount: 50, orderAmount: 6423},
{date: '2018-11-05', orderCount: 80, orderAmount: 8492},
{date: '2018-11-06', orderCount: 60, orderAmount: 6293},
{date: '2018-11-07', orderCount: 20, orderAmount: 2293},
{date: '2018-11-08', orderCount: 60, orderAmount: 6293},
{date: '2018-11-09', orderCount: 50, orderAmount: 5293},
{date: '2018-11-10', orderCount: 30, orderAmount: 3293},
{date: '2018-11-11', orderCount: 20, orderAmount: 2293},
{date: '2018-11-12', orderCount: 80, orderAmount: 8293},
{date: '2018-11-13', orderCount: 100, orderAmount: 10293},
{date: '2018-11-14', orderCount: 10, orderAmount: 1293},
{date: '2018-11-15', orderCount: 40, orderAmount: 4293}
]
};
import 'v-charts/lib/style.css'
export default {
name: 'VCharts',
data () {
return {
chartSettings: {
xAxisType: 'time',
area: true,
yAxisName: ['訂單總數(shù)', '訂單金額'],
axisSite: {right: ['orderAmount']},
labelMap: {'orderCount': '訂單數(shù)量', 'orderAmount': '訂單金額'}
},
chartData: {
columns: ['date', 'orderCount', 'orderAmount'],
rows: []
},
extend: {
series: {
symbolSize: 10,
label: {
normal: {
show: true
}
}
}
},
chartColor: ['#89dd47', '#3cabf4'],
loading: false,
dataEmpty: false
}
}
created () {
this.getData()
}
methods: {
async getData () {
const res = await getOrderData(})
if (res.data.length === 0) {
this.dataEmpty = true
} else {
this.chartData.rows = DATA_FROM_BACKEND.rows // 注意這里應該是接口給返回回來的數(shù)據(jù)袭异，為了方便展示data結構，我這里用的是靜態(tài)數(shù)據(jù)
this.dataEmpty = false
}
console.log(res)
},
}
}
</script>
以上就是v-charts的基本用法了炬藤，上面用的是柱狀圖御铃，其他例如：折線圖，餅狀圖等等都是這樣的用法沈矿，區(qū)別就是標簽不一樣
//折線圖
<ve-line :data="chartData"></ve-line>
//餅狀圖
<ve-pie :data="chartData"></ve-pie>
等等這里不在一一贅述上真，需要的直接去看v-charts官網介紹即可。
如果有我沒說明白的地方羹膳，歡迎大家給我留言或者私信睡互。
