cxw-010203

src/views/WeiboDetails/weiboSpreadFission/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-14 19:15:58
- * @LastEditTime: 2021-11-09 13:18:14
+ * @LastEditTime: 2021-11-11 09:45:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/index.vue
@@ -17,8 +17,7 @@
 </template>
 
 <script>
-import {getGraphData} from "@/api/getEchars";
-//import {getDiffuseZhuTi} from "@/api/WeiboDetails";
+import {getDiffuseZhuTi} from "@/api/WeiboDetails";
 import createOpt from "./opt"
 export default {
     name: "weiboSpreadFission",
@@ -29,23 +28,56 @@ export default {
             form: {
                 token:"",
                 sBrand:""
-            }
+            },
+            colors: [
+                "#FFB600",
+                "#886CFF",
+                "#0084FF",
+                "#4CB690",
+                "#58B458",
+                "#6C6C6C",
+                "#F56161",
+                "#FC754C",
+                "#5F5EEC",
+            ],
         }
     },
     created() {
         this.form.token = this.getToken;
-        this.form.sBrand = this.getBrand.brandname || this.brand;
-        this.drawGraph();
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getData();
     },
     methods: {
-        drawGraph() {
+        getData() {
             let obj = Object.assign({}, this.getCtime2, this.form);
-            this.load = true;
-            getGraphData(obj).then(res => {
-                this.opt = createOpt(res.data);
-                this.load = false;
+            getDiffuseZhuTi(obj).then((res) => {
+                let data = res.data;
+                let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
+                let listIdName = data.listIdName || [];
+                let listPid = data.listPid || [];
+                let nodes = listIdName;
+                let edges = listPid;
+                getCoreDiffuseWeiBo.forEach((ele) => {
+                    let _source = ele._source;
+                    let xgmid = _source.xgmid;
+                    let row = nodes.find((e) => e.id === xgmid);
+                    if (row) {
+                        row.value = _source.volume;
+                    } else {
+                        row.value = 0;
+                    }
+                });
+                nodes.forEach((ele) => {
+                    let colorSet = new Set(this.colors);
+                    let curIndex = Math.round(
+                        Math.random() * (colorSet.size - 1)
+                    );
+                    ele.color = this.colors[curIndex];
+                });
+                let o = { nodes, edges };
+                this.opt = createOpt(o);
             });
-        }
+        },
     }
     
 }

src/views/WeiboDetails/weiboSpreadFission/opt.js

@@ -2,13 +2,23 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 19:32:39
- * @LastEditTime: 2021-10-14 19:40:03
+ * @LastEditTime: 2021-11-11 09:46:12
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/opt.js
  */
 export default function createOpt(data) {
-   return {
+  return {
+    tooltip: {
+      trigger: "item",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
     title: {
       show: false,
       text: 'NPM Dependencies'
@@ -25,17 +35,18 @@ export default function createOpt(data) {
             x: node.x,
             y: node.y,
             id: node.id,
-            name: node.label,
-            symbolSize: node.size,
+            name: node.name,
+            value: node.value,
+            symbolSize: node.symbolSize,
             itemStyle: {
               color: node.color
             }
           };
         }),
-        edges: data.edges.map(function (edge) {
+        links: data.edges.map(function (edge) {
           return {
-            source: edge.sourceID,
-            target: edge.targetID
+            source: edge.source,
+            target: edge.target
           };
         }),
         emphasis: {
@@ -45,8 +56,22 @@ export default function createOpt(data) {
             show: true
           }
         },
+        label: {
+          show: true,
+          color: '#fff',
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        scaleLimit: {
+          min: 0.4,
+          max: 2
+        },
         roam: true,
         lineStyle: {
+          color: 'source',
           width: 0.5,
           curveness: 0.3,
           opacity: 0.7