uni-app中使用F2

lime-f2：https://gitee.com/wbkfzwk/lime-f2

注意：本地引入使用的话， l-f2的这个包引入要与绘图在同一目录，不然会一直报引入文件路径找不到的错误，暂时没有找到问题的原因。

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

<script>
import F2 from './l-f2/f2.min.js'
import lF2 from './l-f2/l-f2.vue'

export default {
	components: {
		lF2
	},
	props:{
		
	},
	data() {
		return {
			data:[{
			  time: '2017-06-05',
			  tem: 1000
			}, {
			  time: '2017-06-06',
			  tem: 2200
			}, {
			  time: '2017-06-07',
			  tem: 2000
			}, {
			  time: '2017-06-08',
			  tem: 2600
			}, {
			  time: '2017-06-09',
			  tem: 2000
			}, {
			  time: '2017-06-11',
			  tem: 2600
			}, {
			  time: '2017-06-12',
			  tem: 2800
			}]
		};
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			this.$refs.exponentChart.init(config => {
				config.appendPadding = [10,22,0,12]
				const chart = new F2.Chart(config)
				chart.source(this.data);
				// 为指定的数据字段进行列定义。
				chart.scale({
				  time: {
					type: 'timeCat',
					tickCount: 3, // 坐标轴上刻度点的个数，不同的度量类型对应不同的默认值。
				  }
				});
				chart.axis('time', {
				  line: {
					lineWidth: 1,
					stroke: '#ebebeb'
				  },
				  label: function label(text, index, total) {
				    const textCfg = {
				  		fontSize: 12,
				  		lineHeight: 17
				  	};
				    if (index === 0) {
				        textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				        textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  },
				  labelOffset: 6, // 坐标轴文本距离轴线的距离
				});
				chart.axis('tem', {
				  labelOffset: 6, // 坐标轴文本距离轴线的距离
				  label: () => {
					const cfg = {
					  fontSize: 12,
					  lineHeight: 17,
					  fill: '#999'
					}
					return cfg;
				  },
				  grid: {
					stroke: '#eee'
				  }
				});
				// 自定义tooltip
				chart.tooltip({
					custom: true, // 是否自定义 tooltip 提示框
					showXTip: true, // 是否展示 X 轴的辅助信息
					showYTip: true, // 是否展示 y 轴的辅助信息
					snap: true, // 是否将辅助线准确定位至数据点
					crosshairsType: 'xy', // 辅助线的种类
					crosshairsStyle: {
						lineWidth: 2,
						lineDash: [ 2 ]
					}, // 配置辅助线的样式
					xTipBackground:{
					  radius: 2,
					  fill: 'rgba(0, 0, 0, 0.7)',
					  padding: [6,6]
					},
					yTipBackground:{
					  radius: 2,
					  fill: 'rgba(0, 0, 0, 0.7)',
					  padding: [6,6]
					}
				})
				chart.area().position('time*tem').color('l(90) 0:#3f7ae8 1:#fefefe').shape('smooth');
				chart.line().position('time*tem').color('#3f7ae8').shape('smooth');
				chart.render();
				return chart
			})
			
		}
	}
};
</script>

<style lang="scss" scoped>
.chart-line {
	height: 400rpx;
}
</style>