使用vue-cli和v-charts怎么实现一个可视化图表-创新互联

今天就跟大家聊聊有关使用vue-cli和v-charts怎么实现一个可视化图表，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

首先我们需要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的方式就是直接通过标签引入文件即可）：

安装完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进行生成图表呢？

然后我们写我们的方法进行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();
     })
   },

这样，我们就可以通过调用接口进行可视化图表展示了，效果图如下（这个是移动端项目的图表展示效果）：

看完上述内容，你们对使用vue-cli和v-charts怎么实现一个可视化图表有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。