vue-cli和v-charts实现可视化图表过程解析


Posted in Javascript onOctober 08, 2019

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回车;

vue-cli和v-charts实现可视化图表过程解析

进入命令行工具之后输入node -v(注意中间有空格),如果下载成功会输出node的版本号;(这里我的node版本是v10.16.1)

vue-cli和v-charts实现可视化图表过程解析

装好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" rel="external nofollow" >

安装完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: {
 

chartSettings:{




//设置中文图例




labelMap:{





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





date:"日期",





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





total:"商户数量"





}




},



chartData: {




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




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




rows: []




},
    }
   }
  }
 }
</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();
     })
   },

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

vue-cli和v-charts实现可视化图表过程解析

v-charts的入门使用还是比较简单的,具体的一些个性化设置或修改可以根据文档进行自定义修改

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 #Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 #Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
JavaScript 作用域实例分析
Oct 02 #Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 #Javascript
You might like
php表单提交问题的解决方法
2011/04/12 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
浅析php header 跳转
2013/06/17 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
理解Python中的With语句
2016/03/18 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python unittest框架操作实例解析
2020/04/13 Python
大学生毕业求职简历的自我评价
2013/10/24 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
七一党日活动总结
2014/07/08 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
先进个人推荐材料
2014/12/29 职场文书
领导干部考核评语
2015/01/04 职场文书