From 96e39081c015d1c0f5b070df65411e4877cc16d5 Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Fri, 12 Nov 2021 10:18:02 +0800
Subject: [PATCH] =?UTF-8?q?zx-=E5=93=81=E7=89=8C=E5=AF=B9=E6=AF=94-?=
 =?UTF-8?q?=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../brandEventComparison/index.vue            |   5 +-
 .../brandEventComparison/opt.js               |  82 +++++--
 .../channelDistribution/index.vue             |   7 +-
 .../channelDistribution/opt.js                |  78 ++++++-
 .../informationTrend/index.vue                |   5 +-
 .../BrandComparison/informationTrend/opt.js   |  13 +-
 .../informationVolumeByChannel/index.vue      |   5 +-
 .../informationVolumeByChannel/opt.js         |  58 +++++
 .../keyMediaCommunicationComparison/index.vue |  20 +-
 .../keyMediaCommunicationComparison/opt.js    | 220 +++++++++++-------
 .../overallInformation/index.vue              | 110 +++++----
 .../overallNumberOfInteractions/index.vue     | 110 +++++----
 .../weiboBigVComparison/index.vue             |  17 +-
 .../weiboBigVComparison/opt.js                | 111 +++++++--
 .../keyMediaCommunicationComparison/opt.js    |   1 -
 15 files changed, 581 insertions(+), 261 deletions(-)

diff --git a/src/views/BrandComparison/brandEventComparison/index.vue b/src/views/BrandComparison/brandEventComparison/index.vue
index ff931d6..3696914 100644
--- a/src/views/BrandComparison/brandEventComparison/index.vue
+++ b/src/views/BrandComparison/brandEventComparison/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
 -->
 <template>
-  <div class="bec-outter">
+  <div class="bec-outter" v-loading="load">
     <v-label-div title="品牌事件对比"> </v-label-div>
     <div class="bec-inner">
       <v-echarts :opt="opt1"></v-echarts>
@@ -45,6 +45,7 @@ export default {
         token: "",
         sBrand: "",
       },
+      load: false,
       colors: [
         "#3373CC",
         "#63AECC",
@@ -123,6 +124,7 @@ export default {
     getData() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
         getSourcetypeC(obj)
           .then((res) => {
             let data = res.data || [];
@@ -138,6 +140,7 @@ export default {
               brandList.push(e.Name);
             });
             this.opt1 = createOpt(data,dx, brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
diff --git a/src/views/BrandComparison/brandEventComparison/opt.js b/src/views/BrandComparison/brandEventComparison/opt.js
index 5a1525a..6b8bf76 100644
--- a/src/views/BrandComparison/brandEventComparison/opt.js
+++ b/src/views/BrandComparison/brandEventComparison/opt.js
@@ -7,17 +7,63 @@
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
 
-/*series: [
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     {
-        name: '奥迪',
-        type: 'bar',
-        barGap: 0,
-        barWidth: 20,
-        emphasis: {
-            focus: 'series'
-        },
-        data: [320, 332, 301, 334, 390, 400]
-    },*/
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false)]
+
 function createData(dataList = [],dx = []) {
     let arr = [];
     dataList.forEach(ele => {
@@ -45,19 +91,23 @@ export default function createOpt(dataList = [],dx = [], brandList = []) {
     let info = createData(dataList,dx);
     return {
         grid: {
-            top: "56px",
-            left: "16px",
-            right: "28px",
-            bottom: "16px",
+            left: 10,
+            right: '5%',
+            bottom: 10,
+            top: 52,
             containLabel: true,
         },
+        color: colors,
         legend: {
             data: brandList,
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize: 10
             },
             y: 12,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         tooltip: {
             trigger: "axis",
diff --git a/src/views/BrandComparison/channelDistribution/index.vue b/src/views/BrandComparison/channelDistribution/index.vue
index f07ac43..f1f906d 100644
--- a/src/views/BrandComparison/channelDistribution/index.vue
+++ b/src/views/BrandComparison/channelDistribution/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
 -->
 <template>
-  <div class="cd-outter">
+  <div class="cd-outter" v-loading="load">
     <v-label-div title="渠道分布"> </v-label-div>
     <div class="cd-inner">
       <v-echarts :opt="opt"></v-echarts>
@@ -22,6 +22,7 @@ export default {
   name: "channelDistribution",
   data() {
     return {
+      load: false,
       form: {
         token: "",
         sBrand: "",
@@ -46,6 +47,7 @@ export default {
     getData() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
         getSourcetypeC(obj)
           .then((res) => {
             let data = res.data || [];
@@ -60,7 +62,8 @@ export default {
               }
               brandList.push(e.Name);
             });
-            this.opt = createOpt(data,dx, brandList);
+            this.opt = createOpt(data, dx, brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
diff --git a/src/views/BrandComparison/channelDistribution/opt.js b/src/views/BrandComparison/channelDistribution/opt.js
index da96d22..0c0fb41 100644
--- a/src/views/BrandComparison/channelDistribution/opt.js
+++ b/src/views/BrandComparison/channelDistribution/opt.js
@@ -7,7 +7,64 @@
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
 import { bigNumberTransform } from "@/utils/gol/dataTool"
-let colors = ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', "#CC5B41", '#452b74', '#71686f']
+
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false)]
+
 function createData(dataList = [],dx = []) {
     let arr = [];
     dataList.forEach(e => {
@@ -34,20 +91,27 @@ export default function createOpt(dataList = [],dx = [], brandList = []) {
     let info = createData(dataList,dx);
     return {
         grid: {
-            top: "56px",
-            left: "16px",
-            right: "28px",
-            bottom: "16px",
+            left: 10,
+            right: '5%',
+            bottom: 10,
+            top: 52,
+            // top: "56px",
+            // left: "16px",
+            // right: "28px",
+            // bottom: "16px",
             containLabel: true,
         },
         color: colors,
         legend: {
             data: brandList,
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize: 10
             },
             y: 12,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         tooltip: {
             trigger: "axis",
diff --git a/src/views/BrandComparison/informationTrend/index.vue b/src/views/BrandComparison/informationTrend/index.vue
index 46e6998..5d50128 100644
--- a/src/views/BrandComparison/informationTrend/index.vue
+++ b/src/views/BrandComparison/informationTrend/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
 -->
 <template>
-  <div class="it-outter">
+  <div class="it-outter" v-loading="load">
     <v-label-div title="信息量趋势"></v-label-div>
     <div class="it-inner">
       <v-echarts :opt="opt"></v-echarts>
@@ -22,6 +22,7 @@ export default {
   name: "informationTrend",
   data() {
     return {
+      load: false,
       form: {
         token: "",
         sBrand: "",
@@ -45,6 +46,7 @@ export default {
     },
     getData() {
       let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
       getCountTime0528C(obj).then((res) => {
          let data = res.data || [];
          let dx = [];
@@ -56,6 +58,7 @@ export default {
              ds.push(value);
          });
          this.opt = createOpt(dx, ds);
+         this.load = false;
       });
     },
   },
diff --git a/src/views/BrandComparison/informationTrend/opt.js b/src/views/BrandComparison/informationTrend/opt.js
index 1770030..e9d001b 100644
--- a/src/views/BrandComparison/informationTrend/opt.js
+++ b/src/views/BrandComparison/informationTrend/opt.js
@@ -39,9 +39,9 @@ export default function createOpt(dx = [], ds = []) {
     let data = createData(ds);
     return {
         grid: {
-            left: 16,
-            right: 26,
-            bottom: 16,
+            left: 10,
+            right: '5%',
+            bottom: 10,
             top: 52,
             containLabel: true
         },
@@ -58,10 +58,13 @@ export default function createOpt(dx = [], ds = []) {
         legend: {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize: 10
             },
             y: 12,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         xAxis: {
             type: 'category',
diff --git a/src/views/BrandComparison/informationVolumeByChannel/index.vue b/src/views/BrandComparison/informationVolumeByChannel/index.vue
index b31221b..8e2ae46 100644
--- a/src/views/BrandComparison/informationVolumeByChannel/index.vue
+++ b/src/views/BrandComparison/informationVolumeByChannel/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
 -->
 <template>
-  <div class="ivb-outter">
+  <div class="ivb-outter" v-loading="load">
     <v-label-div
       title="分渠道信息量"
       :showLine="false"
@@ -27,6 +27,7 @@ export default {
   data() {
     return {
       opt: {},
+      load: false,
       form: {
         token: "",
         sBrand: "",
@@ -50,6 +51,7 @@ export default {
     getData() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
         getSourcetypeC(obj)
           .then((res) => {
             let data = res.data || [];
@@ -65,6 +67,7 @@ export default {
               brandList.push(e.Name);
             });
             this.opt = createOpt(data, dx, brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
diff --git a/src/views/BrandComparison/informationVolumeByChannel/opt.js b/src/views/BrandComparison/informationVolumeByChannel/opt.js
index 5fe1b9f..fb5b279 100644
--- a/src/views/BrandComparison/informationVolumeByChannel/opt.js
+++ b/src/views/BrandComparison/informationVolumeByChannel/opt.js
@@ -7,6 +7,63 @@
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
 import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false)]
+
 function createData(dataList = [],dx = []) {
     let arr = [];
     dataList.forEach(e => {
@@ -40,6 +97,7 @@ export default function createOpt(dataList = [],dx = [], brandList = []) {
             bottom: "16px",
             containLabel: true,
         },
+        color: colors,
         legend: {
             data: brandList,
             textStyle: { //图例文字的样式
diff --git a/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue b/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
index a623991..6f81728 100644
--- a/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
+++ b/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
@@ -46,11 +46,23 @@ export default {
     },
     getData() {
       let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
       getSourceCount0528C(obj).then((res) => {
-         let data = res.data;
-         this.opt = createOpt(data);
-      })
-    }
+        let data = res.data;
+        let dx = [];
+        data.forEach((ele) => {
+          let ab = ele.value || [];
+          // 匹配所有出现过的媒体，放入dx中
+          ab.forEach((e) => {
+            if (!dx.includes(e.key)) {
+              dx.push(e.key);
+            }
+          });
+        });
+        this.opt = createOpt(dx, data);
+        this.load = false;
+      });
+    },
   },
 };
 </script>
diff --git a/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js b/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js
index 81cb128..73eccfe 100644
--- a/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js
+++ b/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js
@@ -6,31 +6,76 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-import { bigNumberTransform } from "@/utils/gol/dataTool"
-function createData(dataList = []) {
+import { bigNumberTransform } from "@/utils/gol/dataTool";
+import * as echarts from "echarts";
+
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#3373CC'
+  },
+  {
+      offset: 1,
+      color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#63AECC'
+  },
+  {
+      offset: 1,
+      color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#54BF93'
+  },
+  {
+      offset: 1,
+      color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#CC9D12'
+  },
+  {
+      offset: 1,
+      color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#CC7733'
+  },
+  {
+      offset: 1,
+      color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#CC5B41'
+  },
+  {
+      offset: 1,
+      color: '#071a32'
+  }
+], false)]
+
+function createData(dataList = [],dx) {
   let arr = [];
   dataList.forEach(ele => {
-    let valueArr = [0,0,0,0,0];
-    ele.value.forEach(e => {
-      switch (e.key) {
-        case "微信":
-          valueArr[0] = e.value;
-          break;
-        case "懂车帝":
-          valueArr[1] = e.value;
-          break;
-        case "今日头条":
-          valueArr[2] = e.value;
-          break;
-        case "抖音":
-          valueArr[3] = e.value;
-          break;
-        case "易车":
-          valueArr[4] = e.value;
-          break;
-        default:
-          break;
-      }
+    let a = [];
+    let Data = ele.value || [];
+    dx.forEach(e => {
+      Data.forEach(ex => {
+        if (ex.key === e) {
+          a.push(ex.value)
+        }
+      })
     })
     let o = {
       name: ele.key,
@@ -40,75 +85,82 @@ function createData(dataList = []) {
       emphasis: {
         focus: 'series'
       },
-      data: valueArr
+      data: a
     };
     arr.push(o);
   })
   return arr;
 }
 
-export default function createOpt(dataList = []) {
-    let info = createData(dataList);
-    return {
-        grid: {
-            left: 10,
-            right: '5%',
-            bottom: 10,
-            top: 56,
-            containLabel: true
-        },
-        tooltip: {
-            trigger: "axis",
-            backgroundColor: "#08182F",
-            color: "#fff",
-            borderColor: "#3373CC",
-            textStyle: {
-                color: "#fff", //设置文字颜色
-            },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
-        },
-        legend: {
-            textStyle: { //图例文字的样式
-                color: '#fff'
-            },
-            y: 10,
-            x: 16
+export default function createOpt(dx = [], dataList = []) {
+  let info = createData(dataList, dx);
+  return {
+    grid: {
+      left: 10,
+      right: '5%',
+      bottom: 10,
+      top: 52,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 12,
+      x: 16,
+      itemWidth: 12,
+      itemHeight: 12
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
         },
-        xAxis: {
-            type: 'category',
-            axisTick: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            data: ['微信', '懂车帝', '今日头条', '抖音', '易车']
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
         },
-        yAxis: {
-            type: 'value',
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            axisLabel: {
-              formatter: (value) => {
-                  let str = bigNumberTransform(value);
-                  return str;
-              }
-            },
-            splitLine: {
-                lineStyle: {
-                    type: "dashed", // y轴分割线类型
-                    color: "#012b4b",
-                },
-            },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          let str = bigNumberTransform(value);
+          return str;
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
         },
-        series: info
-    }
+      },
+    },
+    series: info
+  }
 
 }
\ No newline at end of file
diff --git a/src/views/BrandComparison/overallInformation/index.vue b/src/views/BrandComparison/overallInformation/index.vue
index fc93ee6..680c4fb 100644
--- a/src/views/BrandComparison/overallInformation/index.vue
+++ b/src/views/BrandComparison/overallInformation/index.vue
@@ -7,73 +7,71 @@
  * @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
 -->
 <template>
-    <div class="oi-outter">
-        <v-label-div title="整体信息量" ></v-label-div>
-        <div class="oi-inner">
-             <v-echarts :opt="opt"></v-echarts>
-        </div>
+  <div class="oi-outter" v-loading="load">
+    <v-label-div title="整体信息量"></v-label-div>
+    <div class="oi-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import {getContrastCount0528C} from "@/api/BrandComparison"
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getContrastCount0528C } from "@/api/BrandComparison";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "overallInformation",
-    data() {
-        return {
-            form: {
-                token: "",
-                sBrand: ""
-            },
-            opt: {}
-        }
+  name: "overallInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getBComparison;
+      let brands = [];
+      arr.forEach((ele) => {
+        brands.push(ele.name);
+      });
+      this.form.sBrand = brands.toString();
+      this.getData();
     },
-    created() {
-        this.initData();
-    },
-    methods: {
-        initData() {
-            this.form.token = this.getToken;
-            let arr = this.getBComparison;
-            let brands = [];
-            arr.forEach(ele => {
-                brands.push(ele.name)
-            });
-            this.form.sBrand = brands.toString();
-            this.getData();
-        },
-        getData() {
-            return new Promise((resolve, reject) => {
-            let obj = Object.assign({}, this.getCtime2, this.form);
-            getContrastCount0528C(obj).then((res) => {
-            let data = res.data || [];
-            let brandsList = [];
-            let infoList = [];
-            data.forEach(e => {
-                brandsList.push(e.key);
-                infoList.push(e.value);
-            })
-            this.opt = createSingleColumnar(brandsList, infoList);
-            resolve(data)
-            }).catch(() => {
-                reject(false)
-            });
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getContrastCount0528C(obj).then((res) => {
+        let data = res.data || [];
+        let brandsList = [];
+        let infoList = [];
+        data.forEach((e) => {
+          brandsList.push(e.key);
+          infoList.push(e.value);
         });
-        }
-    }
+        this.opt = createSingleColumnar(brandsList, infoList);
+        this.load = false;
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .oi-outter {
-    width: 618px;
-    height: 460px;
-    border: 2px solid #0f2a4d;
-    margin-left: 16px;
-    .oi-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .oi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>
diff --git a/src/views/BrandComparison/overallNumberOfInteractions/index.vue b/src/views/BrandComparison/overallNumberOfInteractions/index.vue
index 43b11fd..808f338 100644
--- a/src/views/BrandComparison/overallNumberOfInteractions/index.vue
+++ b/src/views/BrandComparison/overallNumberOfInteractions/index.vue
@@ -7,73 +7,71 @@
  * @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
 -->
 <template>
-    <div class="onoi-outter">
-        <v-label-div title="整体互动人数" ></v-label-div>
-        <div class="onoi-inner">
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
+  <div class="onoi-outter" v-loading="load">
+    <v-label-div title="整体互动人数"></v-label-div>
+    <div class="onoi-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import {getInteractCount0528C} from "@/api/BrandComparison"
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getInteractCount0528C } from "@/api/BrandComparison";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "overallInformation",
-    data() {
-        return {
-            form: {
-                token: "",
-                sBrand: ""
-            },
-            opt: {}
-        }
+  name: "overallInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getBComparison;
+      let brands = [];
+      arr.forEach((ele) => {
+        brands.push(ele.name);
+      });
+      this.form.sBrand = brands.toString();
+      this.getData();
     },
-    created() {
-        this.initData();
-    },
-    methods: {
-        initData() {
-            this.form.token = this.getToken;
-            let arr = this.getBComparison;
-            let brands = [];
-            arr.forEach(ele => {
-                brands.push(ele.name)
-            });
-            this.form.sBrand = brands.toString();
-            this.getData();
-        },
-        getData() {
-            return new Promise((resolve, reject) => {
-            let obj = Object.assign({}, this.getCtime2, this.form);
-            getInteractCount0528C(obj).then((res) => {
-            let data = res.data || [];
-            let brandsList = [];
-            let infoList = [];
-            data.forEach(e => {
-                brandsList.push(e.key);
-                infoList.push(e.value);
-            })
-            this.opt = createSingleColumnar(brandsList, infoList);
-            resolve(data)
-            }).catch(() => {
-                reject(false)
-            });
+    getData() {
+      this.load = true;
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getInteractCount0528C(obj).then((res) => {
+        let data = res.data || [];
+        let brandsList = [];
+        let infoList = [];
+        data.forEach((e) => {
+          brandsList.push(e.key);
+          infoList.push(e.value);
         });
-        }
-    }
+        this.opt = createSingleColumnar(brandsList, infoList);
+        this.load = false;
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .onoi-outter {
-    width: 618px;
-    height: 460px;
-    border: 2px solid #0f2a4d;
-    margin-left: 16px;
-    .onoi-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .onoi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>
diff --git a/src/views/BrandComparison/weiboBigVComparison/index.vue b/src/views/BrandComparison/weiboBigVComparison/index.vue
index f16b1f6..d28d693 100644
--- a/src/views/BrandComparison/weiboBigVComparison/index.vue
+++ b/src/views/BrandComparison/weiboBigVComparison/index.vue
@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
 -->
 <template>
-  <div class="wbc-outter">
+  <div class="wbc-outter" v-loading="load">
     <v-label-div
       title="微博大V对比"
       :showLine="false"
@@ -26,6 +26,7 @@ export default {
   name: "weiboBigVComparison",
   data() {
     return {
+      load: false,
       form: {
         token: "",
         sBrand: "",
@@ -50,10 +51,22 @@ export default {
     getData() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
         getBoauthen0528C(obj)
           .then((res) => {
             let data = res.data || [];
-            this.opt = createOpt(data);
+            let dx = [];
+            data.forEach((ele) => {
+            let ab = ele.value || [];
+            // 匹配所有出现过的媒体，放入dx中
+            ab.forEach((e) => {
+                if (!dx.includes(e.key) && e.value != 0) {
+                dx.push(e.key);
+                }
+            });
+            });
+            this.opt = createOpt(dx,data);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
diff --git a/src/views/BrandComparison/weiboBigVComparison/opt.js b/src/views/BrandComparison/weiboBigVComparison/opt.js
index 73914a7..b5faf00 100644
--- a/src/views/BrandComparison/weiboBigVComparison/opt.js
+++ b/src/views/BrandComparison/weiboBigVComparison/opt.js
@@ -6,22 +6,77 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-/*
-series: [
-            {
-              name: '奥迪',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [320, 302, 301, 334, 390]
-            },
-*/
-function createData(dataList = []) {
+
+import * as echarts from "echarts";
+
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#3373CC'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#63AECC'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#54BF93'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#CC9D12'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#CC7733'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#CC5B41'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false)]
+
+function createData(dataList = [], dx = []) {
   let arr = [];
   dataList.forEach(ele => {
+    let a = [];
+    let Data = ele.value || [];
+    dx.forEach(e => {
+      Data.forEach(ex => {
+        if (ex.key === e) {
+          a.push(ex.value)
+        }
+      })
+    })
     let o = {
       name: ele.key,
       type: 'bar',
@@ -30,22 +85,21 @@ function createData(dataList = []) {
       emphasis: {
         focus: 'series'
       },
-      //索引各类型大v的值，0表示名人，1表示政府，2表示企业，3表示媒体，4表示个人大V
-      data: [ele.value[0].value, ele.value[3].value, ele.value[2].value, ele.value[1].value, ele.value[4].value]
+      data: a
     };
     arr.push(o);
   })
   return arr;
 }
 
-export default function createOpt(dataList = []) {
-  let info = createData(dataList);
+export default function createOpt(dx = [], dataList = []) {
+  let info = createData(dataList, dx);
   return {
     grid: {
-      left: 16,
-      right: 16,
-      bottom: 16,
-      top: 56,
+      left: 10,
+      right: '5%',
+      bottom: 10,
+      top: 52,
       containLabel: true
     },
     tooltip: {
@@ -58,25 +112,32 @@ export default function createOpt(dataList = []) {
       },
       extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
     },
+    color: colors,
     legend: {
       textStyle: { //图例文字的样式
-        color: '#fff'
+        color: '#fff',
+        fontSize: 10
       },
       y: 10,
-      x: 16
+      x: 16,
+      itemWidth: 12,
+      itemHeight: 12
     },
     xAxis: {
       type: 'category',
       axisTick: {
         show: false,
       },
+      axisLabel: {
+        interval: 0
+      },
       axisLine: {
         show: false,
         lineStyle: {
           color: "#fff",
         },
       },
-      data: ['名人', '媒体', '企业', '政府', '个人大v']
+      data: dx
     },
     yAxis: {
       type: 'value',
diff --git a/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js b/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js
index 745aed8..65b19d8 100644
--- a/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js
+++ b/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js
@@ -103,7 +103,6 @@ function createData(dataList = [], dx=[]) {
 }
 export default function createOpt(dx = [], ds = []) {
   const data = createData(ds,dx);
-  console.log(data)
   return {
     grid: {
       left: 10,