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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
koa+jwt实现token验证与刷新功能
May 30 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python中asyncore的用法实例
2014/09/29 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Numpy数组的保存与读取方法
2018/04/04 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
运动会开幕式邀请函
2014/02/03 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
绿色出行口号
2014/06/18 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL