advertisingMiniProgram/miniprogram/pages/channelAdvertising/components/shiduan/F2.ts

namespace shiduan {

  const { formmaterValueZhou } = require("../../../../utils/util")

  const chartCatch: antvChart = {
    toufangfenxiChart: undefined
  }
  const F2Chart = {
    upLine() {
      if (chartCatch.toufangfenxiChart === undefined) return
      chartCatch.toufangfenxiChart.clear()
      let { before, now } = this.data.DayList;
      let beforeString = before.length ? `${before[0].dts}至${before[0].dte}` : "";
      let nowString = now.length ? `${now[0].dts}至${now[0].dte}` : "";
      before = before.map((v: any, i: number) => {
        v.index = i;
        v.dataKeyTypt = beforeString;
        return v
      })
      now = now.map((v: any, i: number) => {
        v.index = i;
        v.dataKeyTypt = nowString;
        return v
      })
      const data = [...before, ...now];
      if (chartCatch.toufangfenxiChart === undefined) return;
      let key = this.data.select[this.data.select_act].proportionType;
      chartCatch.toufangfenxiChart.legend('gender', {
        position: 'right'
      });
      chartCatch.toufangfenxiChart.source(data);
      chartCatch.toufangfenxiChart.scale('index', {
        tickCount: 6
      });
          chartCatch.toufangfenxiChart.axis('index', {
        label: (text: string, index: number, total: number) => {
          let align = 'center';
          if (index === 0) align = 'left';
          if (index === total - 1) align = 'right';
          let hour :string|number = Number(data[Number(text)].hour)
          if(hour >= 24) hour = '24';
          else hour = data[Number(text)].hour
          return {
            textAlign: align,
            text: hour
          }
        }
      });
      chartCatch.toufangfenxiChart.axis(key, {
        label: (text: string, index: number, total: number) => {
          return {
            text: formmaterValueZhou(text, 0)
          }
        }
      });
      chartCatch.toufangfenxiChart.tooltip({
        showCrosshairs: true,
        triggerOn: ['touchstart', 'touchmove'],
        onShow: (ev: tooltipOnShow) => {
          const items = ev.items;
          const { tooltip: { title } } = ev;
          let index = Number(title || 0);
          index < 0 ? index = 0 : "";
          items[0].name = data[index].hour;
          items[1].name = data[index + this.data.DayList.before.length].hour;
          items[0].value = formmaterValueZhou(items[0].value, 2);
          items[1].value = formmaterValueZhou(items[1].value, 2);
        }
      });
      chartCatch.toufangfenxiChart.interval().position('index*' + key).shape('smooth').color("dataKeyTypt", ["#1b9ade", "#fd5555"]).adjust({
        type: 'dodge',
        marginRatio: 0.05 // 设置分组间柱子的间距
      });
      chartCatch.toufangfenxiChart.render();
    },
    line(F2: any, config: any) {
      if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
      let sys = wx.getSystemInfoSync();
      config.height = sys.windowWidth / 16 * 9;
      chartCatch.toufangfenxiChart = new F2.Chart(config);
      let { before, now } = this.data.DayList;
      let beforeString = before.length ? `${before[0].dts}至${before[0].dte}` : "";
      let nowString = now.length ? `${now[0].dts}至${now[0].dte}` : "";
      before = before.map((v: any, i: number) => {
        v.index = i;
        v.dataKeyTypt = beforeString;
        return v
      })
      now = now.map((v: any, i: number) => {
        v.index = i;
        v.dataKeyTypt = nowString;
        return v
      })
      const data = [...before, ...now];
      if (chartCatch.toufangfenxiChart === undefined) return;
      let key = this.data.select[this.data.select_act].proportionType;
      chartCatch.toufangfenxiChart.legend('gender', {
        position: 'right'
      });
      chartCatch.toufangfenxiChart.source(data);
      chartCatch.toufangfenxiChart.scale('index', {
        tickCount: 6
      });
          chartCatch.toufangfenxiChart.axis('index', {
        label: (text: string, index: number, total: number) => {
          let align = 'center';
          if (index === 0) align = 'left';
          if (index === total - 1) align = 'right';
          let hour :string|number = Number(data[Number(text)].hour)
          if(hour >= 24) hour = '24';
          else hour = data[Number(text)].hour
          return {
            textAlign: align,
            text: hour
          }
        }
      });
      chartCatch.toufangfenxiChart.axis(key, {
        label: (text: string, index: number, total: number) => {
          return {
            text: formmaterValueZhou(text, 0)
          }
        }
      });
      chartCatch.toufangfenxiChart.tooltip({
        showCrosshairs: true,
        triggerOn: ['touchstart', 'touchmove'],
        onShow: (ev: tooltipOnShow) => {
          const items = ev.items;
          const { tooltip: { title } } = ev;
          let index = Number(title || 0);
          index < 0 ? index = 0 : "";
          items[0].name = data[index].hour;
          items[1].name = data[index + this.data.DayList.before.length].hour;
          items[0].value = formmaterValueZhou(items[0].value, 2);
          items[1].value = formmaterValueZhou(items[1].value, 2);
        }
      });
      chartCatch.toufangfenxiChart.interval().position('index*' + key).shape('smooth').color("dataKeyTypt", ["#1b9ade", "#fd5555"]).adjust({
        type: 'dodge',
        marginRatio: 0.05 // 设置分组间柱子的间距
      });
      chartCatch.toufangfenxiChart.render();
      return chartCatch.toufangfenxiChart;
    }
  };

  module.exports = F2Chart;
}