antv f2 曲线

我就是我 2023-09-24 21:32 55阅读 0赞

![879a4d52a6b9434ba146bed9d6c108eb.png][]

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

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;
    				
    				
    			});

[879a4d52a6b9434ba146bed9d6c108eb.png]: https://img-blog.csdnimg.cn/879a4d52a6b9434ba146bed9d6c108eb.png
[antv]: http://antv.antfin.com/zh-cn/index.html
[LimeUi - _uniapp]: http://liangei.gitee.io/limeui/#/f2