zx

src/components/v-echars/index.vue

@@ -35,6 +35,11 @@ export default {
                             this.myChart.setOption(val);
                         }
                         this.myChart.off('click');   //解绑点击事件
+                        // this.myChart.on('mouseover', (params) => {
+                        //     if(params.componentType === 'markPoint') {
+                        //         console.log('hover');
+                        //     }
+                        // })
                         this.myChart.on('click', (params) => {
                             if(params.componentSubType === 'bar') {
                                 let obj = {
@@ -51,12 +56,13 @@ export default {
                                 this.$emit("getData", o);
                             }
                             if(params.componentType === 'markPoint') {
+                                params.event.event.stopPropagation();
                                 let o = {
                                     key: params.data.name,
-                                    value: params.value,
-                                    mark: params.componentType 
+                                    offsetX: params.event.offsetX,
+                                    offsetY: params.event.offsetY,
                                 }
-                                this.$emit("getData", o);
+                                this.$emit("clickMark", o);
                             }
                         });
                         // this.myChart.off("click");

src/views/BrandInsight/titsopo/index.vue

@@ -15,7 +15,18 @@
         <div class="tit-inner">
             <vLabel-div title="舆情传播趋势"></vLabel-div>
             <div class="tit-bd">
-                <v-echarts :opt="opt"   @getData="clickEchars"></v-echarts>
+                <v-echarts :opt="opt" @clickMark="clickMark"  @getData="clickEchars"></v-echarts>
+            </div>
+        </div>
+        <div class="con-box">
+            <div id="gxid" @click.prevent="boxss"></div>
+            <div class="vshow" v-if="modelShow" :style="modelStyle">
+                <vLabel-div title="实时热点事件">
+                    <a-button @click="closeBox">关闭</a-button>
+                </vLabel-div>
+                <div class="vshow-item" v-for="(item, index) in urlArr" :key="index">
+                    <a class="vshow-link" :href="item.url" target="tar">{{item.title}}</a>
+                </div>
             </div>
         </div>
     </div>
@@ -23,6 +34,7 @@
 
 <script>
 import { getSourcetypeTime, getToPptTask } from "@/api/BrandInsight";
+import {doStr} from "@/utils/gol/dataTool"
 import moment from "moment";
 import createOpt from "./opt";
 export default {
@@ -30,6 +42,21 @@ export default {
     props: ["brand"],
     data() {
         return {
+            //弹出框//
+            modelStyle:{
+                left: '',
+                top: ''
+            },
+            modelShow: false,
+            ecbox:{//图表宽高
+                width:618,
+                height:490
+            },
+            ecmodel:{//弹框宽高
+                width:300,
+                height:280
+            },
+            //-*-//
             load: false,
             btnLoading: false,
             form: {
@@ -37,7 +64,8 @@ export default {
                 sBrand: "奥迪",
             },
             opt: {},
-            markPointUrl: ''
+            markPointUrl: '',
+            urlArr: []
         };
     },
     created() {
@@ -55,6 +83,7 @@ export default {
                 let dx = [];
                 let ds = [];
                 let hotTopArr = [];
+                let urlArr = [];
                 data.forEach((ele) => {
                     let time = ele.Time;
                     let value = ele.Data;
@@ -62,6 +91,13 @@ export default {
                     ds.push(value);
                     if(ele.hotTop[0]) {
                         this.markPointUrl = ele.hotTop[0].url;
+                        ele.hotTop.forEach((e) => {
+                            let urlObj = {
+                                title: doStr(e.title, 30),
+                                url: e.url
+                            };
+                            urlArr.push(urlObj);
+                        })
                     }
                     let obj = {
                         label: time,
@@ -69,6 +105,7 @@ export default {
                     }
                     hotTopArr.push(obj)
                 });
+                this.urlArr = urlArr
                 this.opt = createOpt(dx, ds, hotTopArr);
                 this.load = false;
             });
@@ -104,15 +141,30 @@ export default {
                 },
             });
         },
+        clickMark(data) {
+            this.modelShow = true;
+            let mw = window.event;
+            if((this.ecbox.width - mw.offsetX - 20) > this.ecmodel.width) {
+                this.modelStyle.left = mw.offsetX + 20 + "px"
+            } else {
+                this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px"
+            }
+            if((this.ecbox.height - mw.offsetY - 20) > this.ecmodel.height) {
+                this.modelStyle.top = mw.offsetY + "px"
+            } else {
+                this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px"
+            }
+        },
+        closeBox() {
+            this.modelShow = false;
+        },
+        boxss() {
+            this.modelShow = false;
+        },
         clickEchars(data) {
             if(!this.btnPrm('btn_brand_datalist')) {
                 return
             }
-            if(data.mark == 'markPoint'){
-                window.open(this.markPointUrl); 
-                console.log(this.markPointUrl);
-                return;
-            }
             let qudao = [];
             let startTime = "";
             let endTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
@@ -179,4 +231,35 @@ export default {
         }
     }
 }
+.pop-item {
+    padding: 8px;
+    color: white;
+}
+
+#gxid {
+  height: 100%;
+  width: 100%;
+}
+.con_box{
+  position: relative;
+  height: 600px;
+  width: 900px;
+  margin: 0 auto;
+}
+.vshow{
+  position: absolute;
+    width: 300px;
+    height: 280px;
+    background: rgb(3, 18, 36);
+    border: 4px solid #0f2a4d;
+    .vshow-item {
+        padding: 11px;
+        width: 100%;
+        font-size: 15px;
+        .vshow-link {
+            color: rgb(54, 189, 239);
+            width: 100%;
+        }
+    }
+}
 </style>

src/views/BrandInsight/titsopo/opt.js

@@ -10,7 +10,31 @@ import * as echarts from "echarts";
 import { bigNumberTransform } from "@/utils/gol/dataTool"
 import {doStr} from "@/utils/gol/dataTool"
 let colors = ['#546fc5', '#91cb74', '#f9c857', '#ed6565', '#72bfde', '#3aa272', '#fb8351'];
+let dataURI = 'path://M512 149.333333c200.298667 0 362.666667 162.368 362.666667 362.666667s-162.368 362.666667-362.666667 362.666667S149.333333 712.298667 149.333333 512 311.701333 149.333333 512 149.333333z m32 298.666667h-64v256h64V448z m0-106.666667h-64v64h64v-64z'
 function createData(ds = []) {
+    //--设定标记的位置和颜色--//
+    let maxIndex = 0;
+    let maxVal = 0;
+    let vi = 0;
+    ds.forEach(ele => {
+        let columnMax = 0;
+        ele.forEach(e => {
+            if(e.value * 1.0 >= columnMax) {columnMax = e.value * 1.0}
+        })
+        if(columnMax >= maxVal) {maxVal = columnMax, maxIndex = vi};
+        vi += 1;
+    })
+
+    let colorArr = ds[maxIndex];
+    let mcIndex = 0;
+    let colorIndex = 0;
+    let colorMax = colorArr[0].value * 1;
+    colorArr.forEach(ele => {
+        if(ele.value * 1 >= colorMax) {colorMax = ele.value * 1, mcIndex = colorIndex};
+        colorIndex += 1;
+    });
+    let markColor = colors[mcIndex]
+    //--//
     let arr = [];
     for (let i = 0; i < ds.length; i++) {
         let arr1 = ds[i];
@@ -42,8 +66,12 @@ function createData(ds = []) {
                     markPoint: {
                         data: [
                             {
-                                type: 'max', name: 'Max',symbol:'pin',
-                                label: '!'
+                                name: 'Max',
+                                xAxis: maxIndex, yAxis: maxVal,
+                                symbol: dataURI,
+                                symbolSize: 24,
+                                symbolOffset: [0, '-65%'],
+                                itemStyle: {color: markColor},
                             }
                         ],
                     }