advertisingMiniProgram/miniprogram/pages/channelRanking/index.ts

// pages/channelRanking/index.ts
const chartCatch: antvChart = {
  toufangfenxiChart: undefined
}
let { getChannelRank } = require('../../utils/api')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [
      {
        key: "fee",
        name: "费用",
        unit: "元",
        type: 1,
      },
      {
        key: "timeSize",
        name: "时长",
        unit: "分",
        type: 2,
      },
      {
        key: "pinci",
        name: "频次",
        unit: "次",
        type: 3,
      }
    ],
    list: [],
    array_act: 0,
    start: "",
    end: '',
    onInitChart: undefined,
    height: 0
  },

  startTimeChange(e: any) {
    this.setData({
      start: e.detail.value
    },()=> this.getselect())
  },
  endTimeChange(e: any) {
    this.setData({
      end: e.detail.value
    },()=> this.getselect())
  },

  bindPickerChange(e: any) {
    this.setData({
      array_act: e.detail.value
    },()=> this.getselect())
  },
  getselect(){
    let s = new Date(this.data.start), e= new Date(this.data.end);
    if(e.getTime() - s.getTime() < 0) return wx.showToast({
      title: "时间选择错误",
      icon: "none"
    })
    const p: any = {
      start: this.data.start,
      end: this.data.end,
      dataType: this.data.array[this.data.array_act].type
    }
    getChannelRank(p).then((res: any) => {
      p.onInitChart = (F2: any, config: any) => {
        if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
        chartCatch.toufangfenxiChart = new F2.Chart(config);
        const data = res|| [];
        if (!chartCatch.toufangfenxiChart) return
        chartCatch.toufangfenxiChart.legend(false)
        const key = this.data.array[this.data.array_act].key;
        let dataP:any = {};
        dataP[key] = {
          tickCount: 5
        }
        chartCatch.toufangfenxiChart.source(data.sort((a:any, b:any)=>a[key] - b[key]), dataP);
        chartCatch.toufangfenxiChart.coord({
          transposed: true
        });
        chartCatch.toufangfenxiChart.tooltip({
          triggerOn: ['touchstart', 'touchmove'],
          onShow: (ev: tooltipOnShow) => {
            let num:string = ev.items[0].value;
            if(Number(num) > 100000000) num =  (Number(num) / 100000000).toFixed(2) + '亿';
            else if(Number(num) > 10000) num = (Number(num) / 10000).toFixed(2) + '万';
            ev.items[0].name = ev.items[0].title
            ev.items[0].value = num + this.data.array[this.data.array_act].unit
          }
        });
        chartCatch.toufangfenxiChart.axis(key, {
          label: (text: string, index: number, total: number) => {
            let align = 'center';
            if (index === 0) align = 'left';
            if (index === total - 1) align = 'right';
            let num:string|number = Number(text);
            if(num > 100000000) num = num / 100000000 + '亿';
            else if(num > 10000) num = num / 10000 + '万';
            return {
              textAlign: align,
              text: num
            }
          }
        });
        chartCatch.toufangfenxiChart.interval()
          .position('channelName*' + key)
          .color('#409eff')
          .adjust('stack');
        chartCatch.toufangfenxiChart.render();
        return chartCatch.toufangfenxiChart;
      }
      p.list = (res || [])
      p.height = (res || []).length < 2 ? 20 :(res || []).length * 5;
      this.setData(p)
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    const nowDate = new Date();
    const date = new Date(nowDate.getTime() - 86400000);
    let month: string | number = date.getMonth() + 1;
    let day: string | number = date.getDate();
    month > 9 ? "" : month = '0' + month;
    day > 9 ? "" : day = '0' + day;
    const p: any = {
      start: [date.getFullYear(), month, day].join("-"),
      end: [date.getFullYear(), month, day].join("-"),
      dataType: this.data.array[this.data.array_act].type
    }
    getChannelRank(p).then((res: any) => {
      p.onInitChart = (F2: any, config: any) => {
        if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
        chartCatch.toufangfenxiChart = new F2.Chart(config);
        const data = res|| [];
        if (!chartCatch.toufangfenxiChart) return
        chartCatch.toufangfenxiChart.legend(false)
        const key = this.data.array[this.data.array_act].key;
        let dataP:any = {};
        dataP[key] = {
          tickCount: 5
        }
        chartCatch.toufangfenxiChart.source(data.sort((a:any, b:any)=>a[key] - b[key]), dataP);
        chartCatch.toufangfenxiChart.coord({
          transposed: true
        });
        chartCatch.toufangfenxiChart.tooltip({
          triggerOn: ['touchstart', 'touchmove'],
          onShow: (ev: tooltipOnShow) => {
            let num:string = ev.items[0].value;
            if(Number(num) > 100000000) num =  (Number(num) / 100000000).toFixed(2) + '亿';
            else if(Number(num) > 10000) num = (Number(num) / 10000).toFixed(2) + '万';
            ev.items[0].name = ev.items[0].title
            ev.items[0].value = num + this.data.array[this.data.array_act].unit
          }
        });
        chartCatch.toufangfenxiChart.axis(key, {
          label: (text: string, index: number, total: number) => {
            let align = 'center';
            if (index === 0) align = 'left';
            if (index === total - 1) align = 'right';
            let num:string|number = Number(text);
            if(num > 100000000) num = num / 100000000 + '亿';
            else if(num > 10000) num = num / 10000 + '万';
            return {
              textAlign: align,
              text: num
            }
          }
        });
        chartCatch.toufangfenxiChart.interval()
          .position('channelName*' + key)
          .color('#409eff')
          .adjust('stack');
        chartCatch.toufangfenxiChart.render();
        return chartCatch.toufangfenxiChart;
      }
      p.list = (res || [])
      p.height = (res || []).length < 2 ? 20 :(res || []).length * 5;
      this.setData(p)
    })
  },

  upLine() {
    if (chartCatch.toufangfenxiChart === undefined) return
    chartCatch.toufangfenxiChart.clear()

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    /**
     * 生命周期函数--监听页面隐藏
     */
  },
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})