antv f2 曲线

 在uniapp中使用antv F2曲线图
LimeUi - 多端uniapp组件库
 

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

import F2 from '@antv/f2';

var data = [
					{ name: '2022-11-30', data: 1,tem:"净值" },
					{ name: '2022-12-01', data: 1.0177,tem:"净值" },
					{ name: '2022-12-02', data: 1.0176,tem:"净值" },
					{ name: '2022-12-05', data: 1.0317,tem:"净值" },
					{ name: '2022-12-06', data: 1.0181,tem:"净值" },
					{ name: '2022-12-07', data: 1.015,tem:"净值" },
					{ name: '2022-12-08', data: 1.0238,tem:"净值" },
					{ name: '2022-12-09', data: 1.0468,tem:"净值" },
					{ name: '2022-12-12', data: 1.0343,tem:"净值" }					
					
					
        ];


var _this = this;
			this.$refs.chart.init(config => {
				const chart = new F2.Chart(config);
				chart.clear() // 清理所有
				
				
				let max = 0;
				let names = [];
				_this.data.forEach(function(obj) {
				    names.push(obj.name);
				    if (obj.data > max) {
				        max = Number(obj.data);
				    }
				});
				let value = Number(max.toFixed(1));
				if (value * 10 % 2 !== 0) {
				    max = Number((value + 0.1).toFixed(1));
				}
				let tickCount = Math.ceil(max / 0.2) + 1;
				chart.source(_this.data, {
				    data: {
				        tickCount: tickCount,
				        min: 0,
								max: max,
								nice:true
				    },
				    name: {
				        type: 'timeCat',
				        range: [0, 1],
				        mask: 'YYYY-MM-DD'
				    }
				});
				chart.tooltip({
				    showItemMarker: false,
				    showTooltipMarker: true,
				    tooltipMarkerStyle: {
				        fill: '#fff',
				        radius: 4,
				        lineWidth: 2
				    },
				    showCrosshairs: true,
				    crosshairsStyle: {
				        lineWidth: 1
				    },
				    onShow: function onShow(ev) {
				        let items = ev.items;
				        items[0].name = items[0].title;
				        items[0].value = '净值 ' + Number(items[0].value).toFixed(4);
				    },
				    background: {
				        radius: 1,
				        fill: '#EE6461',
				        padding: [3, 5]
				    },
				    nameStyle: {
				        fontSize: 12,
				        fill: '#fff',
				        textAlign: 'start',
				        textBaseline: 'middle'
				    },
				    valueStyle: {
				        fontSize: 12,
				        fill: '#fff',
				        textAlign: 'start',
				        textBaseline: 'middle'
				    }
				});
				chart.axis('name', {
				    tickLine: null,
				    line: {
				        lineWidth: 1,
				        stroke: '#ccc',
				        top: true
				    },
				    label: null,
						
				});
				chart.axis('data', {
				    tickLine: null,
				    line: {
				        lineWidth: 1,
				        stroke: '#ccc',
				        top: false
				    },
				    grid: (text, index, total) => {
				        return {
				            stroke: '#efefef',
				            lineWidth: 1,
				            lineDash: [2]
				        };
				    },
				    label: (text, index, total) => {
							if (text !== '0') {
							    return {
							        text: Number(text).toFixed(1),
							        fontSize: 12
							    };
							}
							return {
							    fontSize: 12
							};
				    }
				});
				chart.legend('tem', {
				    title: null,
				    position: 'bottom',
				    align: 'center',
				    nameStyle: {
				        fontSize: 12
				    },
				    marker: {
				        symbol: 'square',
				        radius: 6
				    },
				    wordSpace: 8
				});
				chart.line().position('name*data').shape('smooth').color('tem', ['#EE6461']);
				chart.point().position('name*data').shape('smooth').color('tem', ['#EE6461']).style({ r: 2 });
				
				chart.render();
				
				return chart;
				
				
			});