钉钉小程序 - 切换tabs更新my-f2图表数据

导语：更新my-f2图表数据可以使用chart.changeData(data)。首先定义一个全局变量存储chart实例，这样就可以在onInitChart(F2, config)函数外部调用my-f2的chart实例方法。

已折线图为例，具体实现如下：

1.index.axml

<view a:if="showPage">
  <!-- 支付宝UI框架tabs选项卡组件 -->
  <tabs 
    tabs="{{tabs}}" 
    tabsName="activeTab"
    onTabClick="handleTabClick" 
    onChange="handleTabChange" 
    activeTab="{{activeTab}}" 
    tabBarUnderlineWidth="20px" 
    animation="{{false}}"
  ></tabs>
  <view class="f2-chart bg-color-white">
    <f2 onInit="onInitChart"></f2>
  </view>
</view>

2.index.js

import { getTicketAtivationChart } from '/src/api/api' // 接口
let lineChart; // 定义全局变量
Page({
  data: {
    // tabs切换
    tabs: [
      { title: '选项一' },
      { title: '选项二' },
      { title: '选项三' },
    ],
    activeTab: 0, // tabs选中
    chartData: [], // 图表数据
    showPage: false,
  },

  async onLoad() {
    if(this.data.propList.length !== 0) {
      await this.getTicketAtivationChart().then(()=>{
        lineChart.changeData(this.data.chartData)
      });
    }
  },

  // tab 被点击的回调。
  handleTabClick({ index, tabsName }) {
    this.setData({
      [tabsName]: index,
    });
    // tabs切换时更新图表数据
    this.getTicketAtivationChart(index).then(()=>{
      // 遇到的坑：changeData(data)可以在获取数据成功后调用，
      // 但是真机测试时，折线图在部分安卓手机上初始化后无法显示，
      // 所以考虑可能是加载顺序的问题
      lineChart.changeData(this.data.chartData)
    });
  },
  
  async getTicketAtivationChart(type = 0) {
    try {
      const res = await getTicketAtivationChart({ type })
      if (res.data.code === 200) {
        const chartData = res.data.data
        this.setData({
          chartData
        })
      } else if (res.data.code !== 40003) {
        dd.alert({
          content: res.data.msg,
          buttonText: '我知道了',
        })
      }
    } catch (error) {
      console.log(error)
    }
  },

  // 绘制表格
  onInitChart(F2, config) {
    const chart = new F2.Chart(config)
    const data = this.data.chartData
    lineChart = chart // 存储chart实例
    chart.source(data, {
      count: {
        tickCount: 5,
        min: 0
      }
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = null;
        items[0].value = items[0].value;
      }
    });
    chart.axis('date', {
      label: function label(text, index, total) {
        const textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.line().position('date*count');
    chart.point().position('date*count').style({
      stroke: '#fff',
      lineWidth: 1
    });
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  },
});