From 79badfa1fa196d6afce53b5e0bd1115452f8370d Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Sat, 16 Oct 2021 10:29:26 +0800
Subject: [PATCH] cxw-010203

---
 package.json                                  |   1 +
 src/components/v-labelDiv/index.vue           |   8 +-
 src/components/v-tab-group/index.vue          |   3 +-
 src/lycomponents/iLayout/index.vue            |  17 +-
 src/main.js                                   |   5 +-
 src/utils/gol/ops.js                          |  47 ++++
 src/utils/gol/sideSingleColumn.js             |  83 ++++++
 .../brandCommunicationTOPMedia/index.vue      | 242 ++++++++++++++++++
 .../v-ranking-bcm/index.vue                   | 232 +++++++++++++++++
 .../brandEventComparison/index.vue            | 102 ++++++++
 .../brandEventComparison/opt.js               | 126 +++++++++
 .../channelDistribution/opt.js                |  14 +-
 .../index.vue                                 |  38 +++
 .../comparisonOfWeiboInformation/index.vue    |  39 +++
 src/views/BrandComparison/index.vue           |  35 ++-
 .../overallWordCloudComparison/index.vue      |  81 ++++++
 .../overallWordCloudComparison/opt.js         | 215 ++++++++++++++++
 src/views/BrandInsight/index.vue              |   8 +-
 yarn.lock                                     |   5 +
 19 files changed, 1276 insertions(+), 25 deletions(-)
 create mode 100644 src/utils/gol/ops.js
 create mode 100644 src/utils/gol/sideSingleColumn.js
 create mode 100644 src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
 create mode 100644 src/views/BrandComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue
 create mode 100644 src/views/BrandComparison/brandEventComparison/index.vue
 create mode 100644 src/views/BrandComparison/brandEventComparison/opt.js
 create mode 100644 src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
 create mode 100644 src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
 create mode 100644 src/views/BrandComparison/overallWordCloudComparison/index.vue
 create mode 100644 src/views/BrandComparison/overallWordCloudComparison/opt.js

diff --git a/package.json b/package.json
index 15ed11d..600bff7 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
     "vue-router": "^3.5.2",
+    "vuescroll": "^4.17.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
diff --git a/src/components/v-labelDiv/index.vue b/src/components/v-labelDiv/index.vue
index d680497..4a718a9 100644
--- a/src/components/v-labelDiv/index.vue
+++ b/src/components/v-labelDiv/index.vue
@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 16:01:05
- * @LastEditTime: 2021-10-12 11:11:51
+ * @LastEditTime: 2021-10-15 17:24:52
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-labelDiv/index.vue
 -->
 <template>
     <div class="v-label-container" ref="vlc" :style="eStyle">
-        <span ref="titleRef">{{title}}</span>
+        <span ref="titleRef" :style="{color: titleColor}">{{title}}</span>
         <div class="gx" v-if="showLine"></div>
         <div class="v-l-right">
             <slot></slot>
@@ -24,6 +24,10 @@ export default {
             type: String,
             default: ""
         },
+        titleColor: {
+            type: String,
+            default: '#fff'
+        },
         showLine: {
             type: Boolean,
             default: true
diff --git a/src/components/v-tab-group/index.vue b/src/components/v-tab-group/index.vue
index f892b11..3c80aa5 100644
--- a/src/components/v-tab-group/index.vue
+++ b/src/components/v-tab-group/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 19:06:37
- * @LastEditTime: 2021-10-08 19:21:19
+ * @LastEditTime: 2021-10-15 17:15:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-tab-group/index.vue
@@ -30,6 +30,7 @@ export default {
     methods: {
         handlerClick(n) {
             this.activeInex = n;
+            this.$emit('change', this.activeInex);
         }
     }
 }
diff --git a/src/lycomponents/iLayout/index.vue b/src/lycomponents/iLayout/index.vue
index 64e8bef..2cb90a1 100644
--- a/src/lycomponents/iLayout/index.vue
+++ b/src/lycomponents/iLayout/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-13 14:25:26
- * @LastEditTime: 2021-10-15 13:06:40
+ * @LastEditTime: 2021-10-16 09:56:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/lycomponents/iLayout/index.vue
@@ -9,17 +9,18 @@
 <template>
     <div class="layout-container">
         <iHeader></iHeader>
-        <div class="layout-body">
-          <router-view></router-view>
-        </div>
-       
+        <vue-scroll>
+            <div class="layout-body">
+                <router-view></router-view>
+            </div>
+        </vue-scroll>
     </div>
 </template>
 
 <script>
 export default {
-    name: "iLayout"
-}
+    name: "iLayout",
+};
 </script>
 <style lang="less" scoped>
 .layout-container {
@@ -28,7 +29,7 @@ export default {
     margin: 0 auto;
     height: 100%;
     min-height: 800px;
-    background: #010B19;
+    background: #010b19;
     border-top: 1px solid transparent;
     margin-top: -1px;
 }
diff --git a/src/main.js b/src/main.js
index 67d4d51..4685525 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 08:41:57
- * @LastEditTime: 2021-10-15 12:15:08
+ * @LastEditTime: 2021-10-16 09:50:21
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/main.js
@@ -18,11 +18,14 @@ import dataV from '@jiaminghi/data-view';
 import selfUi from "@/components/index.js";
 import compon from "@/lycomponents/index.js";
 import mixins from "@/mixins"
+import vuescroll from 'vuescroll'
+import ops from '@/utils/gol/ops';
 Vue.use(Antd);
 Vue.use(dataV);
 Vue.use(selfUi);
 Vue.use(compon);
 Vue.use(mixins);
+Vue.use(vuescroll, {ops: ops,name: 'vue-scroll'});
 Vue.config.productionTip = false
 Vue.prototype.$vuiSize = 'small'
 new Vue({
diff --git a/src/utils/gol/ops.js b/src/utils/gol/ops.js
new file mode 100644
index 0000000..1e3fca3
--- /dev/null
+++ b/src/utils/gol/ops.js
@@ -0,0 +1,47 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-16 09:48:35
+ * @LastEditTime: 2021-10-16 09:48:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/utils/gol/ops.js
+ */
+export default {
+    vuescroll: {
+        mode: "native",  //模式:pc natice 移动端是slice
+        sizeStrategy: "percent",  //父元素是否是固定的是就percent 不是就是number 填一个数值
+        detectResize: true,  //内容是否根据页面调整
+    },
+    scrollPanel: {
+        initialScrollY: false,  //初始化距离顶部的位置
+        initialScrollX: false,  //初始化距离左侧的位置
+        scrollingX: true,  // 是否开启横向滚动
+        scrollingY: true,  //是否开启竖向滚动
+        speed: 300,       //多长时间内完成一次滚动。 数值越小滚动的速度越快。
+        easing: 'easeInQuad', //默认动画
+        verticalNativeBarPos: "right",
+        maxHeight: undefined,  //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应，超出的话出现滚动条。
+        maxWidth: undefined,   //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应，超出的话出现滚动条。
+    },
+    rail: {
+        background: "#000000", //轨道的背景色。
+        opacity: 0,            //轨道的透明度。 0是透明，1是不透明
+        size: "6px",             //轨道的尺寸。
+        specifyBorderRadius: false, //是否指定轨道的 borderRadius， 如果不那么将会自动设置。
+        gutterOfEnds: null,
+        gutterOfSide: "0px",      //距离容器的距离
+        keepShow: false,          //是否即使 bar 不存在的情况下也保持显示。
+    },
+    bar: {
+        showDelay: 500,             //在鼠标离开容器后多长时间隐藏滚动条。
+        onlyShowBarOnScroll: true,  //是否只在滚动时显示 bar。
+        keepShow: false,            //滚动条是否保持显示。
+        background: "#bebfbe",      //滚动条背景色。
+        opacity: 1,                 //滚动条透明度。
+        hoverStyle: false,
+        specifyBorderRadius: false,  //是否指定滚动条的 borderRadius， 如果不那么和轨道的保持一致。
+        minSize: false,              //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
+        size: "6px",                 //bar 的尺寸。
+        disable: false,              //是否禁用滚动条。
+    },
+}
\ No newline at end of file
diff --git a/src/utils/gol/sideSingleColumn.js b/src/utils/gol/sideSingleColumn.js
new file mode 100644
index 0000000..f333363
--- /dev/null
+++ b/src/utils/gol/sideSingleColumn.js
@@ -0,0 +1,83 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 17:52:59
+ * @LastEditTime: 2021-10-15 18:14:33
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/utils/gol/sideSingleColumn.js
+ */
+
+
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 12:38:34
+ * @LastEditTime: 2021-10-12 19:13:40
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
+ */
+import * as echarts from "echarts";
+export function createSideSingleColumn(dx=[], ds=[], color='#51bc91') {
+    return {
+        grid: {
+            left: 16,
+            right: 16,
+            bottom: 16,
+            top: 0,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: dx,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+        },
+        series: [
+            {
+                name: '2011',
+                type: 'bar',
+                barWidth: 24,
+                data: ds,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                    offset: 0,
+                    color: '#010B19'
+                }, {
+                    offset: 1,
+                    color: color
+                }]),
+            }
+        ]
+    }
+}
diff --git a/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue b/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
new file mode 100644
index 0000000..7b0710c
--- /dev/null
+++ b/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
@@ -0,0 +1,242 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-10-15 16:52:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter">
+        <v-label-div title="品牌传播TOP媒体">
+        </v-label-div>
+        <div class="bcm-inner">
+            <div class="bcm-item" v-for="(item,index) in list" :key="index">
+                <span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
+                <v-ranking-bcm  v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import vRankingBcm from "./v-ranking-bcm"
+export default {
+    name: "brandCommunicationTOPMedia",
+    components: {
+       vRankingBcm 
+    },
+    data() {
+        return {
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+            list: [
+                {
+                    name: '奥迪',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                {
+                    name: '宝马',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                {
+                    name: '奔驰',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                 {
+                    name: '吉利',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                 {
+                    name: '大众',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                {
+                    name: '别克',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bcm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .bcm-item {
+            width: 282px;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue b/src/views/BrandComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue
new file mode 100644
index 0000000..3760c07
--- /dev/null
+++ b/src/views/BrandComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue
@@ -0,0 +1,232 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-10-15 16:51:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">传播量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-bcm",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 281px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 14px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 40px;
+    margin-top: 14px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 30px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      display: flex;
+      justify-content: flex-start;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+          margin-left: 10px;
+      }
+  }
+  .v-r-left {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 40px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/BrandComparison/brandEventComparison/index.vue b/src/views/BrandComparison/brandEventComparison/index.vue
new file mode 100644
index 0000000..3006677
--- /dev/null
+++ b/src/views/BrandComparison/brandEventComparison/index.vue
@@ -0,0 +1,102 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 17:33:28
+ * @LastEditTime: 2021-10-15 18:25:51
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
+-->
+<template>
+    <div class="bec-outter">
+        <v-label-div title="品牌事件对比">
+        </v-label-div>
+        <div class="bec-inner">
+            <v-echarts :opt="opt1"></v-echarts> 
+        </div>
+        <v-label-div title="事件上榜车型" :showLine="false" :eStyle="{'border-style': 'none'}">
+         </v-label-div>
+         <div class="bec-one">
+             <div class="bec-one-item" v-for="(item,index) in list" :key="index">
+                 <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                 <div class="d1">
+                     <v-echarts :opt="item.drawOpt"></v-echarts> 
+                 </div>
+             </div>
+         </div>
+    </div>
+</template>
+
+<script>
+import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+import createOpt from "./opt"
+export default {
+    name: "brandEventComparison",
+    data() {
+        return {
+          opt1: createOpt(),
+          colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+          list: [
+              {
+                  name: '奥迪',
+                  drawOpt: createSideSingleColumn(['A4', 'A3','Q5','A7','A6'], [400, 500, 600, 800, 1000], '#3373CC'),
+              },
+              {
+                  name: '宝马',
+                  drawOpt: createSideSingleColumn(['520', '220','S4','525','320'], [400, 500, 600, 800, 1000], '#63AECC'),
+              },
+              {
+                  name: '奔驰',
+                  drawOpt: createSideSingleColumn(['GML', '350','S600','SEL','300'], [400, 500, 600, 800, 1000], '#54BF93'),
+              },
+              {
+                  name: '吉利',
+                  drawOpt: createSideSingleColumn(['330', '吉利星','星耀','星月','帝豪'], [400, 500, 600, 800, 1000], '#CC9D12'),
+              },
+              {
+                  name: '大众',
+                  drawOpt: createSideSingleColumn(['途观', '速腾','迈腾','桑塔纳','帕萨特'], [400, 500, 600, 800, 1000], '#CC7733'),
+              },
+              {
+                  name: '别克',
+                  drawOpt: createSideSingleColumn(['凯悦', '奥克拉','君悦','君越','君威'], [400, 500, 600, 800, 1000], '#CC5B41'),
+              }
+          ]
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.bec-outter {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bec-inner {
+        width: 100%;
+        height: 412px;
+    }
+    .bec-one {
+        width: 100%;
+        height: 412px;
+        display: flex;
+        justify-content: flex-start;
+        .bec-one-item {
+            width: 314px;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color:#fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/brandEventComparison/opt.js b/src/views/BrandComparison/brandEventComparison/opt.js
new file mode 100644
index 0000000..949390c
--- /dev/null
+++ b/src/views/BrandComparison/brandEventComparison/opt.js
@@ -0,0 +1,126 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-10-15 17:43:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            top: "56px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        legend: {
+            data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#fff",
+                    },
+                },
+                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#FFF",
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: "dashed", // y轴分割线类型
+                        color: "#012b4b",
+                    },
+                },
+            }
+        ],
+        series: [
+            {
+                name: '奥迪',
+                type: 'bar',
+                barGap: 0,
+                barWidth: 20,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 400]
+            },
+            {
+                name: '宝马',
+                type: 'bar',
+                barWidth: 20,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 300]
+            },
+            {
+                name: '奔驰',
+                type: 'bar',
+                barWidth: 20,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [150, 232, 201, 154, 190, 200]
+            },
+            {
+                name: '吉利',
+                type: 'bar',
+                barWidth: 20,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [98, 77, 101, 99, 40, 44]
+            },
+            {
+                name: '大众',
+                type: 'bar',
+                barWidth: 20,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [198, 177, 101, 199, 140, 145]
+            },
+            {
+                name: '别克',
+                type: 'bar',
+                barWidth: 20,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [298, 277, 201, 299, 240, 250]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/BrandComparison/channelDistribution/opt.js b/src/views/BrandComparison/channelDistribution/opt.js
index 1837bb8..5cb74e0 100644
--- a/src/views/BrandComparison/channelDistribution/opt.js
+++ b/src/views/BrandComparison/channelDistribution/opt.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-15 15:15:27
- * @LastEditTime: 2021-10-15 15:31:49
+ * @LastEditTime: 2021-10-15 17:44:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
@@ -70,7 +70,7 @@ export default function createOpt() {
                 name: '奥迪',
                 type: 'bar',
                 barGap: 0,
-
+                barWidth: 16,
                 emphasis: {
                     focus: 'series'
                 },
@@ -79,7 +79,7 @@ export default function createOpt() {
             {
                 name: '宝马',
                 type: 'bar',
-
+                barWidth: 16,
                 emphasis: {
                     focus: 'series'
                 },
@@ -88,7 +88,7 @@ export default function createOpt() {
             {
                 name: '奔驰',
                 type: 'bar',
-
+                barWidth: 16,
                 emphasis: {
                     focus: 'series'
                 },
@@ -97,7 +97,7 @@ export default function createOpt() {
             {
                 name: '吉利',
                 type: 'bar',
-
+                barWidth: 16,
                 emphasis: {
                     focus: 'series'
                 },
@@ -106,7 +106,7 @@ export default function createOpt() {
             {
                 name: '大众',
                 type: 'bar',
-
+                barWidth: 16,
                 emphasis: {
                     focus: 'series'
                 },
@@ -115,7 +115,7 @@ export default function createOpt() {
             {
                 name: '别克',
                 type: 'bar',
-
+                barWidth: 16,
                 emphasis: {
                     focus: 'series'
                 },
diff --git a/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue b/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
new file mode 100644
index 0000000..d7f419d
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:22:21
+ * @LastEditTime: 2021-10-16 10:28:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
+-->
+<template>
+    <div class="cotn-outter">
+        <v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <div class="cotn-inner">
+            <v-echarts :opt="opt"></v-echarts> 
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "comparisonOfTheNumberOfWeiboInteractions",
+    data() {
+        return {
+           opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'],'#45a380')
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.cotn-outter {
+    width: 628px;
+    height: 412px;
+    .cotn-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue b/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
new file mode 100644
index 0000000..81b5813
--- /dev/null
+++ b/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:01:52
+ * @LastEditTime: 2021-10-16 10:20:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
+-->
+<template>
+    <div class="cowi-outter">
+       <v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+       <div class="cowi-inner">
+           <v-echarts :opt="opt"></v-echarts> 
+       </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "comparisonOfWeiboInformation",
+    data() {
+        return {
+           opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'])
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.cowi-outter {
+    width: 628px;
+    height: 412px;
+    .cowi-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/index.vue b/src/views/BrandComparison/index.vue
index 3676091..c6e6d4b 100644
--- a/src/views/BrandComparison/index.vue
+++ b/src/views/BrandComparison/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 10:39:43
- * @LastEditTime: 2021-10-15 15:36:07
+ * @LastEditTime: 2021-10-16 10:27:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/index.vue
@@ -36,6 +36,16 @@
                 <channelDistribution></channelDistribution>
                 <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
             </div>
+            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
+            <overallWordCloudComparison></overallWordCloudComparison>
+            <brandEventComparison></brandEventComparison>
+            <div class="bc-d4">
+                <v-label-div title="品牌微博对比"></v-label-div>
+                <div class="bc-d4-d1">
+                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
+                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
+                </div>
+            </div>
         </div>
          <iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
     </div>
@@ -48,6 +58,11 @@ import overallNumberOfInteractions from "./overallNumberOfInteractions"
 import brandTonalDistribution from "./brandTonalDistribution"
 import channelDistribution from "./channelDistribution"
 import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison"
+import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia"
+import overallWordCloudComparison from "./overallWordCloudComparison"
+import brandEventComparison from "./brandEventComparison"
+import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation"
+import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions"
 export default {
     name: "brandComparison",
     components: {
@@ -56,7 +71,12 @@ export default {
         overallNumberOfInteractions, // 整体互动人数
         brandTonalDistribution, // 品牌调性分布
         channelDistribution, // 渠道分布
-        keyMediaCommunicationComparison // 重点媒体传播对比
+        keyMediaCommunicationComparison, // 重点媒体传播对比
+        brandCommunicationTOPMedia, // 品牌传播TOP媒体
+        overallWordCloudComparison, // 整体词云对比
+        brandEventComparison, //品牌事件对比
+        comparisonOfWeiboInformation, // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractions // 微博互动人数对比
     },
     data() {
         return {
@@ -174,4 +194,15 @@ export default {
     justify-content: flex-start;
     margin-top: 16px;
 }
+.bc-d4 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d4-d1 {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
 </style>
diff --git a/src/views/BrandComparison/overallWordCloudComparison/index.vue b/src/views/BrandComparison/overallWordCloudComparison/index.vue
new file mode 100644
index 0000000..d96ff8f
--- /dev/null
+++ b/src/views/BrandComparison/overallWordCloudComparison/index.vue
@@ -0,0 +1,81 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 16:56:32
+ * @LastEditTime: 2021-10-15 17:31:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
+-->
+<template>
+    <div class="owcc-outter">
+        <v-label-div title="整体词云对比">
+        </v-label-div>
+        <div class="owcc-inner">
+            <div class="owcc-item" v-for="(item,index) in list" :key="index">
+                <v-label-div :title="item.name" :titleColor="colors[index]" :showLine="false" :eStyle="{'border-style': 'none'}">
+                    <v-tab-group :btns="['正面', '负面']"></v-tab-group>
+                </v-label-div>
+                <div class="owcc-draw">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt";
+export default {
+    name: "overallWordCloudComparison",
+    data() {
+        return {
+            opt: createOpt(),
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+            list: [
+                {
+                    name: "奥迪",
+                },
+                {
+                    name: "宝马",
+                },
+                {
+                    name: "奔驰",
+                },
+                {
+                    name: "吉利",
+                },
+                {
+                    name: "大众",
+                },
+                {
+                    name: "别克",
+                },
+            ],
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.owcc-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .owcc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .owcc-item {
+            width: 314px;
+            height: 412px;
+            margin-top: 5px;
+            .owcc-draw {
+                width: 100%;
+                height: calc(100% - 48px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/BrandComparison/overallWordCloudComparison/opt.js b/src/views/BrandComparison/overallWordCloudComparison/opt.js
new file mode 100644
index 0000000..296dcc1
--- /dev/null
+++ b/src/views/BrandComparison/overallWordCloudComparison/opt.js
@@ -0,0 +1,215 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 13:35:13
+ * @LastEditTime: 2021-10-15 17:23:18
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ */
+// import * as echarts from "echarts";
+const dataBJ = [
+    [1, 55, 9, 56, 0.46, 18, 6, '良'],
+    [2, 25, 11, 21, 0.65, 34, 9, '优'],
+    [3, 56, 7, 63, 0.3, 14, 5, '良'],
+    [4, 33, 7, 29, 0.33, 16, 6, '优'],
+    [5, 42, 24, 44, 0.76, 40, 16, '优'],
+    [6, 82, 58, 90, 1.77, 68, 33, '良'],
+    [7, 74, 49, 77, 1.46, 48, 27, '良'],
+    [8, 78, 55, 80, 1.29, 59, 29, '良'],
+    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
+    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
+    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
+    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
+    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
+    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
+    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
+    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
+    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
+    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
+    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
+    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
+    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
+    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
+    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
+    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
+    // [25, 42, 27, 43, 1, 53, 22, '优'],
+    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
+    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
+    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
+    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
+    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
+    // [31, 46, 5, 49, 0.28, 10, 6, '优']
+  ];
+  const dataGZ = [
+    [1, 26, 37, 27, 1.163, 27, 13, '优'],
+    [2, 85, 62, 71, 1.195, 60, 8, '良'],
+    [3, 78, 38, 74, 1.363, 37, 7, '良'],
+    [4, 21, 21, 36, 0.634, 40, 9, '优'],
+    [5, 41, 42, 46, 0.915, 81, 13, '优'],
+    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
+    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
+    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
+    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
+    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
+    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
+    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
+    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
+    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
+    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
+    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
+    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
+    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
+    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
+    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
+    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
+    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
+    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
+    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
+    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
+    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
+    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
+    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
+    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
+    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
+    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
+  ];
+  const dataSH = [
+    [1, 91, 45, 125, 0.82, 34, 23, '良'],
+    [2, 65, 27, 78, 0.86, 45, 29, '良'],
+    [3, 83, 60, 84, 1.09, 73, 27, '良'],
+    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [8, 89, 65, 78, 0.86, 51, 26, '良'],
+    // [9, 53, 33, 47, 0.64, 50, 17, '良'],
+    // [10, 80, 55, 80, 1.01, 75, 24, '良'],
+    // [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
+    // [12, 99, 71, 142, 1.1, 62, 42, '良'],
+    // [13, 95, 69, 130, 1.28, 74, 50, '良'],
+    // [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
+    // [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
+    // [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
+    // [17, 79, 43, 107, 1.05, 59, 37, '良'],
+    // [18, 71, 46, 89, 0.86, 64, 25, '良'],
+    // [19, 97, 71, 113, 1.17, 88, 31, '良'],
+    // [20, 84, 57, 91, 0.85, 55, 31, '良'],
+    // [21, 87, 63, 101, 0.9, 56, 41, '良'],
+    // [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
+    // [23, 87, 62, 100, 1, 72, 28, '良'],
+    // [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
+    // [25, 65, 45, 51, 0.74, 39, 17, '良'],
+    // [26, 39, 24, 38, 0.61, 47, 17, '优'],
+    // [27, 39, 24, 39, 0.59, 50, 19, '优'],
+    // [28, 93, 68, 96, 1.05, 79, 29, '良'],
+    // [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
+    // [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
+    // [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
+  ];
+//   const schema = [
+//     { name: 'date', index: 0, text: '日' },
+//     { name: 'AQIindex', index: 1, text: 'AQI指数' },
+//     { name: 'PM25', index: 2, text: 'PM2.5' },
+//     { name: 'PM10', index: 3, text: 'PM10' },
+//     { name: 'CO', index: 4, text: '一氧化碳（CO）' },
+//     { name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
+//     { name: 'SO2', index: 6, text: '二氧化硫（SO2）' }
+//   ];
+  const itemStyle = {
+    opacity: 0.8,
+    shadowBlur: 10,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    shadowColor: 'rgba(0,0,0,0.3)'
+  };
+export default function createOpt() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: { 
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function(param) {
+                let value = param.value;
+                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+            }
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            }
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            },
+            scale: true
+        },
+        series: [{
+            name: '北京',
+            data: dataBJ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }, {
+            name: '上海',
+            data: dataSH,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        },
+        {
+            name: '广州',
+            data: dataGZ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF", 
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }
+        ]
+    }
+}
diff --git a/src/views/BrandInsight/index.vue b/src/views/BrandInsight/index.vue
index 929eb0e..24a46d3 100644
--- a/src/views/BrandInsight/index.vue
+++ b/src/views/BrandInsight/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-11 17:59:49
- * @LastEditTime: 2021-10-15 10:52:22
+ * @LastEditTime: 2021-10-15 17:22:49
  * @LastEditors: Please set LastEditors
  * @Description: 品牌洞察
  * @FilePath: /data-show/src/views/BrandInsight/index.vue
@@ -81,9 +81,9 @@ import weiboVolumeTrend from "./weiboVolumeTrend";
 import forumCommunicationTrend from "./forumCommunicationTrend";
 import forumHotTopicDirection from "./forumHotTopicDirection";
 import spreadTOPmodels from "./spreadTOPmodels";
-import rearWingPropagationSituation from "./rearWingPropagationSituation"
-import keyMedia from "./keyMedia"
-import popularwordCloud from "./popularwordCloud"
+import rearWingPropagationSituation from "./rearWingPropagationSituation";
+import keyMedia from "./keyMedia";
+import popularwordCloud from "./popularwordCloud";
 export default {
     name: "BrandInsight",
     components: {
diff --git a/yarn.lock b/yarn.lock
index d9cd727..c004b55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8601,6 +8601,11 @@ vue@^2.6.11:
   resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
 
+vuescroll@^4.17.3:
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/vuescroll/-/vuescroll-4.17.3.tgz#e1c29372a007e0dff0cee6b4515783d43924f9e1"
+  integrity sha512-5P3hje/fYjo1eAB0Y8zboLbaq/mnPNczYyZ1aPHHM6wIFKcqal9Mi42CBCZizUnEtoXtbsGlnyLcVbnalTNptA==
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"