您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“O2OA上怎么使用F2移动端图表”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验。
cdn.nlark.com/yuque/0/2020/png/686683/1591754374183-c92a07ed-a81f-4b47-8608-1c7bc6281bbd.png?x-oss-process=image/resize,w_838">
O2OA上使用F2样例
this.define("init", function(){ var action = this.Actions.load("x_processplatform_assemble_bam"); o2.load("../o2_lib/antv/f2.js", function(){ action.StateAction.summary(function( json ){ var summaryData = json.data; const data = [ { genre: '待办', sold: summaryData.taskCount }, { genre: '已办', sold: summaryData.taskCompletedCount }, { genre: '待阅', sold: summaryData.readCount }, { genre: '已阅', sold: summaryData.readCompletedCount } ]; // Step 1: 创建 Chart 对象 const chart = new F2.Chart({ id: 'myChart1', pixelRatio: window.devicePixelRatio // 指定分辨率 }); // Step 2: 载入数据源 chart.source(data); // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴 chart.interval().position('genre*sold').color('genre'); // Step 4: 渲染图表 chart.render(); }.bind(this),null,false ); }.bind(this)); }); this.init();
“O2OA上怎么使用F2移动端图表”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。