月报样式

client/pages/customer/monthReport/monthReport.acss

@@ -60,4 +60,7 @@
 }
 .shape-chart1{
   padding:100rpx 40rpx 40rpx;
-}
+}
+.shape-chart2{
+  padding:260rpx 40rpx 40rpx;
+}

client/pages/customer/monthReport/monthReport.axml

@@ -31,19 +31,26 @@
 
            <view class="common-data-wrapper block-data-wrapper">
               <image mode="widthFix" class="report-img" src="/image/report-05.jpg"/>
-             <view class="common-data shape-chart">
-        <f2 onInit="onInitChart1"></f2>
+             <view class="common-data shape-chart2">
+        <f2 onInit="onInitChart2"></f2>
              </view>
 
          </view>
+        <!-- 任务完成趋势图 -->
+        <image mode="widthFix" class="report-img" src="/image/report-06.jpg"/>  
+          <!-- 任务完成详细情况 -->
+           <view class="common-data-wrapper block-data-wrapper">
+              <image mode="widthFix" class="report-img" src="/image/report-07.jpg"/>
+             <view class="common-data shape-chart1">
+        <f2 onInit="onInitChart4"></f2>
+             </view>
 
-
-
+         </view>
 
 
         <!-- <image mode="widthFix" class="report-img" src="/image/report-04.jpg"/>
         <image mode="widthFix" class="report-img" src="/image/report-05.jpg"/> -->
-        <image mode="widthFix" class="report-img" src="/image/report-06.jpg"/>
-        <image mode="widthFix" class="report-img" src="/image/report-07.jpg"/>
+        <!-- <image mode="widthFix" class="report-img" src="/image/report-06.jpg"/> -->
+        <!-- <image mode="widthFix" class="report-img" src="/image/report-07.jpg"/> -->
         <image mode="widthFix" class="report-img" src="/image/report-08.png"/>
 </view>

client/pages/customer/monthReport/monthReport.js

@@ -84,12 +84,12 @@ chart
   .interval()
   .position('a*proportion')
   .color('name', [
-    '#1890FF',
-    '#13C2C2',
-    '#2FC25B',
-    '#FACC14',
-    '#F04864',
-    '#8543E0',
+    '#EB6F49',
+    '#00D98B',
+    '#FDB628',
+    '#0091F1',
+    '#00E4EC',
+    '#8256E8',
   ])
   .adjust('stack');
   chart.guide()
@@ -97,11 +97,11 @@ chart
     position: [ '50%', '50%' ],
     style:{
      fill:'#7ED4F6',
-    fontSize:'13',
+    fontSize:'12',
     },
-    content: `本月共
-    ${taskNum}条任务`,
-    rotate: Math.PI / 4,
+    content: ` 本月共
+  ${taskNum}条任务`,
+  
      limitInPlot:true,
   });
 chart.pieLabel({
@@ -130,7 +130,130 @@ chart.render();
     // 注意：需要把chart return 出来
     return chart;
   },
-   onInitChart2(F2, config) {
+  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;
+  },
+   onInitChart0(F2, config) {
 
   //折线图
     const chart = new F2.Chart(config);