tbServantMini_cloud/client/pages/customer/monthReport/monthReport.js

import F2 from '@antv/f2';
// 建议统一从 lib 下引入
const PieLabel = require('@antv/f2/lib/plugin/pie-label'); // 引入 PieLabel 模块

// 方式一：全局注册
F2.Chart.plugins.register(PieLabel);
import request from '../../../util/http'
import apiUrl from '../../../util/apiUrl'
var app = getApp();
Page({
  data: {
    reportDate: '',
    servantName: '',
    serviceDay: '',
    percentTop: '',
    expendTotal: '',
    taskNum: '',
    reportInfo:'',
  },
  onLoad() {
    let reportInfo=app.globalData.reportInfo;
    let serviceTime=JSON.parse(reportInfo.serviceTime);
    let year=(serviceTime.year==null?'':serviceTime.year);
    let month=(serviceTime.month==null?'':serviceTime.month);
    console.log(reportInfo);
    this.setData({
      reportInfo:reportInfo,
      reportDate:year+'年'+month+'月',
      servantName:serviceTime.nickName,
      serviceDay:serviceTime.serviceDay,
      percentTop:serviceTime.serviceQuality,
      expendTotal:reportInfo.expenses
    })
  },
  onInitChart(F2, config) {
    //  饼状图
    const chart = new F2.Chart(config);
    const data = [
      { name: '打扫房间', proportion: 0.4, a: '1' },
      { name: '打扫厨房', proportion: 0.2, a: '1' },
      { name: '带孩子', proportion: 0.18, a: '1' },
      { name: '照顾老人', proportion: 0.15, a: '1' },
      { name: '清洁厨房', proportion: 0.05, a: '1' },
      { name: '其他', proportion: 0.02, a: '1' },
    ];

    chart.source(data);
    chart.legend({
      position: 'right'
    });
    chart.coord('polar', {
      transposed: true,
      innerRadius: 0.7,
    });
    chart.axis(false);
    chart
      .interval()
      .position('a*proportion')
      .color('name', [
        '#1890FF',
        '#13C2C2',
        '#2FC25B',
        '#FACC14',
        '#F04864',
        '#8543E0',
      ])
      .adjust('stack');

    chart.render();

    // 注意：需要把chart return 出来
    return chart;
  },

  onInitChart1(F2, config) {
    //  本月任务分布饼状图
    const chart = new F2.Chart(config);
    let taskNum = JSON.parse(this.data.reportInfo.pieChart).taskSum;
       let dataList=JSON.parse(this.data.reportInfo.pieChart).randList;
       dataList.forEach(item => {
          item.percentage=(item.percentage)*1;
       });
       const data =dataList;
    // const data = JSON.parse(this.data.reportInfo.pieChart).randList;
    //  const data=[{"taskName":"洗护类","percentage":100.00}]

    chart.source(data);
    chart.legend(false);
    chart.coord('polar', {
      transposed: true,
      innerRadius: 0.5,
    });
    chart.axis(false);
    chart
      .interval()
      .position('taskName*percentage')
      .color('taskName', [
        '#EB6F49',
        '#00D98B',
        '#FDB628',
        '#0091F1',
        '#00E4EC',
        '#8256E8',
      ])
      .adjust('stack');
    chart.guide()
      .text({
        position: ['50%', '50%'],
        style: {
          fill: '#7ED4F6',
          fontSize: '12',
        },
        content: ` 本月共
  ${taskNum}条任务`,

        limitInPlot: true,
      });
    chart.pieLabel({
      sidePadding: 30,
      activeShape: true,
      label1: function label1(data) {
        return {
          text: data.taskName,
          fill: '#7ED4F6',
          fontWeight: 'bold'
        };
      },
      label2: function label2(data) {
        return {
          text: data.percentage+'%',
          fill: '#7ED4F6'
        };
      },
      onClick: function onClick(ev) {
        console.log(ev.data);

      }
    });
    chart.render();

    // 注意：需要把chart return 出来
    return chart;
  },
  onInitChart2(F2, config) {
    //  本月任务完成情况
    const chart = new F2.Chart(config);
    const data = JSON.parse(this.data.reportInfo.finishInfo);

    chart.source(data);
    chart.legend(false);
    chart.coord('polar', {
      transposed: true,
    });
    chart.axis(false);
    chart
      .interval()
      .position('a*proportion')
      .color('name', [
        '#EB6F49',
        '#00D98B',
        '#FDB628',
        '#0091F1',
        '#00E4EC',
        '#8256E8',
      ])
      .adjust('stack');

    chart.pieLabel({
      sidePadding: 30,
      activeShape: true,
      label1: function label1(data) {
        return {
          text: data.taskName,
          fill: '#7ED4F6',
          fontWeight: 'bold'
        };
      },
      label2: function label2(data) {
        return {
          text: data.percentage,
          fill: '#7ED4F6'
        };
      },
      onClick: function onClick(ev) {
        console.log(ev.data);

      }
    });
    chart.render();

    // 注意：需要把chart return 出来
    return chart;
  },
   onInitChart3(F2, config) {

    //任务完成趋势图
    const chart = new F2.Chart(config);
 const data = JSON.parse(this.data.reportInfo.taskTrend);
    chart.source(data, {
      workDay: {
    type: 'timeCat',
    tickCount: 5,
    // mask: 'hh:mm',
    range: [ 0, 1 ]
  },
  taskNum: {
    tickCount: 3,
    // formatter: function formatter(ivalue) {
    //   return ivalue + '%';
    // }
  }
    });
    // chart.tooltip({
    //   showItemMarker: false,
    //   onShow: function onShow(ev) {
    //     const items = ev.items;
    //     items[0].name = null;
    //     items[0].name = items[0].title;
    //     items[0].value = '¥ ' + items[0].value;
    //   }
    // });
  chart.axis('workDay', {
  line: null,
  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.axis('tem', {
  grid: function grid(text) {
    if (text === '0%') {
      return {
        lineDash: null,
        lineWidth: 1
      };
    }
  }
});
chart.legend({
  position: 'bottom',
  offsetY: -5
});
chart.line()
  .position('workDay*taskNum')
  .color('name');
  

chart.render();
    // 注意：需要把chart return 出来
    return chart;
  },
  onInitChart4(F2, config) {
    //  任务类完成详细情况
    const chart = new F2.Chart(config);
    // const data = [{"number":"20","typeName":"任务太多"},{"number":"0","typeName":"我不会"},{"number":"10","typeName":"任务不详细"}];
    const data=JSON.parse(this.data.reportInfo.classfInish).lefts;
    chart.source(data, {
      sales: {
        tickCount: 5
      }
    });
    // chart.tooltip({
    //   showItemMarker: false,
    //   onShow: function onShow(ev) {
    //     const items = ev.items;
    //     items[0].name = null;
    //     items[0].name = items[0].title;
    //     items[0].value = '¥ ' + items[0].value;
    //   }
    // });
    chart.interval()
      .position('taskClass*finishRate')
      .color('l(90) 0:#FBEC9F 1:#F3D34D'); // 定义柱状图渐变色
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  },
  onInitChart5(F2, config) {

    //任务无法完成原因
    const chart = new F2.Chart(config);
    // const data = [{"number":"20","typeName":"任务太多"},{"number":"0","typeName":"我不会"},{"number":"10","typeName":"任务不详细"}];
    const data=JSON.parse(this.data.reportInfo.unfinishd);
    chart.source(data, {
      sales: {
        tickCount: 5
      }
    });
    // chart.tooltip({
    //   showItemMarker: false,
    //   onShow: function onShow(ev) {
    //     const items = ev.items;
    //     items[0].name = null;
    //     items[0].name = items[0].title;
    //     items[0].value = '¥ ' + items[0].value;
    //   }
    // });
    chart.interval()
      .position('typeName*number')
      .color('l(90) 0:#FBEC9F 1:#F3D34D'); // 定义柱状图渐变色
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  },
  onInitChart0(F2, config) {

    //折线图
    const chart = new F2.Chart(config);
    const data = [
      { value: 63.4, city: 'New York', date: '2011-10-01' },
      { value: 62.7, city: 'Alaska', date: '2011-10-01' },
      { value: 72.2, city: 'Austin', date: '2011-10-01' },
      { value: 58, city: 'New York', date: '2011-10-02' },
      { value: 59.9, city: 'Alaska', date: '2011-10-02' },
      { value: 67.7, city: 'Austin', date: '2011-10-02' },
      { value: 53.3, city: 'New York', date: '2011-10-03' },
      { value: 59.1, city: 'Alaska', date: '2011-10-03' },
      { value: 69.4, city: 'Austin', date: '2011-10-03' },
    ];
    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'timeCat',
        mask: 'MM-DD'
      },
      value: {
        max: 300,
        tickCount: 4
      }
    });
    chart.area().position('date*value').color('city').adjust('stack');
    chart.line().position('date*value').color('city').adjust('stack');
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  },
});