Vue使用Antv F2

F2是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex）。

在Vue中使用F2移动端图表，详细步骤如下：

npm安装

npm install @antv/f2 --save

在main.js中引用

impor F2 from '@antv/f2';Vue.prototype.F2 = F2;

在页面中使用，首先创建一个容器，给定宽高，然后在js中渲染数据

 <canvas id="boxCanvas" style="width: 100%;height: 300px;"></canvas>

   boxCanvas(){var data = [{year: '2015 年',sales: 145}, {year: '2016 年',sales: 121}, {year: '2017 年',sales: 100}, {year: '2018 年',sales: 97}, {year: '2019 年',sales: 85}];var chart = new this.F2.Chart({id: 'boxCanvas',pixelRatio: window.devicePixelRatio});chart.source(data, {sales: {tickCount: 5}});chart.tooltip({showItemMarker: false,onShow: function onShow(ev) {var items = ev.items;items[0].name = null;items[0].name = items[0].title;items[0].value = '¥ ' + items[0].value;}});// 让柱状图的宽度适配不同的屏幕尺寸var barWidth = 36 * (window.innerWidth / 375);chart.interval().position('year*sales').color('l(90) 0:#1890ff 1:#70cdd0').size(barWidth); // 定义柱状图渐变色chart.render();},

效果如图

Vue使用Antv F2相关推荐

开源|蚂蚁金服开源AntV F2：一个专注于移动，开箱即用的可视
小蚂蚁说: AntV 是蚂蚁金服全新一代数据可视化解决方案,主要子产品包括 G2.G6.F2.此前我们已经相继发布过AntV的相关开源消息与版本迭代,包括<蚂蚁金服开源:数据驱动的高交互可视化图 ...
uniapp 微信小程序使用antv f2图标库
进入 antv github 找到 wx-f2 这个仓库点击进入,然后进入 src 目录,将里面的组件文件复制到自己的项目中. 也就是: 在 uniapp 项目中的 wxcomponents 文件夹 ...
f2 柱状图滚动钉钉小程序_钉钉小程序图表库AntV - F2 使用总结
项目涉及图表部分的技术选型对于图表这块的开发,使用一些流行的图表库可以大大提高我们的开发效率,目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异,我印象比较深刻的是 ...
微信小程序中绘制图表（AntV F2 的使用）
1.安装小程序F2组件 npm i @antv/f2-canvas 2.安装好相关依赖包之后,使用微信开发者工具运行项目,点击开发者工具顶部详情,勾选使用npm模块,再点击菜单栏中工具下的构建npm ...
react + zarm + antV F2 实现账单数据统计饼图效果
需要实现的效果为了方便展示,饼图放到右边标明: 实现过程这里我们尝试用一下 antV F2 移动端可视化引擎来实现饼图效果 1.F2 移动端可视化引擎 F2 是一个专注于移动端,面向常规统计图表, ...
02.微信小程序——AntV F2制作柱状图，折线图
最近需要在微信小程序中画折线图和柱状图,想到了之前用到的AntV F2,总的来说还不错.效果图可以用微信看simaQ老哥做的微信小程序Demo.本人没学过npm,甚至不知道npm是什么 ,所以有不对的 ...
小程序使用 Antv F2的报错chart.pieLabel is not a function解决办法
需要在小程序使用图表页面的js最顶部增加 import F2 from '@antv/f2'; const PieLabel = require('@antv/f2/lib/plugin/pie-la ...
[vue]vue接入AntV G2Plot
文章目录安装配置使用安装 npm install @antv/g2plot --save 配置在main.js中引入 import g2 from '@antv/g2plot' Vue.p ...
vue 3 + antV s2表格可拖拽表格
vue 3 中使用S表格达到可拖拽 Introduction | S2 安装: npm install @antv/s2 <div id="chartDiv" ref=&qu ...

Vue使用Antv F2

Vue使用Antv F2相关推荐

最新文章

热门文章