zx

src/lycomponents/iHeaderBrand/index.vue

@@ -24,13 +24,13 @@
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
 
-            <a-select :default-value="1" :size="$vuiSize" class="selHead" v-model="form.sTimeType" @change="handleChange" v-if="timeShow">
+            <a-select :size="$vuiSize" class="selHead" v-model="form.sTimeType" @change="handleChange" v-if="timeShow">
                 <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                     {{ item.value }}
                 </a-select-option>
             </a-select>
 
-            <a-range-picker show-time :disabled-date="disabledDate" style="margin-left: 0.5rem"  :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" v-if="form.sTimeType == selVal && timeShow" @ok="handlerChangeTime">
+            <a-range-picker v-model="timeRange" show-time :disabled-date="disabledDate" style="margin-left: 0.5rem"  :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" v-if="form.sTimeType == selVal && timeShow" @ok="handlerChangeTime">
                 <a-icon slot="suffixIcon" type="calendar" />
             </a-range-picker>
 
@@ -84,6 +84,8 @@ export default {
                 sStartTime: "",
                 sEndTime: "",
             },
+            timeRange: [],
+            sTimeType: "",
             selDatas: [],
             //offsetDays: 86400000 * 30, //最多选择7天
             timeShow: true
@@ -107,6 +109,12 @@ export default {
             this.selTime = [this.form.sStartTime, this.form.sEndTime]
         }
         this.getSelect();
+        if(this.getCtime2.sTimeType) {
+            this.form.sTimeType = this.getCtime2.sTimeType;
+            if(this.getCtime2.sTimeType == 4) {
+                this.timeRange = [this.getCtime2.sStartTime, this.getCtime2.sEndTime]
+            }
+        }
     },
     mounted() {
         this.intDt = self.setInterval(() => {
@@ -173,6 +181,7 @@ export default {
                 obj.key === "eventInsight"
             ) {
                 this.setHeaderType(3);
+
             } else {
                 this.setHeaderType(1);
             }

src/lycomponents/iSwitchEvent/index.vue

@@ -75,7 +75,7 @@ export default {
     height: auto;
     background: #010b19;
     .ec-footer {
-        padding: 40px 0px;
+        padding: 10px 0px;
        img {
            width: 480px;
            height: 80px;
@@ -84,7 +84,7 @@ export default {
 }
 .ec-d1 {
     width: 100%;
-    height: 190px;
+    height: 222px;
     border: 2px solid #0f2a4d;
     .ec-d1-inner {
         width: 100%;

src/utils/gol/bubbleWord.js

@@ -1,188 +1,74 @@
-/*
+require("./bubbleWord/echarts-wordcloud");
- * @Author: your name
+
- * @Date: 2021-10-21 11:36:36
+let maskImage = new Image();
- * @LastEditTime: 2021-11-25 11:07:14
+maskImage.src = require('@/assets/images/carRound.png')
- * @LastEditors: Please set LastEditors
+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)']
- * @Description: In User Settings Edit
+
- * @FilePath: /data-show/src/utils/gol/bubbleWord.js
- */
-import { compare } from "./dataTool"
-import * as echarts from "echarts";
 // 将后台数据转成数组
 function doWordCloud(data) {
     let arr1 = [];
     for (let key in data) {
-        let obj = { key: key, value: data[key] };
+        let obj = { name: key, value: data[key] };
         arr1.push(obj);
     }
     return arr1;
 }
-// 气泡大小算法
+//创建词云
-function bubbleDivide(val, maxVal, size) {
+export default function createWordCloud(data) {
-    let percent = val / maxVal * 1.00;
+    let showData = null;
-    if (0.15<percent<=0.25) {
+    if (Array.isArray(data)) {
-        return size * 1.5;
+        let words = [];
-    } else if (0.25<percent<=0.35) {
+        data.forEach(e => {
-        return size * 2.7;
+            let o = {
-    } else if (0.35<percent<=0.45) {
+                name: e.key,
-        return size * 3.6;
+                value: e.value
-    } else if (0.45<percent<=0.52) {
+            }
-        return size * 4.3;
+            words.push(o)
-    } else if (0.52<percent<=0.58) {
+        })
-        return size * 4.9;
+        showData = words;
-    } else if (0.58<percent<=0.66) {
-        return size * 5.4;
-    } else if (0.66<percent<=0.80) {
-        return size * 5.8;
-    } else if (0.80<percent<=0.90) {
-        return size * 6.1;
-    } else if (0.90<percent<=1.00) {
-        return size * 6.3;
-    } else {
-        return size * 1.0;
-    }
-} 
-// 创建词云的对象
-function bubbleChart(data = [], format = []) {
-    let [maxValue, temp] = [0, []];
-    data.forEach((item) => {
-        temp.push(item[format[1]]);
-    });
-    maxValue = Math.max.apply(null, temp);
-    // 气泡颜色数组
-    let color = [
-        {
-            key: '#047ddc',
-            fontColor: '#8ec0ea',
-            value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                    offset: 0,
-                    color: 'rgba(4, 60, 135, 1)'
-                },
-                {
-                    offset: 1,
-                    color: 'rgba(1, 11, 25, 1)'
-                }
-            ], false)
-        },
-        {
-            key: '#a3951f',
-            fontColor: '#a4a27f',
-            value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                    offset: 0,
-                    color: 'rgba(120, 124, 14, 1)'
-                },
-                {
-                    offset: 1,
-                    color: 'rgba(1, 11, 25, 1)'
-                }
-            ], false)
-        },
-        {
-            key: '#01aa87',
-            fontColor: '#99e5d5',
-            value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                    offset: 0,
-                    color: 'rgba(25, 137, 129, 1)'
-                },
-                {
-                    offset: 1,
-                    color: 'rgba(1, 11, 25, 1)'
-                }
-            ], false)
-        }
-          
-    ];
-    // 气泡颜色备份
-    let bakeColor = [...color];
-    // 气泡数据
-    let bubbleData = [];
-    let basicSize = 20; //基础大小
-    let repulsion = 90; //斥力因子
-    // 填充气泡数据数组bubbleData
-    for (let item of data) {
-        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
-        if (!bakeColor.length) bakeColor = [...color];
-        let colorSet = new Set(bakeColor);
-        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
-        let borderColor = bakeColor[curIndex].key;
-        let curColor = bakeColor[curIndex].value;
-        let fontColor = bakeColor[curIndex].fontColor;
-        colorSet.delete(curColor);
-        bakeColor = [...colorSet];
-        // 气泡大小设置
-        //let size = (item[format[1]] * basicSize * 2) / maxValue;
-        let size = bubbleDivide(item[format[1]],maxValue,basicSize);
-
-        bubbleData.push({
-            name: item[format[0]],
-            value: item[format[1]],
-            symbolSize: size,
-            draggable: true,
-            label: {
-                show: true,
-                color: fontColor,
-                fontSize: 12
-            },
-            itemStyle: {
-                normal: {
-                    color: curColor,
-                    opacity: 0.8,
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowOffsetY: 0,
-                    shadowColor: "rgba(0,0,0,0.3)",
-                    borderType : 'solid',
-                    borderColor: borderColor,
-                    borderWidth: 1
-                },
-            },
-        });
-    }
-    return {
-        bubbleData,
-        repulsion,
-    };
-}
-
-// 创建词云图
-export default function createWordCloud(obj) {
-    let bubble = null;
-    if (Array.isArray(obj)) {
-        bubble = bubbleChart(obj, ['key', 'value']);
     } else {
-        let words = doWordCloud(obj);
+        let words = doWordCloud(data);
-        words.sort(compare('value'));
+        showData = words;
-        bubble = bubbleChart(words, ['key', 'value']);
     }
     return {
-        animationEasingUpdate: 'bounceIn',
+        tooltip: {},
-        tooltip: {
+        series: [{
-            backgroundColor: "#08182F",
+            type: 'wordCloud',
-            color: "#fff",
+            gridSize: 5,
-            borderColor: "#3373CC",
+            sizeRange: [8, 60],
+            rotationRange: [0, 0],
+            //shape: 'circle',
+            maskImage: maskImage,
+            width: 600,
+            height: 390,
+            left: 'center',
+            top: 'center',
+            right: null,
+            bottom: null,
+            drawOutOfBound: true,
             textStyle: {
-                color: "#fff", //设置文字颜色
+                fontFamily: 'sans-serif',
+                fontWeight: 'bold',
+                color: function () {
+                    return colors[Math.floor((Math.random() * 8) + 0)];
+                    // return 'rgb(' + [
+                    //     Math.round(Math.random() * 255),
+                    //     Math.round(Math.random() * 255),
+                    //     Math.round(Math.random() * 255)
+                    // ].join(',') + ')';
+                }
             },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            emphasis: {
-            formatter: function (param) {
+                textStyle: {
-                let data = param.data;
+                    shadowBlur: 100,
-                return `<span>${data.name}</span><br><span>${data.value}</span>`
+                    shadowColor: '#333'
-            }
+                }
-        },
-        series: [{
-            type: 'graph',
-            layout: 'force',
-            force: {
-                gravity: 0.2,
-                repulsion: bubble.repulsion,
-                edgeLength: 10
             },
-            // 是否开启鼠标缩放和平移漫游
+            data: showData
-            roam: true,
+            //     {
-            data: bubble.bubbleData
+            //         name: 'Sam S Club',
+            //         value: 10000,
+            //     }
         }]
     }
 }

src/utils/gol/bubbleWord/index.js

@@ -0,0 +1,61 @@
+
+require("./echarts-wordcloud");
+
+// 将后台数据转成数组
+function doWordCloud(data) {
+    let arr1 = [];
+    for (let key in data) {
+        let obj = { name: key, value: data[key] };
+        arr1.push(obj);
+    }
+    return arr1;
+}
+//创建词云
+export default function createWordCloud(data) {
+    let showData = null;
+    if (Array.isArray(data)) {
+        showData = data;
+    } else {
+        let words = doWordCloud(data);
+        showData = words;
+    }
+    return {
+        tooltip: {},
+        series: [{
+            type: 'wordCloud',
+            gridSize: 12,
+            sizeRange: [10, 52],
+            rotationRange: [0, 0],
+            shape: 'circle',
+            width: 400,
+            height: 400,
+            left: 'center',
+            top: 'center',
+            right: null,
+            bottom: null,
+            drawOutOfBound: true,
+            textStyle: {
+                fontFamily: 'sans-serif',
+                fontWeight: 'bold',
+                color: function () {
+                    return 'rgb(' + [
+                        Math.round(Math.random() * 255),
+                        Math.round(Math.random() * 255),
+                        Math.round(Math.random() * 255)
+                    ].join(',') + ')';
+                }
+            },
+            emphasis: {
+                textStyle: {
+                    shadowBlur: 100,
+                    shadowColor: '#333'
+                }
+            },
+            data: showData
+            //     {
+            //         name: 'Sam S Club',
+            //         value: 10000,
+            //     }
+        }]
+    }
+}

src/utils/gol/wordCloudOld.js

@@ -0,0 +1,188 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-21 11:36:36
+ * @LastEditTime: 2021-11-25 11:07:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * 
+ */
+import { compare } from "./dataTool"
+import * as echarts from "echarts";
+// 将后台数据转成数组
+function doWordCloud(data) {
+    let arr1 = [];
+    for (let key in data) {
+        let obj = { key: key, value: data[key] };
+        arr1.push(obj);
+    }
+    return arr1;
+}
+// 气泡大小算法
+function bubbleDivide(val, maxVal, size) {
+    let percent = val / maxVal * 1.00;
+    if (0.15<percent<=0.25) {
+        return size * 1.5;
+    } else if (0.25<percent<=0.35) {
+        return size * 2.7;
+    } else if (0.35<percent<=0.45) {
+        return size * 3.6;
+    } else if (0.45<percent<=0.52) {
+        return size * 4.3;
+    } else if (0.52<percent<=0.58) {
+        return size * 4.9;
+    } else if (0.58<percent<=0.66) {
+        return size * 5.4;
+    } else if (0.66<percent<=0.80) {
+        return size * 5.8;
+    } else if (0.80<percent<=0.90) {
+        return size * 6.1;
+    } else if (0.90<percent<=1.00) {
+        return size * 6.3;
+    } else {
+        return size * 1.0;
+    }
+} 
+// 创建词云的对象
+function bubbleChart(data = [], format = []) {
+    let [maxValue, temp] = [0, []];
+    data.forEach((item) => {
+        temp.push(item[format[1]]);
+    });
+    maxValue = Math.max.apply(null, temp);
+    // 气泡颜色数组
+    let color = [
+        {
+            key: '#047ddc',
+            fontColor: '#8ec0ea',
+            value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                    offset: 0,
+                    color: 'rgba(4, 60, 135, 1)'
+                },
+                {
+                    offset: 1,
+                    color: 'rgba(1, 11, 25, 1)'
+                }
+            ], false)
+        },
+        {
+            key: '#a3951f',
+            fontColor: '#a4a27f',
+            value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                    offset: 0,
+                    color: 'rgba(120, 124, 14, 1)'
+                },
+                {
+                    offset: 1,
+                    color: 'rgba(1, 11, 25, 1)'
+                }
+            ], false)
+        },
+        {
+            key: '#01aa87',
+            fontColor: '#99e5d5',
+            value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                    offset: 0,
+                    color: 'rgba(25, 137, 129, 1)'
+                },
+                {
+                    offset: 1,
+                    color: 'rgba(1, 11, 25, 1)'
+                }
+            ], false)
+        }
+          
+    ];
+    // 气泡颜色备份
+    let bakeColor = [...color];
+    // 气泡数据
+    let bubbleData = [];
+    let basicSize = 20; //基础大小
+    let repulsion = 90; //斥力因子
+    // 填充气泡数据数组bubbleData
+    for (let item of data) {
+        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
+        if (!bakeColor.length) bakeColor = [...color];
+        let colorSet = new Set(bakeColor);
+        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
+        let borderColor = bakeColor[curIndex].key;
+        let curColor = bakeColor[curIndex].value;
+        let fontColor = bakeColor[curIndex].fontColor;
+        colorSet.delete(curColor);
+        bakeColor = [...colorSet];
+        // 气泡大小设置
+        //let size = (item[format[1]] * basicSize * 2) / maxValue;
+        let size = bubbleDivide(item[format[1]],maxValue,basicSize);
+
+        bubbleData.push({
+            name: item[format[0]],
+            value: item[format[1]],
+            symbolSize: size,
+            draggable: true,
+            label: {
+                show: true,
+                color: fontColor,
+                fontSize: 12
+            },
+            itemStyle: {
+                normal: {
+                    color: curColor,
+                    opacity: 0.8,
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0,
+                    shadowColor: "rgba(0,0,0,0.3)",
+                    borderType : 'solid',
+                    borderColor: borderColor,
+                    borderWidth: 1
+                },
+            },
+        });
+    }
+    return {
+        bubbleData,
+        repulsion,
+    };
+}
+
+// 创建词云图
+export default function createWordCloud(obj) {
+    let bubble = null;
+    if (Array.isArray(obj)) {
+        bubble = bubbleChart(obj, ['key', 'value']);
+    } else {
+        let words = doWordCloud(obj);
+        words.sort(compare('value'));
+        bubble = bubbleChart(words, ['key', 'value']);
+    }
+    return {
+        animationEasingUpdate: 'bounceIn',
+        tooltip: {
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (param) {
+                let data = param.data;
+                return `<span>${data.name}</span><br><span>${data.value}</span>`
+            }
+        },
+        series: [{
+            type: 'graph',
+            layout: 'force',
+            force: {
+                gravity: 0.2,
+                repulsion: bubble.repulsion,
+                edgeLength: 10
+            },
+            // 是否开启鼠标缩放和平移漫游
+            roam: true,
+            data: bubble.bubbleData
+        }]
+    }
+} 

src/views/EventDEC/mediaInterpretationEc/opt.js

@@ -4,7 +4,7 @@
  * @LastEditTime: 2021-10-29 21:30:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/utils/gol/bubbleWord.js
+ * 
  */
 import {compare} from "./dataTool"
  // 将后台数据转成数组

src/views/EventDEC/pnwcWord/opt.js

@@ -4,7 +4,7 @@
  * @LastEditTime: 2021-10-29 21:30:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/utils/gol/bubbleWord.js
+ * 
  */
 import {compare} from "./dataTool"
  // 将后台数据转成数组

src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue

@@ -67,7 +67,7 @@ export default {
 <style lang="less" scoped>
 .bsrt-outter {
     width: 936px;
-    height: 480px;
+    height: 408px;
     border: 2px solid #0f2a4d;
     margin-left: 16px;
     .bsrt-inner {

src/views/MarketingAnalysis/brandVolumeTOP10/index.vue

@@ -71,7 +71,7 @@ export default {
 <style lang="less" scoped>
 .bvt-outter {
     width: 100%;
-    height: 472px;
+    height: 396px;
     border: 2px solid #0f2a4d;
     .bvt-inner {
         width: 100%;

src/views/MarketingAnalysis/keyActiveMediaTOP10Ranking/index.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="less" scoped>
 .kamt-outter {
     width: 936px;
-    height: 480px;
+    height: 408px;
     border: 2px solid #0f2a4d;
     .kamt-inner {
         width: 100%;