advertisingMiniProgram/miniprogram/pages/channelAdvertising/components/baohedu/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 title = this.data.DayList.length ? `${this.data.DayList[0].dt}至${this.data.DayList[0].dt}` : "";
      const data = this.data.DayList.map((v: any, i: number) => {
        v.type = title
        v.index = i
        v.timeSize = v.timeSize * 100
        return v
      });
      if (chartCatch.toufangfenxiChart === undefined) return;
      chartCatch.toufangfenxiChart.legend('gender', {
        position: 'right'
      });
      chartCatch.toufangfenxiChart.source(data);
      chartCatch.toufangfenxiChart.scale('index', {
        tickCount: 3
      });
      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';
          return {
            textAlign: align,
            text: data[Number(text)].hour + '点'
          }
        }
      });
      chartCatch.toufangfenxiChart.axis('timeSize', {
        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 : "";
          let nT = data[index].hour > 9 ? Number(data[index].hour) + 1 : '0' + (Number(data[index].hour) + 1);
          items[0].name = data[index].hour + '~' + nT;
          items[0].value = formmaterValueZhou(items[0].value, 2) + '%';
        }
      });
      chartCatch.toufangfenxiChart.interval().position('index*timeSize').shape('smooth').color("index", ["#1b9ade"]).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 title = this.data.DayList.length ? `${this.data.DayList[0].dt}至${this.data.DayList[0].dt}` : "";
      const data = this.data.DayList.map((v: any, i: number) => {
        v.type = title
        v.index = i
        v.timeSize = v.timeSize * 100
        return v
      });
      if (chartCatch.toufangfenxiChart === undefined) return;
      chartCatch.toufangfenxiChart.legend('gender', {
        position: 'right'
      });
      chartCatch.toufangfenxiChart.source(data);
      chartCatch.toufangfenxiChart.scale('index', {
        tickCount: 3
      });
      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';
          return {
            textAlign: align,
            text: data[Number(text)].hour + '点'
          }
        }
      });
      chartCatch.toufangfenxiChart.axis('timeSize', {
        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 : "";
          let nT = data[index].hour > 9 ? Number(data[index].hour) + 1 : '0' + (Number(data[index].hour) + 1);
          if (data[index].hour === '平均值') {
            items[0].name = data[index].hour;
          } else items[0].name = data[index].hour + '~' + nT;
          items[0].value = formmaterValueZhou(items[0].value, 2) + '%';
        }
      });
      chartCatch.toufangfenxiChart.interval().position('index*timeSize').shape('smooth').color("index", ["#1b9ade"]).adjust({
        type: 'dodge',
        marginRatio: 0.05 // 设置分组间柱子的间距
      });
      let linkey = data[data.length - 1].timeSize || 0
      chartCatch.toufangfenxiChart.guide().line({
        start: [ 'min', linkey ],
        end: [ 'max', linkey ],
        style: {
          stroke: '#1b9ade',
          lineWidth: 1,
          lineCap: 'round'
        }
      });
      chartCatch.toufangfenxiChart.render();
      return chartCatch.toufangfenxiChart;
    }
  };

  module.exports = F2Chart;
}