vue移动端用什么数据可视化插件_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模式安装，c