桑基图优化

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 ) 

vue/src/components/Charts/TraceSankey.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="className" :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :id="className" :style="{height:height,width:width}"/>
 </template>
 
 <script>
@@ -7,6 +7,7 @@
   //require('echarts/theme/macarons') // echarts theme
   import resize from './mixins/resize'
   import {setNotopt} from './mixins/utils'
+
   export default {
     mixins: [resize],
     props: {
@@ -36,9 +37,7 @@ export default {
         chart: null
       }
     },
-  watch: {
+    watch: {},
-
-  },
     mounted() {
       this.initChart()
     },
@@ -54,18 +53,51 @@ export default {
         this.chart = echarts.init(document.getElementById(this.className))
 
         this.setOptions()
+
       },
+      getColor1() {//固定红色值
+        var re = "#";
+        var col = this.color();
+        re += col + "FF";
+        return re
+      },
+      getColor2() {//固定蓝色值
+        var re = "#FF";
+        var col = this.color();
+        re += col;
+        return re
+      },
+
+      color() {
+        var re = "";
+        for (var loopNum = 0; loopNum < 2; loopNum++) {
+          var temp = Math.floor(256 * Math.random());
+          if (temp < 130 && loopNum == 0) {
+            temp = 130;
+          }
+          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
         }
 
-      const eventArr = []
+        let eventArr = []
-      const targetArr = []
+        let targetArr = []
-      const eventSet = new Map()
+        let eventSet = new Map()
-      for (const k in this.chartData) {
+        for (let k in this.chartData) {
-        const traceCharts = this.chartData[k]
+          let traceCharts = this.chartData[k]
 
           eventSet.set(traceCharts['event'][0], 1)
           eventSet.set(traceCharts['event'][1], 1)
@@ -73,104 +105,109 @@ export default {
           targetArr.push({
             source: traceCharts['event'][0],
             target: traceCharts['event'][1],
-          value: traceCharts['sum_user_count']
+            value: traceCharts['sum_user_count'],
           })
         }
         eventSet.forEach((v, k, tmp) => {
-        const obj = {
+          let color = ""
-          name: k
+          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)
         })
 
-      const option = {
+        let levelsArr = []
-        toolbox: {
+
-          feature: {
+        for (let i in eventArr) {
-            saveAsImage: {}
+          levelsArr.push({
-          }
+            depth: i,
+            itemStyle: {
+              color: eventArr[i].itemStyle.color
             },
+            lineStyle: {
+              color: 'source',
+              opacity: 0.4
+            }
+          })
+        }
+
+        let option = {
           tooltip: {
             trigger: 'item',
             triggerOn: 'mousemove'
           },
-        series: [
+          backgroundColor: '#FFFFFF',
-          {
+          series: {
             type: 'sankey',
-            emphasis: {
+            layout: 'none',
-              focus: 'adjacency'
+            top: 50,
+            left: '3%',
+            right: '12%',
+            nodeGap: 14,
+            layoutIterations: 0, // 自动优化列表，尽量减少线的交叉，为0就是按照数据排列
+            data: eventArr, // 节点
+            links: targetArr, // 节点之间的连线
+
+            focusNodeAdjacency: 'allEdges', // 鼠标划上时高亮的节点和连线，allEdges表示鼠标划到节点上点亮节点上的连线及连线对应的节点
+            levels: [{
+              depth: 0,
+              itemStyle: {
+                color: '#F27E7E'
               },
-            nodeAlign: 'left',
-            data: eventArr,
-            links: targetArr,
               lineStyle: {
                 color: 'source',
-              curveness: 0.5
+                opacity: 0.4
-            }
-          }
-        ]
-      }
-      try {
-        this.chart.setOption(
-          option
-        )
-      } catch (e) {
-        this.setOptions2()
               }
             },
-    setOptions2() {
-      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',
+                depth: 1,
-            emphasis: {
-              focus: 'adjacency'
-            },
-            nodeAlign: 'left',
-            data: eventArr,
-            links: targetArr,
                 lineStyle: {
                   color: 'source',
-              curveness: 0.5
+                  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
           )
+
+
       }
+
     }
   }
 </script>