微信小程序–使用antv F2绘制折线图
官网地址:https://f2.antv.antgroup.com/tutorial/getting-started
1、引入antv F2
npm i @antv/f2-canvas
2、在页面中使用
- 在demo.json中引入
{
"usingComponents": {
"ff-canvas": "@antv/f2-canvas"
}
}
- 在wxml中使用组件
<ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}" ></ff-canvas>
- 处理图表数据
data{
statisticsData:[],
opts: {
onInit: null
},
}
getStatisticsData() {
this.setData({
statisticsData: []
})
//模拟获取数据
ApiRequest.postParamReq('', {
}, resp => {
if (resp.res) {
if (resp.data.length) {
this.data.opts.onInit = this.initChart
this.setData({
statisticsData: resp.data,
opts: this.data.opts
})
}
}
})
},
async initChart(canvas, width, height, F2) {
let chart = null;
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(this.data.statisticsData, {
date: {
type: 'timeCat',
},
value: {
tickCount: 5,
min: 0
}
});
//自定义弹框内容
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
onShow(ev) {
const {
items
} = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥' + items[0].value;
}
});
//折线图颜色显示
chart.area()
.position('date*value')
.color('l(90) 0:#ffce44 1:#f7f7f7')
.shape('smooth');
chart.line()
.position('date*value')
.color('l(90) 0:#ffce44 1:#f7f7f7')
.shape('smooth');
chart.render();
// 调用自定义函数添加文本
return chart;
},