微信小程序--使用antv F2绘制折线图

微信小程序–使用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.initChartthis.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;},