vue-cli+v-charts實現可視化圖表

　　v-charts是餓了么團隊開源的一款基於Vue和Echarts的圖表工具，在使用 echarts 生成圖表時，經常需要做繁瑣的數據類型轉化、修改復雜的配置項，v-charts 的出現正是為了解決這個痛點。基於 Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統一提供一種對前后端都友好的數據格式設置簡單的配置項，便可輕松生成常見的圖表。

　　v-charts的中文社區文檔（https://v-charts.js.org/#/），可根據項目需要自主學習和瀏覽；

　　因為項目需要用到了折線圖的圖標展示，圖表用法大同小異，本文只講述利用v-charts來構建折線圖；

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

　　

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

 

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

　　

npm i v-charts echarts -S

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

　　

<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" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

　　安裝完v-charts之后，我們將要在我們的項目main.js中進行注冊和使用：

　　　　

// 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就已經安裝並完成了注冊了，安裝步驟和使用都還是比較方便簡潔的；

　　那么我們如何使用v-charts進行生成圖表呢？

　　

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

<script>
  export default {
    data: function () {
      return {
        chartData: {

 　　　　　　chartSettings:{

　　　　　　　　//設置中文圖例

　　　　　　　　labelMap:{

　　　　　　　　　　//date對應后台返回json數據的key，具體值根據接口字段來修改

　　　　　　　　　　date:"日期",

　　　　　　　　　　//total對應后台返回son數據的value，具體值根據接口字段來修改

　　　　　　　　　　total:"商戶數量"

　　　　　　　　　　}

　　　　　　　　},

　　　　　　chartData: {

　　　　　　　　//這里的格式必須是對應上面后台接口的字段才能顯示圖例

　　　　　　　　columns: ['date', 'total'],

　　　　　　　　rows: []

　　　　　　　　},

        }
      }
    }
  }
</script>

　　然后我們寫我們的方法進行axios請求后台數據進行填充，拿到的數據進行賦值給this.chartData.rows，數據類型要求是json格式的 數組

 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();
          })
      },

　　這樣，我們就可以通過調用接口進行可視化圖表展示了，效果圖如下（這個是移動端項目的圖表展示效果）：

　　

　　v-charts的入門使用還是比較簡單的，具體的一些個性化設置或修改可以根據文檔進行自定義修改，看完本文如有疑問，可私信作者進行解答；