csm移动端h5用什么样的视觉方案?

项目需要求在移动端H5需要展示一些数据统计的图表,虽然第一时间想到的是echarts,常用还有HighchartsD3等,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
csm移动端h5用什么样的视觉方案?

2.安装完成之后就是使用了,根据api提供的引用方式在vue里面是玩不转的,涉及到图表交互的需要点击的图表会报js错误( 'interaction' is not a function),当然也不是没有解决的办法的,看过源码会发现可以修改引用路径解决:
const F2 = require('@antv/f2/lib/index')复制代码
二,开始使用
使用也特别的简单,官方api给到的非常的详细,首先需要创建 <canvas> 标签,我们就可以进行简单的图表绘制:
创建 Chart 图表对象,指定图表 ID、指定图表的宽高、边距等信息;
载入图表数据源;
使用图形语法进行图表的绘制;
渲染图表。
在官方demo中选择相应自己想要的图表可以查看到代码,应用到vue项目中就可以了,根据需求作相应的更改。
csm移动端h5用什么样的视觉方案?

csm移动端h5用什么样的视觉方案?

 
至此就可以看到效果了,是不是很简单大厂的东西就是香,真正做到了开箱即用!
 
 
三,效果展示
csm移动端h5用什么样的视觉方案?

csm移动端h5用什么样的视觉方案?

csm移动端h5用什么样的视觉方案?

 

原文链接:https://www.cnblogs.com/gddg/p/16659052.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:csm移动端h5用什么样的视觉方案? - Python技术站

(0)
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • iOS16新特性 | 灵动岛适配开发与到家业务场景结合的探索实践

    作者:京东零售 姜海 灵动岛是苹果在iPhone 14 Pro和iPhone 14 Pro Max上首次提出的全新UI交互形式,创新性的让虚拟软件和硬件的交互变得更为流畅。当有来电、短信等通知时,灵动岛会变化形态,以便让用户能够更直观地接收到这些信息。 而在用户使用一些应用App,比如音乐,并将其切换到后台时,灵动岛也能以另一种形态来显示这些软件,还可以通过…

    IOS 2023年4月17日
    00
  • Apple Xcode 14 (14A309) 正式版发布 (含下载)

    Command Line Tools for Xcode 14tvOS 16 Simulator RuntimewatchOS 9 Simulator Runtime 请访问原文链接:https://sysin.org/blog/apple-xcode-14/,查看最新版。原创作品,转载请保留出处。 作者主页:www.sysin.org Xcode 14 包…

    IOS 2023年4月18日
    00
  • 日本开放Wi-Fi 6E认证

    2022年9月2日,日本MIC(総務省)发布了“電波法施行規則等の一部を改正する省令(令和4年総務省令第59号)”省令,更新了Wi-Fi 6E Band 5频带5925 ~ 6425 MHz的技术要求。隔天(9月3日),日本DSP机构发布了“「6GHz帯小電力データ通信システム」の特性試験方法”,为日本Wi-Fi 6E认证提供了测试方法。   電波法施行規則…

    IOS 2023年4月18日
    00
  • [Android开发学iOS系列] Auto Layout

    [Android开发学iOS系列] Auto Layout 内容: 介绍什么是Auto Layout. 基本使用方法 在代码中写约束的方法 Auto Layout的原理 尺寸和优先级 Auto Layout的使用细则 重要的属性 StackView Layout Guide Performance Debugging What is Auto Layout …

    IOS 2023年4月17日
    00
  • uniapp ios原生插件开发 (framework,cocopods)

    一、了解UniApp 插件的开发方式 Xcode Framework 、 Static Library 基于Cocoapods开发 pod lib 已知UniApp的插件开发方式有两种, 第一种 Xcode Framework的方式,这种方式是官方指定的方式。 这种方式的优点就是简单直接, 但也有不足,比如当插件需要引入一些三方库时,操作起来就不是那么方便。…

    IOS 2023年4月17日
    00
  • iOS上架流程

    1 准备 2 申请App ID 2.1 打开[苹果开发者官网](https://developer.apple.com),点击Account登陆账号。 2.2 进入ID申请 3 创建证书请求文件(*.cerSigningRequest文件) 4 添加软件开发证书和分发证书 并下载(*.CER文件) 5 创建Profile配置文件 6 新建开发者应用 7 打包…

    IOS 2023年4月17日
    00
  • 公有云、私有云、混合云都是什么?有没有通俗一点的答案?企业选哪一种云比较好?

        很多同学都觉得公有云、私有云、混合云这些概念的认识比较混乱,开始我面对网上很多专业的解释不明所以,直到我遇到这个说法:   大白话解释一下 你娶了一个老婆,这叫传统IT架构。 你觉得一个老婆不够,这叫传统企业CIO的困境。 你又娶了一个老婆,这叫双活数据中心。 你在外地又娶了一个小老婆,这叫两地三中心容灾。 你娶了很多风格气质各异的小老婆,以至于形成…

    IOS 2023年4月17日
    00
  • iOS 悬浮球效果实现,悬浮按钮,拖拽,贴边,隐藏,显示,旋转屏幕适配

    1.悬浮球与设备刘海的安全距离无论是横屏还是竖屏,悬浮球距离有刘海的一边会留出安全距离设备方向的上下两边,也有安全距离 2.贴边吸附方向和距离悬浮球只能贴设备方向的左右两边,需要贴上下两边自行调整距离边缘的数值自行调整 3.切换横竖屏,悬浮球自适应悬浮球位置切换横竖屏后,等比例转换的。 4.隐藏和显示拖到屏幕中间ImageView范围内可以隐藏悬浮窗,在范围…

    IOS 2023年4月18日
    00
合作推广
合作推广
分享本页
返回顶部