update: dist

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

@@ -47,6 +47,7 @@ export default {
     async drawChart() {
       this.chart && this.chart.destroy();
       if (!this.charData.length) return;
+      const data = this.handleData(this.charData);
       this.chart = new G2.Chart({
         container: this.id,
         autoFit: true,
@@ -55,7 +56,7 @@ export default {
         width: 1400,
         padding: [70, 60, 40, 70]
       });
-      this.chart.source(this.charData, {
+      this.chart.source(data, {
         value: {
           type: 'linear',
           tickInterval: 50
@@ -66,32 +67,25 @@ export default {
         shared: true
       });
       this.chart.scale({
-        bizDate: {
+        date: {
           dataKey: 'date',
           type: 'cat'
         },
-        clickTimes: {
+        num: {
           min: 0,
+          tickCount: 5,
           nice: true
         },
-        clickNum: {
-          min: 0
-        },
-        addNum: {
-          min: 0
+        times: {
+          min: 0,
+          tickCount: 5,
+          nice: true
         }
       });
-      // 图例
       this.chart.legend({
-        custom: true,
-        position: 'top-left',
-        items: [
-          { name: '今日添加人数', value: 'addNum', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } },
-          { name: '今日点击人次', value: 'clickTimes', marker: { symbol: 'line', style: { stroke: '#D6B38C', lineWidth: 12, lineHeight: 8 } } },
-          { name: '今日点击人数', value: 'clickNum', marker: { symbol: 'line', style: { stroke: '#14C9C9', lineWidth: 12, lineHeight: 8 } } }
-        ]
+        position: 'top-left'
       });
-      this.chart.axis('clickTimes', {
+      this.chart.axis('times', {
         grid: {
           line: {
             type: 'line',
@@ -108,7 +102,7 @@ export default {
           }
         }
       });
-      this.chart.axis('clickNum', {
+      this.chart.axis('num', {
         grid: {
           line: {
             type: 'line',
@@ -120,50 +114,49 @@ export default {
         },
         label: {
           formatter: text => {
-            let num = Number(text);
+            let num = text >= 1 ? text : 0;
             return num + '人';
           }
         }
       });
-      this.chart.axis('addNum', false);
-
       this.chart.tooltip({
-        showCrosshairs: true,
+        showMarkers: false,
         shared: true,
-        itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
-            <span style="background-color:{color};" class="g2-tooltip-marker"></span>
-            {name}: {value}
-            </div>`
+        showCrosshairs: true
       });
       this.chart
         .line()
-        .position('bizDate*clickNum')
-        .tooltip('clickNum', clickNum => {
-          return { name: '今日点击人数', value: clickNum };
-        })
-        .color('#14C9C9');
-      this.chart
-        .line()
-        .position('bizDate*addNum')
-        .color('#4B74E8')
-        .tooltip('addNum', addNum => {
-          return {
-            name: '今日添加人数',
-            value: addNum
-          };
-        });
+        .position('date*num')
+        .color('type', ['rgba(75,116,232,1)', 'rgba(105,200,168,1)', 'rgba(251, 159, 45, 1)']);
 
       this.chart
         .line()
-        .position('bizDate*clickTimes')
-        .tooltip('clickTimes', clickTimes => {
-          return { name: '今日点击人次', value: clickTimes };
-        })
-        .color('#D6B38C');
-
-      this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
+        .position('date*times')
+        .color('type', ['rgba(251, 159, 45, 1)']);
+      // this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
       //图表绘制的最后一步，用于将图表渲染至画布
       this.chart.render();
+    },
+    handleData(data) {
+      let arr = [];
+      data.forEach(item => {
+        arr.push({
+          date: item.bizDate,
+          type: '今日添加人数',
+          num: item.addNum
+        });
+        arr.push({
+          date: item.bizDate,
+          type: '今日点击人数',
+          num: item.clickNum
+        });
+        arr.push({
+          date: item.bizDate,
+          type: '今日点击人次',
+          times: item.clickTimes
+        });
+      });
+      return arr;
     }
   }
 };