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

//折线图的视图展示层，双向绑定chartData进行数据填充

//双向绑定settings，进行一些设置

export default {

data: function () {

return {

chartData: {

chartSettings:{

//设置中文图例

labelMap:{

//date对应后台返回json数据的key，具体值根据接口字段来修改

date:"日期",

//total对应后台返回son数据的value，具体值根据接口字段来修改

total:"商户数量"

}

},

chartData: {

//这里的格式必须是对应上面后台接口的字段才能显示图例

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

rows: []

},

}

}

}

}

然后我们写我们的方法进行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的入门使用还是比较简单的，具体的一些个性化设置或修改可以根据文档进行自定义修改，看完本文如有疑问，可私信作者进行解答；

AntV F2+vue-cli构建移动端可视化视图

AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex), 完备的图形语法理论,满足你的各种可视化需求,专业的移动设 ...

vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...

Vue Cli安装以及使用

因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

@vue/cli 3.x项目脚手架 webpack 配置

@vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

vue/cli新旧版本安装方式

一.老版本安装  Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...

[转]Vue CLI 3搭建vue+vuex 最全分析