uni-app使用AntV f2图表

我这里是使用 HbuildX 直接导入插件

点击下载  antv f2 插件

蚂蚁图表 antv f2 - DCloud 插件市场

在使用页面引入相关

import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js';

页面使用

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

const data = [
	{ genre: 'Sports', sales: 275 },
	{ genre: 'Strategy', sales: 115 },
	{ genre: 'Action', sales: 120 },
	{ genre: 'Shooter', sales: 350 },
	{ genre: 'Other', sales: 150 },
];

this.$refs.chart.init(config => {
	const chart = new F2.Chart(config);
	chart.source(data);
	chart.interval()
	.position('genre*sales');
	chart.render();
	// 需要把 chart 返回
	return chart;
});