vue可視化圖表 基于Echarts封裝好的v-charts
近期公司又一個(gè)新的需求，要做一個(gè)訂單和銷售額統(tǒng)計(jì)的項(xiàng)目，需要用到可視化圖表來更直觀的展示數(shù)據(jù)。首先我想到的是Echarts，眾所周知Echarts是一個(gè)應(yīng)用很廣的可視化圖表庫，用來展示統(tǒng)計(jì)數(shù)據(jù)更合適不過，但是偶然間發(fā)現(xiàn)了一個(gè)更為方便的圖表庫，就是我們今天要介紹的v-charts，它是基于Echarts圖表庫進(jìn)行了一次封裝，讓我們可以更好更方便更簡單的來展示我們的數(shù)據(jù)，首先附上他的官方介紹：點(diǎn)擊這里
v-charts對于用戶很友好，把數(shù)據(jù)封裝成很好的模式，不進(jìn)讓我們更好的來使用它，而且他還完全支持Echarts的所有方法和屬性。Echarts有的圖表，v-charts都進(jìn)行了封裝。
下面先來一個(gè)柱狀圖：
現(xiàn)附上效果圖：
下面是使用方法：
1.安裝依賴
這里需要說明，由于v-charts是基于Echarts進(jìn)行封裝的，所以我們在安裝依賴的時(shí)候，需要把Echarts和v-charts都進(jìn)行安裝。
npm install echarts v-charts --save-dev
2.依賴安裝好之后，我們直接引入v-charts即可，我們在main.js中進(jìn)行引入
import VCharts from 'v-charts'
Vue.use(VCharts)
3.我們在相應(yīng)的組件中直接使用就可以了，比如說柱狀圖是ve-histogram，我們直接寫標(biāo)簽即可，不需要在創(chuàng)建一個(gè)div容器了
<ve-histogram
:data="chartData"
:colors="chartColor"
:legend-visible="true"
:loading="loading"
:data-empty="dataEmpty"
:extend="extend"
:settings="chartSettings">
</ve-histogram>
這里介紹一下我上面用到的幾個(gè)屬性，
data：就是我們要綁定的數(shù)據(jù)，下面會(huì)詳細(xì)介紹
colors：就是我們圖表中每一項(xiàng)對應(yīng)的顏色
legend-visible：是否顯示圖例
loading：是否顯示loaidng
data-empty：在數(shù)據(jù)為空的時(shí)候，是否顯示暫無數(shù)據(jù)
extend：就是我們自定義的Echarts的原有屬性，在v-charts的一些屬性滿足不了我們的需求的情況下，我們可以配置extend，來直接使用Echarts的optios，來覆蓋v-charts的屬性。
settings：一些v-charts封裝好的設(shè)置。
下面就是我們的屬性配置了：
在這里需要說明一下，v-charts的無數(shù)據(jù)和loading的樣式是單獨(dú)的，如果需要這兩個(gè)需求，我們需要引入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()方法是我調(diào)用的接口方法，如下所示：
// 圖表訂單和金額
export function getOrderData (res) {
return http.post({
url: base_url + '/order/getOrderData',
data: res
})
}
上述的http.post方法是我封裝的axios的post請求方法，篇幅有限，這里不在敘述，具體封裝方法，會(huì)在其他文章進(jìn)行講解。
在這里我展示一下請求過來的data的結(jié)構(gòu)
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結(jié)構(gòu)，所以我在完整代碼里面用的是靜態(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 // 注意這里應(yīng)該是接口給返回回來的數(shù)據(jù)，為了方便展示data結(jié)構(gòu)，我這里用的是靜態(tài)數(shù)據(jù)
this.dataEmpty = false
}
console.log(res)
},
}
}
</script>
以上就是v-charts的基本用法了，上面用的是柱狀圖，其他例如：折線圖，餅狀圖等等都是這樣的用法，區(qū)別就是標(biāo)簽不一樣
//折線圖
<ve-line :data="chartData"></ve-line>
//餅狀圖
<ve-pie :data="chartData"></ve-pie>
等等這里不在一一贅述，需要的直接去看v-charts官網(wǎng)介紹即可。
如果有我沒說明白的地方，歡迎大家給我留言或者私信。
