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);
Page({
  data: {
    reportDate:'2020年11月',
    servantName:'王阿姨',
    serviceDay:'28',
    percentTop:'88%',
    expendTotal:'1888',
    taskNum:'60',
  },
  onLoad() {

  },
   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=this.data.taskNum;

// chart.plugins.register([ PieLabel ]);
    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(false);
chart.coord('polar', {
  transposed: true,
  innerRadius: 0.5,
});
chart.axis(false);
chart
  .interval()
  .position('a*proportion')
  .color('name', [
    '#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.name,
      fill: '#7ED4F6',
      fontWeight: 'bold'
    };
  },
  label2: function label2(data) {
    return {
      text: data.proportion,
      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);
   let taskNum=this.data.taskNum;

// chart.plugins.register([ PieLabel ]);
    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(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.name,
      fill: '#7ED4F6',
      fontWeight: 'bold'
    };
  },
  label2: function label2(data) {
    return {
      text: data.proportion,
      fill: '#7ED4F6'
    };
  },
   onClick: function onClick(ev) {
    console.log(ev.data) ;
    
  }
  });
chart.render();
   
    // 注意：需要把chart return 出来
    return chart;
  },
  onInitChart4(F2, config) {
    //  任务类完成详细情况
    //  本月任务分布饼状图
   const chart = new F2.Chart(config);
   let taskNum=this.data.taskNum;

// chart.plugins.register([ PieLabel ]);
    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: 'left'
});
chart.coord('polar', {
  transposed: true,
  innerRadius: 0.5,
});
chart.axis(false);
chart
  .interval()
  .position('a*proportion')
  .color('name', [
    '#EB6F49',
    '#00D98B',
    '#FDB628',
    '#0091F1',
    '#00E4EC',
    '#8256E8',
  ])
  .adjust('stack')
   .style({
    lineWidth: 1,
    stroke: '#4413A0',
    lineJoin: 'round',
    lineCap: 'round'
  });
  chart.guide()
  .text({
    position: [ '50%', '50%' ],
    style:{
     fill:'#7ED4F6',
    fontSize:'12',
    backgroundColor:'#fff',
    },
    content: `完成
占比`,
  
     limitInPlot:true,
  });

chart.render();
   
    // 注意：需要把chart return 出来
    return chart;
  },
   onInitChart5(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;
  },
   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;
  },
});