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

namespace hangyezhanbi {
  let { formmaterValueZhou } = require("../../../../utils/util")

  const chartCatch: antvChart = {
    toufangfenxiChart: undefined
  }
  module.exports = {
    upLine() {
      if (chartCatch.toufangfenxiChart === undefined) return
      chartCatch.toufangfenxiChart.clear()
      let total = 0;
      let key = this.data.select[this.data.select_act].proportionType;
      let data = this.data.DayList.map((v: any) => {
        v.type = "1";
        total += Number(v[key] || 0)
        return v
      });
      data = data.map((v: any) => {
        v.p = Number(v[key] / total * 100).toFixed(2)
        return v
      })
      if (chartCatch.toufangfenxiChart === undefined) return;
      chartCatch.toufangfenxiChart.source(data);
      chartCatch.toufangfenxiChart.coord('polar', {
        transposed: true,
        innerRadius: 0.4,
        radius: 0.75
      });
      chartCatch.toufangfenxiChart.legend({
        position: 'bottom',
        align: 'left',
        nameStyle: {
          fill: '#404040', // 文本的颜色
          fontSize: 10, // 文本大小
          textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
          height: 10, // 设置文本的高度
        },
        itemFormatter: function itemFormatter(val: string) {
          let p: any = {};
          for (let i = 0; i < data.length; i++) {
            const v = data[i];
            if (v.industry === val) {
              p = v
              break
            }
          }
          return val + '/' + p.p + "% ";
        }
      });
      chartCatch.toufangfenxiChart.axis(false);
      chartCatch.toufangfenxiChart.tooltip({
        showCrosshairs: false,
        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].value = formmaterValueZhou(items[0].value, 2);
        }
      });
      // chartCatch.toufangfenxiChart.pieLabel({
      //   sidePadding: 10,
      //   label1: function label1(label1:any) {
      //     return {
      //       text: label1.industry,
      //       fill: '#666'
      //     };
      //   },
      //   label2: function label2(label1:any) {
      //     return {
      //       fill: '#000000',
      //       text: formmaterValueZhou(label1[key], 2),
      //       fontWeight: 500,
      //       fontSize: 10
      //     };
      //   }
      // });
      chartCatch.toufangfenxiChart.interval().position('type*' + key)
        .color('industry', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'])
        .adjust('stack')
      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 * 1.2;
      chartCatch.toufangfenxiChart = new F2.Chart(config);
      let total = 0;
      let key = this.data.select[this.data.select_act].proportionType;
      let data = this.data.DayList.map((v: any) => {
        v.type = "1";
        total += Number(v[key] || 0)
        return v
      });
      data = data.map((v: any) => {
        v.p = Number(v[key] / total * 100).toFixed(2)
        return v
      })
      if (chartCatch.toufangfenxiChart === undefined) return;
      chartCatch.toufangfenxiChart.source(data);
      chartCatch.toufangfenxiChart.coord('polar', {
        transposed: true,
        innerRadius: 0.4,
        radius: 0.75
      });
      chartCatch.toufangfenxiChart.legend({
        position: 'bottom',
        align: 'center',
        nameStyle: {
          fill: '#404040', // 文本的颜色
          fontSize: 10, // 文本大小
          textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
          height: 10, // 设置文本的高度
        },
        itemFormatter: function itemFormatter(val: string) {
          let p: any = {};
          for (let i = 0; i < data.length; i++) {
            const v = data[i];
            if (v.industry === val) {
              p = v
              break
            }
          }
          return val + '/' + p.p + "% ";
        }
      });
      chartCatch.toufangfenxiChart.axis(false);
      chartCatch.toufangfenxiChart.tooltip({
        showCrosshairs: false,
        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].value = formmaterValueZhou(items[0].value, 2);
        }
      });
      // chartCatch.toufangfenxiChart.pieLabel({
      //   sidePadding: 10,
      //   label1: function label1(label1:any) {
      //     return {
      //       text: label1.industry,
      //       fill: '#666'
      //     };
      //   },
      //   label2: function label2(label1:any) {
      //     return {
      //       fill: '#000000',
      //       text: formmaterValueZhou(label1[key], 2),
      //       fontWeight: 500,
      //       fontSize: 10
      //     };
      //   }
      // });
      chartCatch.toufangfenxiChart.interval().position('type*' + key)
        .color('industry', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'])
        .adjust('stack')
      chartCatch.toufangfenxiChart.render();
      return chartCatch.toufangfenxiChart;
    }
  };
}