zx

package.json

@@ -14,7 +14,7 @@
     "axios": "^0.23.0",
     "compression-webpack-plugin": "^9.0.0",
     "core-js": "^3.6.5",
-    "echarts": "^5.2.1",
+    "echarts": "^5.2.2",
     "echarts-wordcloud": "^2.0.0",
     "js-cookie": "^3.0.1",
     "less": "^4.1.2",

src/components/v-echars/index.vue

@@ -34,7 +34,24 @@ export default {
                             this.myChart.clear();
                             this.myChart.setOption(val);
                         }
-                        this.myChart.off("click");
+                        this.myChart.on('click', (params) => {
+                            console.log(params);
+                            if(params.componentSubType === 'bar') {
+                                let obj = {
+                                    axisValueLabel: params.name,
+                                    value: params.data
+                                }
+                                this.$emit("getData", obj);
+                            };
+                            if(params.componentSubType === 'sankey') {
+                                let o = {
+                                    key: params.data.name || params.data.source,
+                                    value: params.value 
+                                }
+                                this.$emit("getData", o);
+                            }
+                        })
+                        // this.myChart.off("click");
                         // 给图像加点击事件
                         this.myChart.getZr().on("click", (params) => {
                             //param.name x轴值,param.data y轴值
@@ -54,8 +71,10 @@ export default {
                                 let obj =
                                     this.myChart._componentsViews[1]
                                         ._cbParamsList;
-                                console.log(handleIndex, obj);
-                                this.$emit("getData", obj);
+                                let ex = obj[0]
+                                if(ex && ex.componentSubType === 'line') {
+                                    this.$emit("getData", obj);
+                                }
                             }
                         });
                         // 将鼠标变成小手

src/utils/gol/bubbleWord.js

@@ -2,7 +2,7 @@ require("./echarts-wordcloud");
 
 let maskImage = new Image();
 maskImage.src = require('@/assets/images/carRound.png');
-let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
+// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
 // 将后台数据转成数组
 function doWordCloud(data) {
     let arr1 = [];

src/views/EventInsight/hotEventPO/index.vue

@@ -12,7 +12,7 @@
             <v-btn @click="goPath">事件对比</v-btn>
         </v-label-div>
         <div class="hpo-inner">
-            <v-echarts :opt="opt"></v-echarts>
+            <v-echarts @getData="clickEchars" :opt="opt"></v-echarts>
         </div>
     </div>
 </template>
@@ -50,6 +50,11 @@ export default {
                 this.opt = createOpt(d1, d2);
                 this.load = false;
             })
+        },
+        //点击事件
+        clickEchars(data) {
+            let ele = data;
+            console.log(ele);
         }
     }
 };

src/views/EventInsight/index.vue

@@ -9,19 +9,19 @@
 <template>
     <div class="d-container">
         <div class="ei-outter">
-            <hotEventPO></hotEventPO>
+            <!-- <hotEventPO></hotEventPO> -->
             <industryTOPHE></industryTOPHE>
         </div>
     </div>
 </template>
 
 <script>
-import hotEventPO from "./hotEventPO"
+// import hotEventPO from "./hotEventPO"
 import industryTOPHE from "./industryTOPHE"
 export default {
     name: "eventInsight",
     components: {
-        hotEventPO, // 热点事件传播导向
+        // hotEventPO, // 热点事件传播导向
         industryTOPHE // 行业TOP热点事件
     },
     created() {

src/views/EventInsight/industryTOPHE/index.vue

@@ -8,40 +8,60 @@
 -->
 
 <template>
-    <div class="itp-outter" v-loading="load">
+    <div>
+    <div class="hpo-outter" v-loading="loadTop">
+        <v-label-div title="热点事件传播导向">
+            <v-btn @click="goPath">事件对比</v-btn>
+        </v-label-div>
+        <div class="hpo-inner">
+            <v-echarts @getData="clickEchars" :opt="opt"></v-echarts>
+        </div>
+    </div>
+    <div class="itp-outter" v-loading="loadBtm">
         <v-label-div title="行业TOP热点事件">
+            <v-btn @click="goRefresh">重置</v-btn>
         </v-label-div>
         <div class="itp-inner">
             <dv-scroll-board :config="config" :style="{ width: '100%', height: '100%' }" @click="handlerSs" />
         </div>
 
     </div>
+
+    </div>
 </template>
 
 <script>
 import { getHotEventsList } from "@/api/EventInsight";
+import {getPropagationDirection0528} from "@/api/EventInsight"
+import createOpt from "./opt"
 export default {
     name: "industryTOPHE",
     data() {
         return {
-            load: false,
+            loadTop: false,
+            loadBtm: false,
             form: {
                 token: "",
+                sQudao: "",
+                sSeriesName: ""
             },
             config: {},
             list: [],
+            opt: createOpt()
         };
     },
     created() {
         this.form.token = this.getToken;
         this.getData();
+        this.getDataList();
     },
     methods: {
+        //- 事件列表 -//
         goDetails() {
             this.$router.push({ path: "/eventDEC" });
         },
-        getData() {
-            this.load = true;
+        getDataList() {
+            this.loadBtm = true;
             let obj = Object.assign({}, this.getCtime2, this.form);
             getHotEventsList(obj).then((res) => {
                 let data = res.data || [];
@@ -65,7 +85,7 @@ export default {
                     header: ["事件标题", "影响力", "类型", "关联品牌"],
                     data: arr,
                 };
-                this.load = false;
+                this.loadBtm = false;
             });
         },
         handlerSs(obj) {
@@ -73,11 +93,53 @@ export default {
           let row = this.list[rowIndex];
           this.$router.push({path: '/eventDEC', query: {events_id: row.events_id}})
         },
+        goPath() {
+            this.$router.push({path: '/eventComparison'})
+        },
+        goRefresh() {
+            this.form.sQudao = "";
+            this.form.sSeriesName = "";
+            this.getDataList();
+        },
+        //- 桑基图 -//
+        // 获取后台数据
+        getData() {
+            this.loadTop = true;
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getPropagationDirection0528(obj).then(res => {
+                let data = res.data;
+                let d1 = data.data;
+                let d2 = data.links;
+                this.opt = createOpt(d1, d2);
+                this.loadTop = false;
+            })
+        },
+        //点击事件
+        clickEchars(data) {
+            let ele = data.key; //获取字段
+            if(ele == "新车上市" || ele == "车展") {
+                this.form.sQudao = ele;
+                this.form.sSeriesName = "";
+            } else {
+                this.form.sQudao = "";
+                this.form.sSeriesName = ele;
+            }
+            this.getDataList();
+        }
     },
 };
 </script>
 
 <style lang="less" scoped>
+.hpo-outter {
+    width: 100%;
+    height: 560px;
+    border: 2px solid #0f2a4d;
+    .hpo-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
 .itp-outter {
     width: 100%;
     height: 392px;

src/views/EventInsight/industryTOPHE/opt.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-13 09:09:51
+ * @LastEditTime: 2021-10-27 17:32:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/opt.js
+ */
+// const citylist = [
+//     {name: '领导人'},
+//     {name: '自然'},
+//     {name: '明星代言人'},
+//     {name: '车展'},
+//     {name: '新车上市'},
+//     {name: '新闻'},
+//     {name: '论坛'},
+//     {name: '微博'},
+//     {name: 'APP'},
+//     {name: '短视频'},
+//     {name: '吉利'},
+//     {name: '奔驰'},
+//     {name: '宝马'},
+//     {name: '特斯拉'},
+//     {name: '奥迪'},
+//     {name: '女车主表态'},
+//     {name: '广州车展'},
+//     {name: '销量大增'},
+// ];
+// const population=[
+//     {source: "领导人", target: "APP", value: 2000},
+//     {source: "APP", target: "宝马", value: 3000},
+//     //
+//     {source: "明星代言人", target: "论坛", value: 1000},
+//     //
+//     {source: "自然", target: "论坛", value: 2100},
+//     {source: "论坛", target: "宝马", value: 3100},
+//     {source: "宝马", target: "广州车展", value: 5100},
+//     //
+//     {source: "自然", target: "新闻", value: 3234},
+//     {source: "新闻", target: "吉利", value: 3000},
+//     {source: "吉利", target: "销量大增", value: 6000},
+//     // 
+//     {source: "车展", target: "微博", value: 1234},
+//     {source: "微博", target: "特斯拉", value: 3234},
+//     {source: "特斯拉", target: "销量大增", value: 4234},
+//     // 
+//     {source: "新车上市", target: "APP", value: 1234},
+//     {source: "APP", target: "宝马", value: 1234},
+//     //
+//     {source: "新车上市", target: "短视频", value: 2234},
+//     {source: "短视频", target: "奔驰", value: 2234},
+//     {source: "奔驰", target: "广州车展", value: 2234},
+//     //
+//     {source: "APP", target: "奥迪", value: 2234},
+//     {source: "奥迪", target: "销量大增", value: 2234},
+//     //
+//     {source: "奔驰", target: "女车主表态", value: 5234},
+// ];
+export default function createOpt(citylist=[],population=[]) {
+    return {
+        tooltip: {
+            trigger: "item",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            triggerOn: 'mousemove',
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        series: [
+            {
+                 type: 'sankey',
+                 data: citylist,
+                 links: population,
+                 focusNodeAdjacency: 'allEdges',    //鼠标悬停到节点或边上，相邻接的节点和边高亮显示
+                 left: 16,
+                 right: 120,
+                 top: 16,
+                 bottom: 16,
+                 itemStyle: {
+                     borderWidth: 1,
+                 },
+                 lineStyle: {
+                     color: 'target',
+                     curveness: 0.5,
+                     opacity:0.5
+                 },
+                 label: {
+                     color: "#fff",
+                     fontWeight: 'bold',
+                     fontSize: 10
+                 }
+             }
+         ]
+    }
+}

src/views/Index/salesRank/index.vue

@@ -118,7 +118,7 @@ export default {
                 this.ModalText = "您还未登录，是否前往登录";
                 return;
             }
-            let ele = data[0];
+            let ele = data;
             if (this.type === 1) {
                 let model = ele.axisValueLabel;
                 getBrandOrSeriesLevel({

src/views/Index/spreadTheSound/index.vue

@@ -95,7 +95,7 @@ export default {
             //     this.ModalText = "账号权限不足";
             //     return;
             // }
-            let ele = data[0];
+            let ele = data;
             if (this.type === 1) {
                 let model = ele.axisValueLabel;
                 let obj = {

src/views/Index/tailInsight/index.vue

@@ -92,7 +92,7 @@ export default {
                 this.ModalText = "您还未登录，是否前往登录";
                 return;
             }
-            let ele = data[0];
+            let ele = data;
             if (this.type === 1) {
                 let model = ele.axisValueLabel;
                 let obj = {