cxw-010203

src/views/BrandInsight/titsopo/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 09:32:35
- * @LastEditTime: 2021-12-03 18:50:01
+ * @LastEditTime: 2021-12-29 17:11:53
  * @LastEditors: Please set LastEditors
  * @Description: 舆情传播趋势
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
@@ -53,13 +53,20 @@ export default {
                 let data = res.data || [];
                 let dx = [];
                 let ds = [];
+                let hotTopArr = [];
                 data.forEach((ele) => {
                     let time = ele.Time;
                     let value = ele.Data;
                     dx.push(time);
                     ds.push(value);
+                    let obj = {
+                        label: time,
+                        hotTop: ele.hotTop
+                    }
+                    hotTopArr.push(obj)
                 });
-                this.opt = createOpt(dx, ds);
+                console.log(hotTopArr)
+                this.opt = createOpt(dx, ds, hotTopArr);
                 this.load = false;
             });
         },

src/views/BrandInsight/titsopo/opt.js

@@ -1,13 +1,14 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:11:24
- * @LastEditTime: 2021-11-19 19:48:17
+ * @LastEditTime: 2021-12-29 17:08:53
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
  */
 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'];
 function createData(ds = []) {
     let arr = [];
@@ -47,7 +48,7 @@ function createData(ds = []) {
     }
     return arr;
 }
-export default function createOpt(dx = [], ds = []) {
+export default function createOpt(dx = [], ds = [], hotTopArr=[]) {
     let data = createData(ds)
     return {
         grid: {
@@ -65,7 +66,18 @@ export default function createOpt(dx = [], ds = []) {
             textStyle: {
                 color: "#fff", //设置文字颜色
             },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;width: 200px",
+            formatter: function(param) {
+                let htmlStr = `<div>${param[0].name}</div>`;
+                let hotTop = hotTopArr.find(ele => param[0].name === ele.label).hotTop;
+                hotTop.forEach(e => { 
+                    htmlStr += `<div style="width: 200px">热门：${doStr(e.title, 18)}</div>` 
+                })
+                for(let i = 0; i < param.length; i++) {
+                    htmlStr += `<div style="display: flex;justify-content: space-between;"><span>${param[i].marker}${param[i].seriesName} </span><span>${param[i].value}</span></div>`
+                }
+                return htmlStr
+            }
         },
         legend: {
             icon: 'roundRect',

src/views/Index/dynamicNumber/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-09 14:25:05
- * @LastEditTime: 2021-12-29 15:09:10
+ * @LastEditTime: 2021-12-29 16:59:19
  * @LastEditors: Please set LastEditors
  * @Description: 大数据统计gif
  * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
@@ -304,6 +304,7 @@ export default {
     align-items: center;
     padding: 0px 13px;
     .df-d {
+        width: 33.3333%;
         span {
             display: inline-block;
         }