今天就跟大家聊聊有關(guān)使用vue-cli和v-charts怎么實(shí)現(xiàn)一個(gè)可視化圖表，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供陽(yáng)東網(wǎng)站建設(shè)、陽(yáng)東做網(wǎng)站、陽(yáng)東網(wǎng)站設(shè)計(jì)、陽(yáng)東網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、陽(yáng)東企業(yè)網(wǎng)站模板建站服務(wù)，10年陽(yáng)東做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶(hù)體驗(yàn)。

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

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

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

npm i v-charts echarts -S

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

安裝完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)行生成圖表呢？

然后我們寫(xiě)我們的方法進(jìn)行axios請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行填充，拿到的數(shù)據(jù)進(jìn)行賦值給this.chartData.rows，數(shù)據(jù)類(lèi)型要求是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();
     })
   },

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

看完上述內(nèi)容，你們對(duì)使用vue-cli和v-charts怎么實(shí)現(xiàn)一個(gè)可視化圖表有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：使用vue-cli和v-charts怎么實(shí)現(xiàn)一個(gè)可視化圖表-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/dshgdi.html