F2 图表 👑👑👑👑👑 全端

F2，一个专注于移动，开箱即用的可视化解决方案查看更多站点2 | 查看更多站点2
基于antv F2 做了兼容处理，更多示例请访问 uni示例站点1 | uni示例站点2 | 官方示例
Q群：1046793420
antv F2 v3.8.9

平台兼容

H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ 小程序	App
√	√	√	√	√	√	√

✨ 注意
🔔 插件用到了 css 预编译器 stylus 请安装
🌈 本插件使用了webview支持nvue。
📦 本插件没有对F2内部的方法和样式做过改动，只是使其兼容uniapp。
🔔 若F2无法满足于你或有需要特殊能力的请直接去F2 提建议
👉 若F2有兼容问题可向我反馈。
🔔 默认只提供f2.min.js,如果需要f2-all或f2-simple可去码云下载按自已需要引入！

安装

在uniapp 插件市场找到蚂蚁图表导入即可

代码演示

基础用法

通过ref获取节点组件内部init方法生成图表

<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>

// 非 nvue 页面需要引进
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js';
export default {
	data() {
		return {
			baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
		};
	},
	mounted() {
		this.$refs.chart.init(config => {
			const chart = new F2.Chart(config);
			chart.source(this.baseData);
			chart
				.interval()
				.position('genre*sold')
				.color('genre');
			chart.render();
			// 需要把 chart 返回
			return chart;
		});
	}
}

图饼

图饼示例，更多用法和示例请访问F2 示例

<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>

data() {
	return {
		pieMap: {
			'芳华': '40%',
			'妖猫传': '20%',
			'机器之血': '18%',
			'心理罪': '15%',
			'寻梦环游记': '5%',
			'其他': '2%'
		  },
		pieData: [
			{
				name: '芳华',
				percent: 0.4,
				a: '1'
			},
			{
				name: '妖猫传',
				percent: 0.2,
				a: '1'
			},
			{
				name: '机器之血',
				percent: 0.18,
				a: '1'
			},
			{
				name: '心理罪',
				percent: 0.15,
				a: '1'
			},
			{
				name: '寻梦环游记',
				percent: 0.05,
				a: '1'
			},
			{
				name: '其他',
				percent: 0.02,
				a: '1'
			}
		]
	};
},
mounted() {
	this.$refs.chart.init(config => {
		const chart = new F2.Chart(config);
		chart.source(this.pieData, {
			percent: {
				formatter:  val => val * 100 + '%';
			}
		});
		chart.legend({
			position: 'right',
			itemFormatter: val =>  val + '  ' + this.pieMap[val]; 
		});
		chart.tooltip(false);
		chart.coord('polar', {
			transposed: true,
			radius: 0.85
		});
		chart.axis(false);
		chart
			.interval()
			.position('a*percent')
			.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
			.adjust('stack')
			.style({
				lineWidth: 1,
				stroke: '#fff',
				lineJoin: 'round',
				lineCap: 'round'
			})
			.animate({
				appear: {
					duration: 1200,
					easing: 'bounceOut'
				}
			});
		chart.render();
		// 需要把 chart 返回
		return chart;
	});
}

数据更新

F2 更新数据的方式有三种：

1、通过 ref 获取组件实例，使用内部方法changeData(data)更新数据

前后数据结构不发生变化，需要马上更新图表。

this.$refs.chart.changeData(data)

2、在节点上设置 source 源数据和 isAutoPlay 自动更新。

前后数据结构不发生变化，需要马上更新图表。

<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" is-auto-play></l-f2></view>

data() {
	return {
		data: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
	}
}

3、如果仅仅是更新数据，而不需要马上更新图表，在节点上设置 source 源数据，然后在需要更新图表时调用内部方法 repaint() 或在节点上设置 isAutoPlay 为 true

前后数据结构不发生变化，不需要立即更新数据

<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" :isAutoPlay="isAutoPlay"></l-f2></view>

// 1 调用内部方法
this.$refs.chart.repaint(); 
// 2 先设置isAutoPlay为false,再需要时设置为true
this.isAutoPlay = true

4、更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置。

前后数据结构发生变化或需要更改text等元素。

this.$refs.chart.reset(chart => {
		const baseData = [{ genre: '成犬粮', sold: 375 }, { genre: '化毛膏', sold: 15 }, { genre: '益生菌', sold: 20 }, { genre: '氨糖', sold: 240 }, { genre: '其它', sold: 150 }];
		chart.clear() // 清理所有
		chart.source(baseData); // 加载新数据
		chart.interval().position('genre*sold').color('sold'); // 重新定义图形语法
		chart.render();
		return chart;
	})
});

Nvue

本插件通过webview组件使得 antv F2 能在nvue里使用。

✨ 温馨提示
🔔 Nvue 是指 app nvue，非使用nvue打包到小程序 h5等平台。
👉 webview使用了网络路径，可自行下载放置根目录下的hybrid文件夹里再修改路径即可。
🛡 不需要引进F2 JS文件，但需求引入插件
⚙️ 在函数外面的数据需要通过init方法的第二个参数传递数据

<view class="f2"><l-f2 ref="chart"></l-f2></view>

export default {
	data() {
		return {
			baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
		}
	},
	mounted() {
		this.$refs.chart.init(config => {
			const chart = new F2.Chart(config);
			// 在函数外面的数据，需要在第二个参数传进去。
			// 数据名保持跟this里的一致
			chart.source(baseData);
			chart
				.interval()
				.position('genre*sold')
				.color('genre');
			chart.render();
			return chart;
		},
		// 在函数外面的数据需要传进组件
		{baseData: this.baseData}
		);
	}
}

Nvue 使用注意事项

由于 nvue 使用的是字符串模板传输，打包的时候会被混淆压缩
所在要保持 关键词 不被 混淆压缩

1、F2、DataSet 不需要被引入

👎 错误

import F2 from '@/uni_modules/l-f2/components/l-f2/f2-all.min.js';
import DataSet from '@/antv/DataSet'
export default {
	...code
}

👍 正确

export default {
	...code
}

2、引用函数外面数据的关键词不需要声明

👎 错误

const {data} = this
this.$refs.chart.init(config => {
	chart.source(data);
})

👍 正确

// 所有用函数外里的数据，只要保持跟 this 里的一致
this.$refs.chart.init(config => {
	chart.source(data);
})

- or -

this.$refs.chart.init(config => {
	chart.source(this.data);
})

3、引用函数外面的数据需要通过params或函数的第二个参数传递

👎 错误

<l-f2 />

- or -

this.$refs.chart.init(config => {...code})

👍 正确

<l-f2 :params="{data}"/>

- or -

this.$refs.chart.init(config => {...code}, {data: this.data})

不支持的功能

目前由于小程序不支持 document，所以 Guide.Html 辅助元素组件目前仍无法使用，其他 F2 的功能全部支持。
Nvue是通过webview实现的,所以它不受影响！
H5 uni官方 canvas 模拟了小程序所以也不支持。
缩放手势暂时不支持，因为原厂也不支持小程序，将来如果有需要考虑修改源码。
词云只支持H5。

Props

参数	说明	类型	默认值	版本
custom-style	自定义样式	`string`	-	-
params	仅针对nvue的数据传递,同init函数的第二个参数，两选一	`object`	-	-
webviewStyles	仅针对nvue的webview设置样式	`object`	-	-
source	图表数据	`array`	-	0.3.0
type	canvas 类型 2d 仅针对微信和头条有效	`string`	`2d`	0.3.0
isAutoPlay	设置了上方的图表数据再设置本参数，只要数据发生改动就更新图表	`boolean`	`false`	0.3.0
is-disable-scroll	触摸图表时是否禁止页面滚动	`boolean`	`false`

事件

参数	说明
init(callback, data)	callback: 回调函数 data: `nvue` 如果使用了外部数据，需要传递
changeData(data)	更新数据，传递是数据数组
clear()	清除所有
destroy()	销毁实例
repaint()	用于暂时只更新数据，等需要时再调用重绘
reset(callback, data)	重新定义图形语法，改变图表类型和各种配置, callback: 回调函数 data: `nvue` 如果使用了外部数据，需要传递
canvasToTempFilePath(opt)	用于生成图片

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

输入图片说明

liangei / lime-f2

F2 图表 👑👑👑👑👑 全端

平台兼容

安装

代码演示

基础用法

图饼

数据更新

Nvue

Nvue 使用注意事项

1、F2、DataSet 不需要被引入

2、引用函数外面数据的关键词不需要声明

3、引用函数外面的数据需要通过params或函数的第二个参数传递

不支持的功能

Props

事件

打赏

简介

发行版

贡献者

近期动态

liangei / lime-f2 .gitee-modal { width: 500px !important; }

F2 图表 👑👑👑👑👑 全端

平台兼容

安装

代码演示

基础用法

图饼

数据更新

Nvue

Nvue 使用注意事项

1、F2、DataSet 不需要被引入

2、引用函数外面数据的关键词不需要声明

3、引用函数外面的数据需要通过params或函数的第二个参数传递

不支持的功能

Props

事件

打赏

简介

发行版

贡献者

近期动态

搜索帮助

liangei / lime-f2