修改数据首页展现

src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue

@@ -28,14 +28,14 @@
       </el-radio-group>
     </div>
     <div class="Dashboard-title">会员充值数据
-      <div class="CustomerRechangeChart-tip">
+      <div class="CustomerRechargeChart-tip">
         <span
-          class="CustomerRechange-tooltip"
+          class="CustomerRecharge-tooltip"
           style="background-color:#4e82fb;"
         ></span> 累计充值：
         <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? (rechargeCount.rechargeMoney).toFixed(2) : '0.00' }}元</span>
         <span
-          class="CustomerRechange-tooltip"
+          class="CustomerRecharge-tooltip"
           style="background-color:#26c9a8;"
         ></span> 充值人数：
         <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMen ? rechargeCount.rechargeMen : 0 }}人</span>
@@ -50,7 +50,7 @@ import Chart from './chart';
 import { mapGetters, mapActions } from 'vuex';
 
 export default {
-  name: 'CustomerRechange',
+  name: 'CustomerRecharge',
   components: {
     Chart,
   },
@@ -82,7 +82,7 @@ export default {
     display: flex;
     align-items: center;
   }
-  .CustomerRechangeChart-tip {
+  .CustomerRechargeChart-tip {
     position: absolute;
     right: 0;
     top: 50px;
@@ -91,7 +91,7 @@ export default {
     font-size: 14px;
     font-weight: normal;
     text-align: center;
-    .CustomerRechange-tooltip {
+    .CustomerRecharge-tooltip {
       display: inline-block;
       width: 10px;
       height: 5px;

src/containers/Dashboard/CustomerRecharge/chart.vue

 <template>
-  <div class="CustomerRechangeChart">
-
-    <div id='CustomerRechangeChart'></div>
+  <div class="CustomerRechargeChart">
+    <div id='CustomerRechargeChart'></div>
     <div id='CustomerRechangeSlider'></div>
   </div>
 </template>
@@ -13,8 +12,60 @@ import chartMixin from '../chartMixin';
 import DataSet from '@antv/data-set';
 import _ from 'lodash';
 
+const Shape = G2.Shape;
+const Util = G2.Util;
+const Global = G2.Global;
+
+function getRectRange(points, step) {
+  var xValues = [];
+  var yValues = [];
+  for (var i = 0, len = points.length; i < len; i++) {
+    var point = points[i];
+    xValues.push(point.x);
+    yValues.push(point.y - step);
+  }
+  var xMin = Math.min.apply(null, xValues);
+  var yMin = Math.min.apply(null, yValues);
+  var xMax = Math.max.apply(null, xValues);
+  var yMax = Math.max.apply(null, yValues);
+
+  return {
+    x: xMin,
+    y: yMin,
+    width: xMax - xMin,
+    height: yMax - yMin,
+  };
+}
+// 左侧柱子
+Shape.registerShape('interval', 'left', {
+  draw: function draw(cfg, container) {
+    var points = this.parsePoints(cfg.points);
+    var style = Util.mix(Global.shape.interval, cfg.style, { fill: cfg.color });
+
+    var rectCfg = getRectRange(points, cfg.size); // cfg.size 对应 .size(25)
+
+    return container.addShape('rect', {
+      className: 'interval',
+      attrs: Util.mix(rectCfg, style),
+    });
+  },
+});
+// 右侧柱子
+Shape.registerShape('interval', 'right', {
+  draw: function draw(cfg, container) {
+    var points = this.parsePoints(cfg.points);
+    var style = Util.mix(Global.shape.interval, cfg.style, { fill: cfg.color });
+    var rectCfg = getRectRange(points, -cfg.size / 2); // cfg.size 对应 .size(25
+
+    return container.addShape('rect', {
+      className: 'interval',
+      attrs: Util.mix(rectCfg, style),
+    });
+  },
+});
+
 export default {
-  name: 'CustomerRechangeChart',
+  name: 'CustomerRechargeChart',
   mixins: [chartMixin],
   props: {
     rechargeCount: {
@@ -24,14 +75,14 @@ export default {
   data() {
     return {
       demoList: [
-        { areaName: 'bvs', rechargeMoney: 13.45 },
-        { areaName: 'gsn', rechargeMoney: 23.45 },
-        { areaName: 'dsf', rechargeMoney: 12.45 },
-        { areaName: 'bzx', rechargeMoney: 45.45 },
-        { areaName: 'bvmf', rechargeMoney: 3213.454 },
-        { areaName: 'swer', rechargeMoney: 256 },
-        { areaName: 'cvsdf', rechargeMoney: 541 },
-        { areaName: 'cvsdf', rechargeMoney: 10.15 },
+        { areaName: 'bvs', rechargeMoney: 13.45, rechargeMen: 12 },
+        { areaName: 'gsn', rechargeMoney: 23.45, rechargeMen: 13 },
+        { areaName: 'dsf', rechargeMoney: 12.45, rechargeMen: 16 },
+        { areaName: 'bzx', rechargeMoney: 45.45, rechargeMen: 63 },
+        { areaName: 'bvmf', rechargeMoney: 3213.454, rechargeMen: 32 },
+        { areaName: 'swer', rechargeMoney: 256, rechargeMen: 125 },
+        { areaName: 'cvsdf', rechargeMoney: 541, rechargeMen: 14 },
+        { areaName: 'cvsdf', rechargeMoney: 10.15, rechargeMen: 574 },
       ],
       slider: null,
       sliderDom: null,
@@ -51,24 +102,6 @@ export default {
       const dv = this.ds.createView().source(this.data);
       this.dv = dv;
       dv.transform({
-        type: 'fold',
-        fields: ['rechargeMoney', 'rechargeMen'], // 展开字段集
-        key: 'key', // key字段
-        value: 'value', // value字段
-        retains: ['areaName'],
-      }).transform({
-        type: 'map',
-        callback(row) {
-          if (row.key === 'rechargeMoney') {
-            row.key = '充值金额';
-          }
-          if (row.key === 'rechargeMen') {
-            row.key = '充值人数';
-          }
-          return row;
-        },
-      });
-      dv.transform({
         type: 'filter',
         callback: obj => {
           if (
@@ -87,51 +120,60 @@ export default {
           );
         },
       });
+
       this.chart = new G2.Chart({
-        container: 'CustomerRechangeChart',
+        container: 'CustomerRechargeChart',
         forceFit: true,
         height: this.height,
         padding: [50, 50, 50, 120],
       });
-      this.chart.source(dv);
-      this.chart.axis('areaName', {
-        label: {
-          offset: 5,
+
+      this.chart.source(dv, {
+        rechargeMoney: {
+          alias: '充值金额',
+        },
+        rechargeMen: {
+          alias: '充值人数',
         },
       });
-      this.chart.axis('value');
+      this.chart.axis('rechargeMoney', {
+        grid: null,
+      });
+      this.chart.axis('rechargeMen');
       this.chart.coord().transpose();
-      this.chart.legend(false);
-
-      // 坐标系及着色
-      this.chartGeom = this.chart
+      this.chart
         .interval()
-        .position('areaName*value')
-        .color('key', ['#4e82fb', '#26c9a8'])
-        .adjust([
-          {
-            type: 'dodge',
-            marginRatio: 0.2,
-          },
-        ]);
+        .position('areaName*rechargeMoney')
+        .color('#4e82fb')
+        .shape('left')
+        .size(10);
+      this.chart
+        .interval()
+        .position('areaName*rechargeMen')
+        .shape('right')
+        .color('#26c9a8')
+        .size(10);
 
+      this.chart.legend(false);
       this.chart.render();
 
       this.initSlider();
     },
     initSlider() {
-      const wrapDom = document.getElementById('CustomerRechangeChart');
+      const wrapDom = document.getElementById('CustomerRechargeChart');
       let height = wrapDom.clientHeight;
 
       // const arrLength = this.data.length;
       // let spanNum = 4 / arrLength;
       this.sliderDom = document.getElementById('CustomerRechangeSlider');
+
       this.sliderDom.style = `height:${height}px`;
       this.slider = new Slider({
         container: this.sliderDom, // dom 容器 id 或者 dom 容器对象
         width: 26, // slider 的宽度，默认为 'auto'，即自适应宽度
         height: height, // slider 的高度，默认为 '26px'
-        xAxis: 'value', // 背景图的横轴对应字段，同时为数据筛选的字段
+        padding: [50, 0, 50, 0],
+        xAxis: 'rechargeMen', // 背景图的横轴对应字段，同时为数据筛选的字段
         yAxis: 'areaName', // 背景图的纵轴对应字段
         startRadio: this.ds.state.startRadio, // 新增
         endRadio: this.ds.state.endRadio, // 新增
@@ -153,7 +195,7 @@ export default {
       this.slider.render(); // 渲染
     },
     updateSlider() {
-      const wrapDom = document.getElementById('CustomerRechangeChart');
+      const wrapDom = document.getElementById('CustomerRechargeChart');
       let height = wrapDom.clientHeight;
 
       let dom = this.sliderDom;
@@ -165,6 +207,7 @@ export default {
           container: this.sliderDom,
           width: 26,
           height: height,
+          padding: [50, 0, 50, 0],
           xAxis: 'value',
           yAxis: 'areaName',
           startRadio: this.ds.state.startRadio,
@@ -204,7 +247,7 @@ export default {
 </script>
 
 <style lang="scss">
-.CustomerRechangeChart {
+.CustomerRechargeChart {
   position: relative;
   #CustomerRechangeSlider {
     margin-left: -30px;