update: 图表

src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue

@@ -127,7 +127,17 @@ export default {
           let resData = res.data;
           that.loading = false;
           if (resData.code == 0) {
-            that.overViewData = resData.result || {};
+            let result = resData.result || { addNumT: 0, addNum: 0, dateList: [] };
+            // result.dateList = [
+            //   { bizDate: '2018/8/1', 新增人数: 0 },
+            //   { bizDate: '2018/8/2', 新增人数: 1 },
+            //   { bizDate: '2018/8/3', 新增人数: 1 },
+            //   { bizDate: '2018/8/4', 新增人数: 1 }
+            // ];
+            result.dateList.map(function(date, index) {
+              date['新增人数'] = date.addNum;
+            });
+            that.overViewData = result;
             return;
           }
           errMsg.errorMsg(resData);

src/views/salesleads/actCodeManage/staffActCode/newAddChart.vue

 <template>
   <div>
-    <div :id="id"></div>
+    <div :id="id" class="chart--nodata" :style="!charData.length ? 'height:0;' : ''"></div>
     <div v-if="!charData.length" class="chart--nodata">
       <div>
         <img class="image-120" src="@/assets/no-data.svg" />
@@ -8,18 +8,11 @@
       </div>
     </div>
   </div>
-  <!-- <div :id="id"></div> -->
-  <!-- <div  v-if="!charData.length" class="chart--nodata">
-    <div>
-      <img class="image-120" src="@/assets/no-data.svg" />
-      <p class="font-14 color-606266 no-data-text">暂无数据</p>
-    </div>
-  </div> -->
 </template>
 
 <script>
-// import G2 from '@antv/g2';
 import * as G2 from '@antv/g2';
+import filters from '@/filters/index';
 export default {
   components: {},
   data() {
@@ -31,7 +24,7 @@ export default {
     charData: {
       type: Array,
       default() {
-        return []; //{ bizDate: '2018/8/1', 新增人数: 4623 }
+        return [];
       }
     },
     id: String
@@ -62,18 +55,24 @@ export default {
         padding: [70, 60, 40, 70]
       });
       //装载数据
-
-      // this.chart.data(this.charData); // 载入数据源
-      this.chart.data(this.charData, {
-        bizDate: {
-          alias: '日期' //别名
-        },
-        addNum: {
-          alias: '新增人数'
+      let list = JSON.parse(JSON.stringify(this.charData));
+      list.sort((a, b) => {
+        return b.新增人数 - a.新增人数;
+      });
+      let maxNum = list[0]['新增人数'];
+      // console.log(list);
+      this.chart.data(this.charData); // 载入数据源
+      this.chart.scale({
+        新增人数: {
+          // tickInterval: 1,
+          tickCount: maxNum > 2 ? 5 : maxNum + 1,
+          minTickInterval: 1,
+          nice: true,
+          min: 0
+          // type: 'linear'
         }
       });
-
-      this.chart.axis('addNum', {
+      this.chart.axis('新增人数', {
         grid: {
           line: {
             type: 'line',
@@ -93,42 +92,47 @@ export default {
           }
         }
       });
-      this.chart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-        itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
-            <span style="background-color:{color};" class="g2-tooltip-marker"></span>
-            {name}: {value}
-            </div>`
-      });
+      // this.chart.tooltip({
+      //   showCrosshairs: true,
+      //   shared: true,
+      //   itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
+      //       <span style="background-color:{color};" class="g2-tooltip-marker"></span>
+      //       {name}: {value}
+      //       </div>`
+      // });
       // 图例
       this.chart.legend({
         custom: true,
         position: 'top-left',
-        items: [{ name: '新增人数', value: 'addNum', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
+        items: [{ name: '新增人数', value: '新增人数', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
       });
       if (this.charData.length > 1) {
         this.chart
           .line()
-          .position('bizDate*addNum')
-          .color('#4B74E8')
-          .tooltip('addNum', addNum => {
-            return {
-              name: '新增人数',
-              value: addNum
-            };
-          });
-      } else {
+          .position('bizDate*新增人数')
+          .color('#4B74E8');
+        // .tooltip('addNum', addNum => {
+        //   return {
+        //     name: '新增人数',
+        //     value: addNum
+        //   };
+        // });
+      } else if (this.charData.length == 1) {
+        let time = new Date(this.charData[0].bizDate).getTime();
+        let start = { 新增人数: null, bizDate: filters.timeStampToYmd(time - 86400000) };
+        let end = { 新增人数: null, bizDate: filters.timeStampToYmd(time + 86400000) };
+        let list = [start, this.charData[0], end];
+        this.chart.data(list);
         this.chart
           .point()
-          .position('bizDate*addNum')
-          .color('#4B74E8')
-          .tooltip('addNum', addNum => {
-            return {
-              name: '新增人数',
-              value: addNum
-            };
-          });
+          .position('bizDate*新增人数')
+          .color('#4B74E8');
+        // .tooltip('addNum', addNum => {
+        //   return {
+        //     name: '新增人数',
+        //     value: addNum
+        //   };
+        // });
       }
 
       this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
@@ -140,7 +144,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .chart--nodata {
-  height: 256px;
+  height: 359px;
   width: 100%;
   display: flex;
   justify-content: center;