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 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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中计算时间差的几种方法
2009/12/31 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
js加解密 脚本解密
2008/02/22 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python 学习笔记
2008/12/27 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python变量作用范围实例分析
2015/07/07 Python
Python通过future处理并发问题
2017/10/17 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python实现猜拳游戏
2020/03/04 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
总经理职责范文
2013/11/08 职场文书
高一政治教学反思
2014/01/28 职场文书
爱情保证书范文
2014/02/01 职场文书
放弃继承权公证书
2015/01/23 职场文书
遗嘱范文
2015/08/07 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
Pygame Event事件模块的详细示例
2021/11/17 Python