首页
找靠谱产品
找解决方案
找靠谱公司
找案例
找对的人
专家智库
悬赏任务
SAAS
ToB门户
了解全球最新的ToB事件
论坛
潜水/灌水快乐,沉淀知识,认识更多同行。
ToB圈子
加入IT圈,遇到更多同好之人。
微博
Follow
记录
Doing
博客
Blog
文库
业界最专业的IT文库,上传资料也可以赚钱
下载
分享
Share
排行榜
Ranklist
相册
Album
应用中心
qidao123.com ToB IT社区-企服评测·应用市场
»
论坛
›
软件与程序人生
›
后端开发
›
Java
›
csm移动端h5用什么样的视觉方案?
返回列表
发新帖
csm移动端h5用什么样的视觉方案?
[复制链接]
发表于 2022-9-17 08:35:48
|
显示全部楼层
|
阅读模式
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要
登录
才可以下载或查看,没有账号?
立即注册
×
项目需要求在移动端H5需要展示一些数据统计的图表,虽然第一时间想到的是echarts,常用还有
Highcharts
,
D3
等,antv家族的图表UI好看一些,再加上F2是移动端可视化方案于是就选择F2,打开官网果然眼前一亮F2提供的正能满足需求,F2官网地址:https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html初次使用记录一下掘坑之路:一,快速上手(此处参考官方api
文档
就可以完成https://www.yuque.com/antv/f2/getting-started)1.习惯在vue里面使用cnpm安装,执行 cnpm install @antv/f2 --save
2.安装完成之后就是使用了,根据api提供的引用方式在vue里面是玩不转的,涉及到图表交互的需要点击的图表会报js错误( 'interaction' is not a function),当然也不是没有解决的办法的,看过源码会发现可以修改引用路径解决:const F2 = require('@antv/f2/lib/index')复制
代码
二,开始使用使用也特别的简单,官方api给到的非常的详细,首先需要创建 标签,我们就可以进行简单的图表绘制:创建 Chart 图表对象,指定图表 ID、指定图表的宽高、边距等信息;载入图表数据源;使用图形语法进行图表的绘制;渲染图表。在官方demo中选择相应自己想要的图表可以查看到
代码
,应用到vue项目中就可以了,根据需求作相应的更改。
至此就可以看到效果了,是不是很简单大厂的东西就是香,真正做到了开箱即用! 三,效果展示
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复
使用道具
举报
返回列表
羊蹓狼
+ 我要发帖
登录后关闭弹窗
登录参与点评抽奖 加入IT实名职场社区
去登录
微信订阅号
微信服务号
微信客服(加群)
H5
小程序
快速回复
返回顶部
返回列表