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 相关文章推荐
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
json传值以及ajax接收详解
May 24 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
浅谈javascript错误处理
Aug 11 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 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超牛逼无限极分类生成树方法
2015/05/11 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python 实现dict转json并保存文件
2019/12/05 Python
python路径的写法及目录的获取方式
2019/12/26 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python eventlet绿化和patch原理
2020/11/21 Python
html5 标签
2009/07/16 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
应届生体育教师自荐信
2013/10/03 职场文书
运动会入场词60字
2014/02/15 职场文书
食品安全标语
2014/06/07 职场文书
医德医风自我评价
2014/09/19 职场文书
2014年保洁工作总结
2014/11/24 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
Golang二维数组的使用方式
2021/05/28 Golang
python四种出行路线规划的实现
2021/06/23 Python
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
Python字符串的转义字符
2022/04/07 Python