修改消费视图

miniprogram/pages/components/PayTypeChart/PayTypeChart.ts

@@ -16,6 +16,7 @@ function initChart(canvas, width, height, F2) {
     el: canvas,
     width,
     height,
+    padding: ['auto', 'auto', 50, 'auto'],
   });
 
   paytypeChart.source(data, {
@@ -32,46 +33,56 @@ function initChart(canvas, width, height, F2) {
       padding: [6, 10],
     },
     onShow(ev) {
+      console.log(ev);
       const { items } = ev;
-      items[0].name = '';
-      items[0].value = month + '-' + items[0].title;
-      items[1].name = '';
-      items[1].value = items[1].value + '元';
+      items[0].name = items[0].title;
+      items[0].value = formatPrice(Number(items[0].value));
+      // items[1].name = '';
+      // items[1].value = items[1].value + '元';
     },
   });
 
-  paytypeChart.coord('polar', {
-    transposed: true,
-    innerRadius: 0.5,
-    radius: 0.9,
-  });
+  // paytypeChart.coord('polar', {
+  //   transposed: true,
+  //   innerRadius: 0.5,
+  //   radius: 0.9,
+  // });
   paytypeChart.legend({
     position: 'right',
     marker: 'square',
+    onClick: ev => {
+      const tooltip = paytypeChart.get('tooltip');
+      console.log(ev, tooltip);
+      // paytypeChart.
+    },
   });
-  paytypeChart.tooltip(false);
   paytypeChart
     .interval()
-    .position('a*count')
-    .color('key', ['#EB7E59', '#13C2C2', '#FACC14', '#1890FF'])
-    .adjust('stack');
-  paytypeChart.axis(false);
+    .position('name*count')
+    .color('name', ['#EB7E59', '#13C2C2', '#FACC14', '#1890FF']);
+  paytypeChart.axis('name', {
+    label: {
+      rotate: -Math.PI / 4,
+      textAlign: 'end',
+      textBaseline: 'middle',
+    },
+  });
   paytypeChart.render();
 
   // 绘制内阴影
-  const frontPlot = paytypeChart.get('frontPlot');
-  const coord = paytypeChart.get('coord'); // 获取坐标系对象
-  frontPlot.addShape('sector', {
-    attrs: {
-      x: coord.circleRadius * (1 + coord.innerRadius) + coord.endAngle,
-      y: coord.center.y,
-      r: 0, // 全半径
-      r0: coord.circleRadius * coord.innerRadius * 1.1,
-      fill: '#fff',
-    },
-  });
-  paytypeChart.get('canvas').draw();
-  console.log('coord', coord);
+  // const frontPlot = paytypeChart.get('frontPlot');
+  // const coord = paytypeChart.get('coord'); // 获取坐标系对象
+  // frontPlot.addShape('sector', {
+  //   attrs: {
+  //     x: coord.circleRadius,
+  //     y: coord.center.y,
+  //     r: coord.circleRadius * coord.innerRadius * 1.1, // 全半径
+  //     r0: 0,
+  //     fill: '#000',
+  //   },
+  // });
+  // paytypeChart.get('canvas').draw();
+  // console.log('coord', coord);
 
   return paytypeChart;
 }
@@ -82,33 +93,23 @@ Component({
       type: Array,
       value: [],
       observer(newVal) {
-        paytypeChart &&
-          paytypeChart.legend({
-            position: 'right',
-            marker: 'square',
-            itemFormatter: val => {
-              let item = newVal.find(item => item.key === val);
-              if (item) {
-                let name = item.name;
-                if (item && item.name.length < 4) {
-                  name += '\xa0\xa0\xa0';
-                }
-                return name + '   ' + formatPrice(item.count);
-              } else {
-                return '';
-              }
-            },
-            // custom: true,
-            // items: newVal.map(item => ({
-            //   name: item.name,
-            //   value: ' ' + formatPrice(item.count),
-            //   marker: {
-            //     symbol: 'square',
-            //     fill: colorMap[item.key],
-            //     radius: 4,
+        // paytypeChart &&
+        //   paytypeChart.legend({
+        //     position: 'right',
+        //     marker: 'square',
+        //     itemFormatter: val => {
+        //       let item = newVal.find(item => item.key === val);
+        //       if (item) {
+        //         let name = item.name;
+        //         if (item && item.name.length < 4) {
+        //           name += '\xa0\xa0\xa0';
+        //         }
+        //         return name + '   ' + formatPrice(item.count);
+        //       } else {
+        //         return '';
+        //       }
         //     },
-            // })),
-          });
+        //   });
         paytypeChart && paytypeChart.changeData(newVal);
       },
     },