From 719ff5de46e04585b08c0dfc278073037a66fd03 Mon Sep 17 00:00:00 2001
From: "1340691923@qq.com" <1340691923@qq.com>
Date: Mon, 7 Feb 2022 15:25:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=91=E5=9F=BA=E5=9B=BE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                 |  23 +-
 vue/src/components/Charts/TraceSankey.vue | 349 ++++++++++++----------
 2 files changed, 208 insertions(+), 164 deletions(-)

diff --git a/README.md b/README.md
index 25aa6ae..17404f3 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,25 @@
   
-
-技术栈主要用： Vue + golang 
-
-欢迎大家提出自己的issue。
-
-铸龙-用户事件分析系统
+ ## 铸龙-用户行为分析系统
 -----------
-> 铸龙-用户事件分析系统 是一款用来进行分析用户行为事件的BI软件，功能如下
+> 铸龙-用户行为分析系统 是一款用于分析用户行为事件的BI软件，功能如下
  * 事件分析
  * 漏斗分析
  * 留存分析
  * 智能路径分析
  * 报表，面板管理
 
+> 技术栈主要用
+ * 前端：vue+elementui+antdv
+ * 后端：go
+ 
+> 所需中间件
+ * mysql
+ * redis
+ * kafka
+ * clickhouse
+
+欢迎大家提出自己的issue。
+
 ## 相关
 [下载地址]( https://gitee.com/cynthia520/xwl_bi/releases/v1.0.0 ) 
-[文档地址]( https://www.yuque.com/jianghurenchenggolang/oehqme/hen7qy ) 
\ No newline at end of file
+[文档地址]( https://www.yuque.com/jianghurenchenggolang/oehqme/hen7qy ) 
diff --git a/vue/src/components/Charts/TraceSankey.vue b/vue/src/components/Charts/TraceSankey.vue
index aa0dc60..c98a24c 100644
--- a/vue/src/components/Charts/TraceSankey.vue
+++ b/vue/src/components/Charts/TraceSankey.vue
@@ -1,176 +1,213 @@
 <template>
-  <div :id="className" :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :id="className" :style="{height:height,width:width}"/>
 </template>
 
 <script>
-// import echarts from 'echarts'
-// require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-import { setNotopt } from './mixins/utils'
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '400px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Array,
-      default: []
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
+  // import echarts from 'echarts'
+  //require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+  import {setNotopt} from './mixins/utils'
 
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.className))
-
-      this.setOptions()
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
+      },
+      chartData: {
+        type: Array,
+        default: []
+      }
     },
-    setOptions() {
-      if (this.chartData.length == 0) {
-        setNotopt(this.chart)
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {},
+    mounted() {
+      this.initChart()
+    },
+    beforeDestroy() {
+      if (!this.chart) {
         return
       }
-
-      const eventArr = []
-      const targetArr = []
-      const eventSet = new Map()
-      for (const k in this.chartData) {
-        const traceCharts = this.chartData[k]
-
-        eventSet.set(traceCharts['event'][0], 1)
-        eventSet.set(traceCharts['event'][1], 1)
-
-        targetArr.push({
-          source: traceCharts['event'][0],
-          target: traceCharts['event'][1],
-          value: traceCharts['sum_user_count']
-        })
-      }
-      eventSet.forEach((v, k, tmp) => {
-        const obj = {
-          name: k
-        }
-        eventArr.push(obj)
-      })
-
-      const option = {
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
-        tooltip: {
-          trigger: 'item',
-          triggerOn: 'mousemove'
-        },
-        series: [
-          {
-            type: 'sankey',
-            emphasis: {
-              focus: 'adjacency'
-            },
-            nodeAlign: 'left',
-            data: eventArr,
-            links: targetArr,
-            lineStyle: {
-              color: 'source',
-              curveness: 0.5
-            }
-          }
-        ]
-      }
-      try {
-        this.chart.setOption(
-          option
-        )
-      } catch (e) {
-        this.setOptions2()
-      }
+      this.chart.dispose()
+      this.chart = null
     },
-    setOptions2() {
-      const eventArr = []
-      const targetArr = []
-      const eventSet = new Map()
-      for (const k in this.chartData) {
-        const traceCharts = this.chartData[k]
+    methods: {
+      initChart() {
+        this.chart = echarts.init(document.getElementById(this.className))
 
-        eventSet.set(traceCharts['event'][0] + ' ', 1)
-        eventSet.set(traceCharts['event'][1] + '  ', 1)
+        this.setOptions()
 
-        targetArr.push({
-          source: traceCharts['event'][0] + ' ',
-          target: traceCharts['event'][1] + '  ',
-          value: traceCharts['sum_user_count']
-        })
-      }
-      eventSet.forEach((v, k, tmp) => {
-        const obj = {
-          name: k
-        }
-        eventArr.push(obj)
-      })
+      },
+      getColor1() {//固定红色值
+        var re = "#";
+        var col = this.color();
+        re += col + "FF";
+        return re
+      },
+      getColor2() {//固定蓝色值
+        var re = "#FF";
+        var col = this.color();
+        re += col;
+        return re
+      },
 
-      const option = {
-        toolbox: {
-          feature: {
-            saveAsImage: {}
+      color() {
+        var re = "";
+        for (var loopNum = 0; loopNum < 2; loopNum++) {
+          var temp = Math.floor(256 * Math.random());
+          if (temp < 130 && loopNum == 0) {
+            temp = 130;
           }
-        },
-        tooltip: {
-          trigger: 'item',
-          triggerOn: 'mousemove'
-        },
-        series: [
-          {
-            type: 'sankey',
-            emphasis: {
-              focus: 'adjacency'
-            },
-            nodeAlign: 'left',
-            data: eventArr,
-            links: targetArr,
-            lineStyle: {
-              color: 'source',
-              curveness: 0.5
+          if (temp > 200 && loopNum == 1) {
+            temp = 200;
+          }
+          temp = temp.toString(16);//将数值转换成16进制
+          if (temp.length !== 2) {
+            temp = "0" + temp
+          }
+          re += temp//对颜色进行拼接
+        }
+        return re;
+      },
+
+      setOptions() {
+        if (this.chartData.length == 0) {
+          setNotopt(this.chart)
+          return
+        }
+
+        let eventArr = []
+        let targetArr = []
+        let eventSet = new Map()
+        for (let k in this.chartData) {
+          let traceCharts = this.chartData[k]
+
+          eventSet.set(traceCharts['event'][0], 1)
+          eventSet.set(traceCharts['event'][1], 1)
+
+          targetArr.push({
+            source: traceCharts['event'][0],
+            target: traceCharts['event'][1],
+            value: traceCharts['sum_user_count'],
+          })
+        }
+        eventSet.forEach((v, k, tmp) => {
+          let color = ""
+          var random = Math.random();
+          if(random <0.618){//分配红色和蓝色出现的比例
+            color = this.getColor1()
+          }else{
+            color = this.getColor2()
+          }
+          let obj = {
+            name: k,
+            itemStyle: {
+              color: color
             }
           }
-        ]
+          eventArr.push(obj)
+        })
+
+        let levelsArr = []
+
+        for (let i in eventArr) {
+          levelsArr.push({
+            depth: i,
+            itemStyle: {
+              color: eventArr[i].itemStyle.color
+            },
+            lineStyle: {
+              color: 'source',
+              opacity: 0.4
+            }
+          })
+        }
+
+        let option = {
+          tooltip: {
+            trigger: 'item',
+            triggerOn: 'mousemove'
+          },
+          backgroundColor: '#FFFFFF',
+          series: {
+            type: 'sankey',
+            layout: 'none',
+            top: 50,
+            left: '3%',
+            right: '12%',
+            nodeGap: 14,
+            layoutIterations: 0, // 自动优化列表，尽量减少线的交叉，为0就是按照数据排列
+            data: eventArr, // 节点
+            links: targetArr, // 节点之间的连线
+
+            focusNodeAdjacency: 'allEdges', // 鼠标划上时高亮的节点和连线，allEdges表示鼠标划到节点上点亮节点上的连线及连线对应的节点
+            levels: [{
+              depth: 0,
+              itemStyle: {
+                color: '#F27E7E'
+              },
+              lineStyle: {
+                color: 'source',
+                opacity: 0.4
+              }
+            },
+              {
+                depth: 1,
+                lineStyle: {
+                  color: 'source',
+                  opacity: 0.4
+                }
+              },
+              {
+                depth: 2,
+                lineStyle: {
+                  color: 'source',
+                  opacity: 0.4
+                }
+              },
+              {
+                depth: 3,
+                label: {
+                  fontSize: 12
+                }
+              }
+            ],
+            label: {
+              fontSize: 14,
+              color: '#666'
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 0
+              }
+            }
+          }
+        }
+
+          this.chart.setOption(
+            option
+          )
+
+
       }
 
-      this.chart.setOption(
-        option
-      )
     }
   }
-}
 </script>