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