AntV F2和vue-cli构建移动端可视化视图过程详解


Posted in Javascript onOctober 08, 2019

AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验。

AntV F2官方文档地址:https://antv.alipay.com/zh-cn/f2/3.x/

话不多说,直接进入正题:

Antv F2官方比较友好,给我们提供了两种方式方便我们使用,分别是CDN方式(引入在线资源 <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>)和npm安装方式,因为项目是vue-cli搭建的,同时CDN方式引入比较简单,引入文件即可使用,所以在项目中使用的是npm安装;

安装命令(必须在项目对应的文件夹路径下运行):

npm install @antv/f2 --save

安装完依赖之后接着就是需要引用到项目中,这里有个坑,官方提供的引用方式在vue里面是会报错的,官方提供的方式是下图

AntV F2和vue-cli构建移动端可视化视图过程详解 

如果在项目中是 import F2 from "@antv/f2" 这样引用是会报语法错误的,报错信息为:“chart.pieLabel is not a function”,所以安装方式建议修改为

import F2 from "@antv/f2/lib/index-all",这样引用是可以正常使用不报错的,亲测可用;

安装完依赖和引用文件资源之后,就可以直接进行图表配置和开发了;我在项目中用到了环形图,直接进入环形图Demo案例界面看看Demo,

https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html#_%E9%A5%BC%E5%9B%BE,

首先使用的时候视图层很简单,一个大div包住canvas标签即可

<div class="chart-wrapper">
  <canvas id="mountNode"></canvas>
 </div>

接着就是数据逻辑层根据文档介绍:

 //模拟数据,也可以根据ajax进行请求后台数据 
var data = [{
  const: 'const',
  type: '交通出行',
  money: 51.39
 }, {
  const: 'const',
  type: '饮食',
  money: 356.68
 }, {
  const: 'const',
  type: '生活日用',
  money: 20.00
 }, {
  const: 'const',
  type: '住房缴费',
  money: 116.53
 }];
//配置视图id与上面html对应
 var chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
 });

//定义渲染数据源
 chart.source(data);

//定义图表类型样式,其中radius和innerRadius可以更改环形的大小
 chart.coord('polar', {
  transposed: true,
  radius: 0.9,
  innerRadius: 0.5
 });
 chart.axis(false);
 //图表图例
 chart.legend(false);
 // 图表提示信息
 chart.tooltip(false);
 //这里可以配置更改环形中心文字
 chart.guide().html({
  position: ['50%', '50%'],
  html: '<div style="text-align: center;width:150px;height: 50px;">\n   <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n   <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n   </div>'
 });
 // 配置图表颜色样式和定位
 chart.interval().position('const*money').adjust('stack').color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']);

//配置一些基本的文本信息及样式
 chart.pieLabel({
  sidePadding: 30,
  activeShape: true,
  label1: function label1(data) {
   return {
    text: '¥' + data.money,
    fill: '#343434',
    fontWeight: 'bold'
   };
  },
  label2: function label2(data) {
   return {
    text: data.type,
    fill: '#999'
   };
  },

//点击事件
  onClick: function onClick(ev) {
   var data = ev.data;
   if (data) {
    $('#title').text(data.type);
    $('#money').text(data.money);
   }
  }
 });
 // 最后渲染即可
 chart.render();

就这样配置,就可以了,但是有个问题我们在vue中是不能直接这么写的,所以我们需要把这些代码定义在一个方法里放在methods对象里面,然后挂载时执行即可,效果图如下:

AntV F2和vue-cli构建移动端可视化视图过程详解

这里有个坑,就是我们用AntV F2的时候不能跟之前的习惯一样直接放在mounted函数中执行,不然会造成图表处空白,刷新一下才能好这种bug,出现这个问题的原因昨天下午想了很久没想通没有得到解决,早上来公司的时候突然恍然大悟:造成这种bug的原因其实很简单,就是因为Ant F2是jquery方式写的,并且还有操作DOM,我们直接在mounted上直接执行方法就会带来一个问题就是js已经执行了,但是DOM元素还没渲染完成,图表没有数据,所以才会空白,并且mounted方法是加载完成再次进入会存入缓存的,所以才会刷新一下才能好;我这里的解决方案是直接设置个定时器setTimeout,直接延迟1秒左右执行方式就可以解决;

再简单介绍一个折线图的使用方法:

HTML视图层代码:

<div class="chart-wrapper">
  <canvas id="mountNode"></canvas>
 </div>

js数据逻辑层代码:

//模拟数据
var data = [{
  day: '周一',
  value: 300
 }, {
  day: '周二',
  value: 400
 }, {
  day: '周三',
  value: 350
 }, {
  day: '周四',
  value: 500
 }, {
  day: '周五',
  value: 490
 }, {
  day: '周六',
  value: 600
 }, {
  day: '周日',
  value: 900
 }];
// 与上面的视图层对应
 var chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
 });

//配置数据源
 chart.source(data, {、

//value和day都是根据模拟数据的属性来配置的,所以这里的value和day是可以更改的,具体根据后台数据属性来
  value: {
   tickCount: 5,
   min: 0
  },
  day: {
   range: [0, 1]
  }
 });

// 配置文本提示信息以及触发的方法
 chart.tooltip({
  showCrosshairs: true,
  showItemMarker: false,
  onShow: function onShow(ev) {
   var items = ev.items;
   items[0].name = null;
   items[0].value = '$ ' + items[0].value;
  }
 });

//配置对应方式
 chart.axis('day', {
  label: function label(text, index, total) {
   var textCfg = {};
   if (index === 0) {
    textCfg.textAlign = 'left';
   } else if (index === total - 1) {
    textCfg.textAlign = 'right';
   }
   return textCfg;
  }
 });

// 配置定位
 chart.line().position('day*value');

//配置图表样式
 chart.point().position('day*value').style({
  stroke: '#fff',
  lineWidth: 1
 });

//渲染
 chart.render();

配置完之后我们就可以看到效果了,效果图如下:

AntV F2和vue-cli构建移动端可视化视图过程详解

最后我们来总结一下:

(1) 首先我们在工作中肯定会碰到各种各样的问题或者说bug,一定要理性的分析和解决,不能钻进误区不出来,如果多次尝试还是没办法解决,那很大的概率就是你自己进入了误区,这个时候就需要冷静下来分析和思考,我遇到的就是典型的案例;

(2)在使用这种可视化图表的时候有些部分功能是不可使用的,比如环形图的点击展示图例,这是因为AntV F2是用jquey实现的,你的项目中没有引入的话是会报错(“$ is not defined”),如果确实需要使用引入jquery即可

(3)正是因为AntV F2是jquery开发的,需要操作DOM树,所以有的时候会造成js已经执行了但是DOM元素还没有渲染完成的情况,这个时候我们要想到换种思路比如setTimeout即可解决,考虑问题要多元化和全面,办法总比困难多

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

Javascript 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 #Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 #Javascript
新手入门js闭包学习过程解析
Oct 08 #Javascript
关于JSON解析的实现过程解析
Oct 08 #Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 #Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 #Javascript
webpack HappyPack实战详解
Oct 08 #Javascript
You might like
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php微信开发之关注事件
2018/06/14 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python requests库用法实例详解
2018/08/14 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
饭店工作计划书
2014/01/10 职场文书
教师党员个人整改措施
2014/10/27 职场文书
面试通知短信
2015/04/20 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
党员发展大会主持词
2015/07/03 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB