循序漸進VUE+Element 前端應用開發(10）--- 基於vue-echarts處理各種圖表展示
在我們做應用系統的時候，往往都會涉及圖表的展示，綜合的圖表展示能夠給客戶帶來視覺的享受和資料直觀體驗，同時也是增強客戶認同感的舉措之一。基於圖表的處理，我們一般往往都是利用對應第三方的圖表元件，然後在這個基礎上為它的資料模型提供符合要求的圖表資料即可，VUE+Element 前端應用也不例外，我們這裡使用了基於vue-echarts元件模組來處理各種圖表vue-echarts是對echarts圖表元件的封裝。
1、圖表元件的安裝使用
首先使用npm 安裝vue-echarts元件。
git地址：https://github.com/ecomfe/vue-echarts
NPM安裝命令
npm install echarts vue-echarts
然後在對應模組頁面裡面引入對應的元件物件，如下程式碼所示。
<script> import ECharts from 'vue-echarts' // 主圖表物件 import 'echarts/lib/chart/line' // 曲線圖表 import 'echarts/lib/chart/bar' // 柱狀圖 import 'echarts/lib/chart/pie' // 餅狀圖 import 'echarts/lib/component/tooltip' // 提示資訊
接著在Vue元件裡面物件中加入物件即可。
export default {
components: {
'v-chart': ECharts
},如果是全域性註冊使用，那麼可以在main.js裡面進行載入
// 註冊元件後即可使用
Vue.component('v-chart', VueECharts)
我們來看看圖表展示的效果圖
柱狀圖效果
餅狀圖
曲線圖
其他型別，極座標和散點圖形
或者曲線和柱狀圖組合的圖形
更多的案例可以參考官網的展示介紹：https://echarts.apache.org/examples/zh/index.html
2、各種圖表的展示處理
對於我們需要的各種常規的柱狀圖、餅狀圖、折線圖（曲線圖）等，我下來介紹幾個案例程式碼，其他的一般我們根據官方案例提供的data資料模型，構造對應的資料即可生成，就不再一一贅述。
另外，我們也可以參考Vue-echarts封裝的處理demo:https://github.com/ecomfe/vue-echarts/tree/master/src/demo
對於柱狀圖，效果如下
在Vue模組頁面的Template 裡面，我們定義介面程式碼如下即可。
<v-chart ref="simplebar" :options="simplebar" autoresize />
然後在data裡面為它準備好資料即可，如下程式碼所示。
data() {
return {
simplebar: {
title: { text: '柱形圖Demo' },
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
}
當然我們也可以把這些構造對應資料的邏輯放在單獨的JS檔案裡面，然後匯入即可。
例如對於餅圖，它的介面效果如下所示。
它的vue檢視下，Template裡面的程式碼如下所示。
<v-chart ref="pie" :options="pie" autoresize />
一般對於圖表的資料，由於處理程式碼可能不少，建議是獨立放在一個JS檔案裡面，然後我們通過import匯入即可使用。
然後在data裡面引入對應的物件即可，如下所示。
<script>
import ECharts from 'vue-echarts' // 主圖表物件
import 'echarts/lib/chart/line' // 曲線圖表
import 'echarts/lib/chart/bar' // 柱狀圖
import 'echarts/lib/chart/pie' // 餅狀圖
import 'echarts/lib/component/tooltip' // 提示資訊
// 匯入報表資料
import getBar from './chartdata/bar'
import pie from './chartdata/pie'
import scatter from './chartdata/scatter'
import lineChart from './chartdata/lineChart'
import incomePay from './chartdata/incomePay'
export default {
components: {
'v-chart': ECharts
},
return {
pie,
scatter,,
lineChart,
incomePay,
simplebar: {
title: { text: '柱形圖Demo' },
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
其中pie.js裡面放置的是處理餅圖資料的邏輯，如下程式碼所示。
export default {
title: {
text: '餅圖程式呼叫高亮示例',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接訪問' },
{ value: 310, name: '郵件營銷' },
{ value: 234, name: '聯盟廣告' },
{ value: 135, name: '視訊廣告' },
{ value: 1548, name: '搜尋引擎' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
在介面處理的時候，值得注意的時候，有時候Vue頁面處理正常，但是圖表就是沒有出來，可能是因為高度或者寬度為0的原因，需要對對應的樣式進行處理設定，以便能夠正常顯示出來。
如下是我 對圖表的設定的樣式處理，使得圖表在一個卡片的位置能夠顯示正常。
<style scoped>
.echarts { width: 100%; height: 400px;}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
margin-bottom: 20px;
}
</style>
最後幾個介面組合一起的效果如下所示。
以上就是基於vue-echarts處理各種圖表展示，其中常規的引入元件很容易的，主要就是需要根據對應的圖表案例，參考資料組成的規則，從而根據我們實際情況構建對應的資料，賦值給對應的模型變數即可。
列出以下前面幾篇隨筆的連線，供參考：
循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備工作
循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）--- 獲取後端資料及產品資訊頁面的處理
循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和欄位轉義處理
循序漸進VUE+Element 前端應用開發(6）--- 常規Element 介面元件的使用
循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式
循序漸進VUE+Element 前端應用開發(8）--- 樹列表元件的使用
循序漸進VUE+Element 前端應用開發(9）--- 介面語言國際化的