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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JavaScript数组操作详解
Feb 04 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
js压缩利器
2007/02/20 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
jQuery实现评论模块
2020/08/19 jQuery
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python中按键来获取指定的值
2019/03/02 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python列表切片常用操作实例解析
2020/03/10 Python
如何用python批量调整视频声音
2020/12/22 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
中学生自我鉴定
2014/02/04 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
运动会主持词大全
2015/07/02 职场文书