vue2中使用 antv/f2

效果： 代码： 导包：

npm install @antv/f2

注意：用 3.8.11 版本

	
		
	



	// import F2 from '@antv/f2/lib/index-all'
	import * as F2  from '@antv/f2'
	// import { Chart } from '@antv/f2';
	export default {
		name: 'App',
		data() {
			return {
				sj: [{
						year: '2015 年',
						sales: 145
					}, {
						year: '2016 年',
						sales: 121
					}, {
						year: '2017 年',
						sales: 100
					}, {
						year: '2018 年',
						sales: 97
					}, {
						year: '2019 年',
						sales: 85
					}

				]
			}
		},

		methods: {
			drawChart() {
				var chart = new  F2.Chart({
					id: 'myChart',
					pixelRatio: window.devicePixelRatio
				});
				// chart.source(this.sj);
				// chart.interval().position('year*sales');
				chart.source(this.sj, {
					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();
			}
		},
		mounted() {
			var v = this;
			// this.$nextTick(() => {
			// 	v.drawChart();
			// });
			v.drawChart();
			
			
			
		}
	}