update: 图标

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

 <template>
   <div class="app-detail-wrap p-20">
+    <!-- <div class="p-20"></div> -->
     <div class="flex p-b-40">
       <img v-if="!singleCode" class="img-200" src="../../../../assets/data/time.png" />
       <div class="text-ellipsis-white" :style="singleCode ? 'width:100%;' : 'width: calc(100% - 230px);'">

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

 <template>
+  <!-- <div> -->
   <div class="app-detail-wrap">
     <div>
       <div class="flex justify-between title">
@@ -43,6 +44,9 @@
           <el-date-picker class="w256" v-model="dateDefault" type="daterange" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions()" @change="onDateChange"> </el-date-picker>
         </div>
       </div>
+      <!-- <member-chart key="member_added_box" :charData="memberchartData" id="member_added_box" name="新增会员" v-if="memberChartType === 1"></member-chart> -->
+
+      <new-add-chart :charData="charData" id="new-add-chart"></new-add-chart>
     </div>
     <div>
       <div class="flex justify-between title">
@@ -58,12 +62,14 @@
       <data-detail :id="actCode"></data-detail>
     </div>
   </div>
+  <!-- </div> -->
 </template>
 <script>
 import dataDetail from '../../components/dataDetail.vue';
+import newAddChart from './newAddChart.vue';
 export default {
   name: 'act-code-detail-statistics',
-  components: { dataDetail },
+  components: { dataDetail, newAddChart },
   props: {
     brandId: {
       type: String,
@@ -118,7 +124,13 @@ export default {
             return time.getTime() < start || time.getTime() > end;
           }
         };
-      }
+      },
+      charData: [
+        { date: '2018/8/1', value: 4623 },
+        { date: '2018/8/2', value: 6145 },
+        { date: '2018/8/3', value: 508 },
+        { date: '2018/8/4', value: 289 }
+      ]
     };
   },
   methods: {

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

+<template>
+  <div :id="id"></div>
+  <!-- <div v-if="charData.length" :id="id"></div> -->
+  <!-- <div v-else class="chart--nodata"></div> -->
+</template>
+
+<script>
+// import G2 from '@antv/g2';
+import * as G2 from '@antv/g2';
+export default {
+  data() {
+    return {
+      chart: null
+      // name: '新增会员'
+    };
+  },
+  props: {
+    charData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    id: String,
+    width: {
+      type: Number,
+      default: 1192
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
+    }, 30);
+  },
+  beforeUpdate() {
+    this.drawChart();
+  },
+  watch: {
+    charData() {
+      this.drawChart();
+    }
+  },
+  methods: {
+    async drawChart() {
+      this.chart && this.chart.destroy();
+      this.chart = new G2.Chart({
+        container: this.id,
+        height: 359,
+        forceFit: true,
+        width: this.width,
+        padding: [20, 40, 80, 80]
+      });
+      //装载数据
+      //  { date: '2018/8/1', type: '首页', value: 4623 },
+      //   { date: '2018/8/2', type: '首页', value: 6145 },
+      //   { date: '2018/8/3', type: '首页', value: 508 },
+      //   { date: '2018/8/4', type: '首页', value: 289 }
+      // this.chart.data(this.charData); // 载入数据源
+      this.chart.data(this.charData, {
+        date: {
+          // type: 'cat', //分类
+          alias: '日期' //别名
+        },
+        value: {
+          alias: '新增人数'
+        }
+      });
+      //坐标轴配置(法一配置)
+      this.chart.axis('date', {
+        line: {
+          style: {
+            stroke: '#606266',
+            lineDash: [3, 3]
+          }
+        },
+        tickLine: {
+          style: {
+            fill: '#E4E7ED',
+            lineDash: [3, 3]
+          }
+        },
+        label: {
+          style: {
+            fill: '#606266'
+          }
+        }
+      });
+      this.chart.axis('value', {
+        grid: {
+          line: {
+            type: 'line',
+            style: {
+              stroke: '#E4E7ED',
+              lineDash: [3, 3]
+            }
+          }
+        },
+        label: {
+          style: {
+            fill: '#606266'
+          },
+          formatter: val => {
+            // 格式化参数值
+            return val + '万';
+          }
+        }
+      });
+      // 图例
+      this.chart.legend({
+        custom: true,
+        position: 'top-left',
+        items: [{ name: '新增人数', value: 'value', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
+      });
+
+      //绘制折线图
+      // this.chart
+      //   .line()
+      //   .position('date*value')
+      //   .color('type'); //x轴:date  y轴：value ，折线根据type分颜色
+      // //设置折点样式
+      // this.chart
+      //   .point()
+      //   .position('date*value')
+      //   .size(3)
+      //   .color('type')
+      //   .shape('circle');
+      this.chart
+        .line()
+        .position('date*value')
+        .color('#4B74E8');
+      // chart.line().position('date*nlp').color('#2fc25b')
+
+      // this.chart.annotation().dataMarker({
+      //   top: true,
+      //   position: ['2016-02-28', 9],
+      //   text: {
+      //     content: 'Blockchain 首超 NLP',
+      //     style: {
+      //       textAlign: 'left'
+      //     }
+      //   },
+      //   line: {
+      //     length: 30
+      //   }
+      // });
+
+      this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
+
+      //图表绘制的最后一步，用于将图表渲染至画布
+      this.chart.render();
+    }
+  }
+};
+</script>