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

  },