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: {
}
}
}
}
</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的入門使用還是比較簡單的，具體的一些個性化設定或修改可以根據文件進行自定義修改，看完本文如有疑問，可私信作者進行解答；
&n