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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
创建nuxt.js项目流程图解
Mar 13 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
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
python self,cls,decorator的理解
2009/07/13 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python数据归一化及三种方法详解
2019/08/06 Python
python enumerate内置函数用法总结
2020/01/07 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
李敖北大演讲稿
2014/05/24 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
张思德观后感
2015/06/09 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Python中的tkinter库简单案例详解
2022/01/22 Python