快捷導(dǎo)航

vue-cli和v-charts實(shí)現(xiàn)可視化圖表過程解析

更新時(shí)間：2019年10月08日 09:31:16 作者：有夢(mèng)想的咸魚前端

這篇文章主要介紹了vue-cli和v-charts實(shí)現(xiàn)可視化圖表過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

v-charts是餓了么團(tuán)隊(duì)開源的一款基于Vue和Echarts的圖表工具，在使用 echarts 生成圖表時(shí)，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)，v-charts 的出現(xiàn)正是為了解決這個(gè)痛點(diǎn)?；?Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡(jiǎn)單的配置項(xiàng)，便可輕松生成常見的圖表。

v-charts的中文社區(qū)文檔（https://v-charts.js.org/#/），可根據(jù)項(xiàng)目需要自主學(xué)習(xí)和瀏覽；

因?yàn)轫?xiàng)目需要用到了折線圖的圖標(biāo)展示，圖表用法大同小異，本文只講述利用v-charts來構(gòu)建折線圖；

首先我們需要node和npm包管理工具，現(xiàn)在一般的新版本的node都已經(jīng)內(nèi)置npm包管理工具，node最新版本下載可去http://nodejs.cn/node官網(wǎng)進(jìn)行下載，下載安裝完成之后，我們可以按win+R快捷鍵打開運(yùn)行對(duì)話框，然后輸入cmd回車；

進(jìn)入命令行工具之后輸入node -v（注意中間有空格），如果下載成功會(huì)輸出node的版本號(hào)；（這里我的node版本是v10.16.1）

裝好node工具之后，我們可以在我們的項(xiàng)目終端或者項(xiàng)目文件夾中打開命令行工具輸入命令：

npm i v-charts echarts -S

輸入之后npm包管理工具就會(huì)自動(dòng)的去下載echarts；當(dāng)然，作為圖表可視化插件庫(kù)v-charts也為我們提供了cdn的方式（本文暫時(shí)只具體講述vue-vli模式安裝，cdn的方式就是直接通過標(biāo)簽引入文件即可）：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet"  rel="external nofollow" >

安裝完v-charts之后，我們將要在我們的項(xiàng)目main.js中進(jìn)行注冊(cè)和使用：

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'
Vue.use(VCharts)
new Vue({
 el: '#app',
 render: h => h(App)
})

這樣，我們的v-charts就已經(jīng)安裝并完成了注冊(cè)了，安裝步驟和使用都還是比較方便簡(jiǎn)潔的；

那么我們?nèi)绾问褂胿-charts進(jìn)行生成圖表呢？

<template>
//折線圖的視圖展示層，雙向綁定chartData進(jìn)行數(shù)據(jù)填充 
//雙向綁定settings，進(jìn)行一些設(shè)置
 <ve-line :data="chartData" ：settings="chartSettings"></ve-line>
</template>

<script>
 export default {
  data: function () {
   return {
    chartData: {
 　　　　　　chartSettings:{
　　　　　　　　//設(shè)置中文圖例
　　　　　　　　labelMap:{
　　　　　　　　　　//date對(duì)應(yīng)后臺(tái)返回json數(shù)據(jù)的key，具體值根據(jù)接口字段來修改
　　　　　　　　　　date:"日期",
　　　　　　　　　　//total對(duì)應(yīng)后臺(tái)返回son數(shù)據(jù)的value，具體值根據(jù)接口字段來修改
　　　　　　　　　　total:"商戶數(shù)量"
　　　　　　　　　　}
　　　　　　　　},
　　　　　　chartData: {
　　　　　　　　//這里的格式必須是對(duì)應(yīng)上面后臺(tái)接口的字段才能顯示圖例
　　　　　　　　columns: ['date', 'total'],
　　　　　　　　rows: []
　　　　　　　　},
    }
   }
  }
 }
</script>

然后我們寫我們的方法進(jìn)行axios請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行填充，拿到的數(shù)據(jù)進(jìn)行賦值給this.chartData.rows，數(shù)據(jù)類型要求是json格式的數(shù)組

 sevenTurnover(){
     this.$http({
       url:"merchantMain/sevenTurnover",
       method:"get",
       params:{
         machineCode:this.$route.query.machineCode
       }
     }).then((res)=>{
       console.log(res.data.data);
       this.chartData.rows=res.data.data;
       console.log(this.chartData.rows);
       this.turnoverNumber();
     })
   },

這樣，我們就可以通過調(diào)用接口進(jìn)行可視化圖表展示了，效果圖如下（這個(gè)是移動(dòng)端項(xiàng)目的圖表展示效果）：