From be90d56127c9b8baa938a4ba78ecd0ae9bdae8ca Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Thu, 11 Nov 2021 14:50:41 +0800
Subject: [PATCH] cxw-010203

---
 .../ModelComparison/BrandBeginComparte.vue    |   6 +-
 src/views/ModelComparison/BrandComparison.vue |   6 +-
 .../brandCommunicationTOPMedia/index.vue      |  18 ++-
 .../v-ranking-bcm/index.vue                   |   4 +-
 .../brandCompateHeader/index.vue              |   6 +-
 .../brandTonalDistribution/index.vue          |  20 ++-
 .../channelDistribution/index.vue             |  16 +-
 .../channelDistribution/opt.js                |  78 ++++++++--
 .../informationTrend/index.vue                |  16 +-
 .../ModelComparison/informationTrend/opt.js   |  15 +-
 .../informationVolumeByChannel/index.vue      |   5 +-
 .../keyMediaCommunicationComparison/index.vue | 104 +++++++------
 .../keyMediaCommunicationComparison/opt.js    | 141 +++++++++---------
 .../overallInformation/index.vue              |  18 ++-
 .../overallNumberOfInteractions/index.vue     |  20 ++-
 15 files changed, 304 insertions(+), 169 deletions(-)

diff --git a/src/views/ModelComparison/BrandBeginComparte.vue b/src/views/ModelComparison/BrandBeginComparte.vue
index 3e35d89..1a57a5c 100644
--- a/src/views/ModelComparison/BrandBeginComparte.vue
+++ b/src/views/ModelComparison/BrandBeginComparte.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 17:12:47
- * @LastEditTime: 2021-11-09 18:24:47
+ * @LastEditTime: 2021-11-11 11:14:45
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Editiv
  * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
@@ -54,6 +54,10 @@ export default {
         // 选择默认的车型
         handlerModel(row) {
             for(let i = 0; i < this.chooseArr.length; i++) {
+               let ele = this.chooseArr[i];
+               if(ele && ele.seriesname === row.seriesname) {
+                   return;
+               }
                 if(!this.chooseArr[i]) {
                     this.chooseArr[i] = row;
                     let obj = this.$refs.modelRef.list[i]
diff --git a/src/views/ModelComparison/BrandComparison.vue b/src/views/ModelComparison/BrandComparison.vue
index dc4f3c5..cecfaab 100644
--- a/src/views/ModelComparison/BrandComparison.vue
+++ b/src/views/ModelComparison/BrandComparison.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:49:05
- * @LastEditTime: 2021-11-11 10:46:12
+ * @LastEditTime: 2021-11-11 14:41:37
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@@ -101,10 +101,10 @@ export default {
         informationTrend, // 信息量趋势
         overallInformation, // 整体信息量
         overallNumberOfInteractions, // 整体互动人数
-        brandTonalDistribution, // 品牌调性分布
+        brandTonalDistribution, // 车型调性分布
         channelDistribution, // 渠道分布
         keyMediaCommunicationComparison, // 重点媒体传播对比
-        brandCommunicationTOPMedia, // 品牌传播TOP媒体
+        brandCommunicationTOPMedia, // 车型传播TOP媒体
         overallWordCloudComparison, // 整体词云对比
         brandEventComparison, //品牌事件对比
         comparisonOfWeiboInformation, // 微博信息量对比
diff --git a/src/views/ModelComparison/brandCommunicationTOPMedia/index.vue b/src/views/ModelComparison/brandCommunicationTOPMedia/index.vue
index 422d204..c65ce39 100644
--- a/src/views/ModelComparison/brandCommunicationTOPMedia/index.vue
+++ b/src/views/ModelComparison/brandCommunicationTOPMedia/index.vue
@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 15:58:57
- * @LastEditTime: 2021-10-15 16:52:25
+ * @LastEditTime: 2021-11-11 14:45:50
  * @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-outter" v-loading="load">
+    <v-label-div title="车型传播TOP媒体"> </v-label-div>
     <div class="bcm-inner">
       <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
         <span class="ss1" :style="{ color: colors[index] }">{{
@@ -35,6 +35,7 @@ export default {
   },
   data() {
     return {
+      load: false,
       colors: [
         "#3373CC",
         "#63AECC",
@@ -46,6 +47,8 @@ export default {
       form: {
         token: "",
         sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
       },
       arrList:[],
     };
@@ -56,17 +59,21 @@ export default {
   methods: {
     initData() {
       this.form.token = this.getToken;
-      let arr = this.getBComparison;
+      let arr = this.getMComparison;
       let brands = [];
+      let models = [];
       arr.forEach((ele) => {
-        brands.push(ele.name);
+        brands.push(ele.brand);
+        models.push(ele.model);
       });
       this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
       this.getData();
     },
     getData() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
         getSourceTopCount0528C(obj)
           .then((res) => {
             let data = res.data || [];
@@ -76,6 +83,7 @@ export default {
                 }
             });
             this.arrList = data;
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
diff --git a/src/views/ModelComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue b/src/views/ModelComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue
index 3760c07..8e1de1a 100644
--- a/src/views/ModelComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue
+++ b/src/views/ModelComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 16:44:08
- * @LastEditTime: 2021-10-15 16:51:59
+ * @LastEditTime: 2021-11-11 14:45:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-ranking/index.vue
@@ -136,7 +136,7 @@ export default {
     text-align: center;
     line-height: 40px;
     .s1 {
-      color: #ffffff;
+      color: #8e98a4;
       font-size: 16px;
       line-height: 40px;
       font-family: Bebas;
diff --git a/src/views/ModelComparison/brandCompateHeader/index.vue b/src/views/ModelComparison/brandCompateHeader/index.vue
index b08d498..5e32435 100644
--- a/src/views/ModelComparison/brandCompateHeader/index.vue
+++ b/src/views/ModelComparison/brandCompateHeader/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 11:54:08
- * @LastEditTime: 2021-11-09 18:23:31
+ * @LastEditTime: 2021-11-11 11:22:08
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
@@ -150,7 +150,9 @@ export default {
         },
         // 获取切换车型的数据
         handlerBrand(arr) {
-            let row = this.list[this.chooseIndex];
+           let n = this.list.findIndex(ele => ele.model === arr[1].name);
+           if(n != -1) return;
+           let row = this.list[this.chooseIndex];
             row.brand = arr[0].brandname;
             row.model = arr[1].name;
             row.isDel = true;
diff --git a/src/views/ModelComparison/brandTonalDistribution/index.vue b/src/views/ModelComparison/brandTonalDistribution/index.vue
index 2f02495..95dddb2 100644
--- a/src/views/ModelComparison/brandTonalDistribution/index.vue
+++ b/src/views/ModelComparison/brandTonalDistribution/index.vue
@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 13:27:50
- * @LastEditTime: 2021-10-15 14:30:30
+ * @LastEditTime: 2021-11-11 14:25:06
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
 -->
 <template>
-  <div class="bd-outter">
-    <v-label-div title="品牌调性分布"> </v-label-div>
+  <div class="bd-outter" v-loading="load">
+    <v-label-div title="车型调性分布"> </v-label-div>
     <div class="bd-d1">
       <div class="dd1" style="margin-left: 16px">
         <span class="s1"></span><span class="s2">正面</span>
@@ -28,7 +28,7 @@
         :key="index"
         :title="item.Name"
         :color="colors[index]"
-        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
         :data="item.Data"
       ></roundata>
     </div>
@@ -45,9 +45,12 @@ export default {
   },
   data() {
     return {
+      load: false,
       form: {
         token: "",
         sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
       },
       colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
       list: [
@@ -61,21 +64,26 @@ export default {
   methods: {
     initData() {
       this.form.token = this.getToken;
-      let arr = this.getBComparison;
+      let arr = this.getMComparison;
       let brands = [];
+      let models = [];
       arr.forEach(ele => {
-         brands.push(ele.name)
+         brands.push(ele.brand);
+         models.push(ele.model);
       });
       this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
       this.getData();
     },
     //
     getData() {
       return new Promise((resolve, reject) => {
+        this.load = true;
         let obj = Object.assign({}, this.getCtime2, this.form);
         getAffectionsC(obj).then((res) => {
           let data = res.data || [];
           this.list = data;
+          this.load = false;
           resolve(data)
         }).catch(() => {
             reject(false)
diff --git a/src/views/ModelComparison/channelDistribution/index.vue b/src/views/ModelComparison/channelDistribution/index.vue
index 420281c..1ed791e 100644
--- a/src/views/ModelComparison/channelDistribution/index.vue
+++ b/src/views/ModelComparison/channelDistribution/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 15:08:13
- * @LastEditTime: 2021-10-15 15:18:32
+ * @LastEditTime: 2021-11-11 14:25:23
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @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,9 +22,12 @@ export default {
   name: "channelDistribution",
   data() {
     return {
+      load: false,
       form: {
         token: "",
         sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
       },
       opt: {},
     };
@@ -35,17 +38,21 @@ export default {
   methods: {
     initData() {
       this.form.token = this.getToken;
-      let arr = this.getBComparison;
+      let arr = this.getMComparison;
       let brands = [];
+      let models = [];
       arr.forEach((ele) => {
-        brands.push(ele.name);
+        brands.push(ele.brand);
+        models.push(ele.model);
       });
       this.form.sBrand = brands.toString();
+      this.form.sSeriesName =models.toString();
       this.getData();
     },
     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 || [];
@@ -54,6 +61,7 @@ export default {
                 brandList.push(e.Name)
             })
             this.opt = createOpt(data,brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
diff --git a/src/views/ModelComparison/channelDistribution/opt.js b/src/views/ModelComparison/channelDistribution/opt.js
index 4326be4..be14f67 100644
--- a/src/views/ModelComparison/channelDistribution/opt.js
+++ b/src/views/ModelComparison/channelDistribution/opt.js
@@ -1,13 +1,68 @@
 /*
  * @Author: your name
  * @Date: 2021-10-15 15:15:27
- * @LastEditTime: 2021-10-28 15:44:36
+ * @LastEditTime: 2021-11-11 14:48:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @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 = []) {
     /*series: [
         {
@@ -25,12 +80,12 @@ function createData(dataList = []) {
         let o = {
             name: e.Name,
             type: 'bar',
-            barGap: 0,
             barWidth: 16,
+            barGap: '9%',
             emphasis: {
                 focus: 'series'
             },
-            data: [e.Data.新闻,e.Data.论坛,e.Data.微信,e.Data.短视频,e.Data.微博,e.Data.其他]
+            data: [e.Data['新闻'],e.Data['论坛'],e.Data['微信'],e.Data['短视频'],e.Data['微博'],e.Data['其他']]
         };
         arr.push(o)
     })
@@ -40,20 +95,23 @@ export default function createOpt(dataList = [],brandList = []) {
     let info = createData(dataList);
     return {
         grid: {
-            top: "56px",
-            left: "16px",
-            right: "28px",
-            bottom: "16px",
+            top: 56,
+            left: 10,
+            right: "5%",
+            bottom: 10,
             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/ModelComparison/informationTrend/index.vue b/src/views/ModelComparison/informationTrend/index.vue
index 46e6998..e0973a5 100644
--- a/src/views/ModelComparison/informationTrend/index.vue
+++ b/src/views/ModelComparison/informationTrend/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 11:40:55
- * @LastEditTime: 2021-10-15 11:53:35
+ * @LastEditTime: 2021-11-11 14:26:23
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @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,9 +22,12 @@ export default {
   name: "informationTrend",
   data() {
     return {
+      load: false,
       form: {
         token: "",
         sBrand: "",
+        sSeriesName: "",
+        iContrastType: 2
       },
       opt: {},
     };
@@ -35,16 +38,20 @@ export default {
   methods: {
     initData() {
       this.form.token = this.getToken;
-      let arr = this.getBComparison;
+      let arr = this.getMComparison;
       let brands = [];
+      let models = [];
       arr.forEach((ele) => {
-        brands.push(ele.name);
+        brands.push(ele.brand);
+        models.push(ele.model);
       });
       this.form.sBrand = brands.toString();
+      this.form.sSeriesName = models.toString();
       this.getData();
     },
     getData() {
       let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
       getCountTime0528C(obj).then((res) => {
          let data = res.data || [];
          let dx = [];
@@ -56,6 +63,7 @@ export default {
              ds.push(value);
          });
          this.opt = createOpt(dx, ds);
+         this.load = false;
       });
     },
   },
diff --git a/src/views/ModelComparison/informationTrend/opt.js b/src/views/ModelComparison/informationTrend/opt.js
index 1770030..06dfe3a 100644
--- a/src/views/ModelComparison/informationTrend/opt.js
+++ b/src/views/ModelComparison/informationTrend/opt.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:11:24
- * @LastEditTime: 2021-10-15 11:56:55
+ * @LastEditTime: 2021-11-11 14:47:26
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/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/ModelComparison/informationVolumeByChannel/index.vue b/src/views/ModelComparison/informationVolumeByChannel/index.vue
index 4e3de9d..8cb5510 100644
--- a/src/views/ModelComparison/informationVolumeByChannel/index.vue
+++ b/src/views/ModelComparison/informationVolumeByChannel/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 14:47:23
- * @LastEditTime: 2021-10-16 14:54:34
+ * @LastEditTime: 2021-11-11 14:27:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @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" :eStyle="{'border-style': 'none'}"/>
         <div class="ivb-inner">
             <v-echarts :opt="opt"></v-echarts>
@@ -21,6 +21,7 @@ export default {
     name: "informationVolumeByChannel",
     data() {
         return {
+            load: false,
             opt: createOpt()
         }
     }
diff --git a/src/views/ModelComparison/keyMediaCommunicationComparison/index.vue b/src/views/ModelComparison/keyMediaCommunicationComparison/index.vue
index 678e4c5..b87014b 100644
--- a/src/views/ModelComparison/keyMediaCommunicationComparison/index.vue
+++ b/src/views/ModelComparison/keyMediaCommunicationComparison/index.vue
@@ -1,66 +1,84 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 15:34:26
- * @LastEditTime: 2021-11-11 10:46:19
+ * @LastEditTime: 2021-11-11 14:27:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
 -->
 <template>
-  <div class="kmcc-outter">
-    <v-label-div title="重点媒体传播对比"> </v-label-div>
-    <div class="kmcc-inner">
-      <v-echarts :opt="opt"></v-echarts>
+    <div class="kmcc-outter" v-loading="load">
+        <v-label-div title="重点媒体传播对比"> </v-label-div>
+        <div class="kmcc-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import createOpt from "./opt";
 import { getSourceCount0528C } from "@/api/BrandComparison";
 export default {
-  name: "kmcc-outter",
-  data() {
-    return {
-      form: {
-        token: "",
-        sBrand: "",
-      },
-      opt: createOpt(),
-    };
-  },
-  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();
+    name: "kmcc-outter",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            opt: {},
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison;
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getSourceCount0528C(obj).then((res) => {
+                let data = res.data;
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.key;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+                this.load = false;
+            });
+        },
     },
-    getData() {
-      let obj = Object.assign({}, this.getCtime2, this.form);
-      getSourceCount0528C(obj).then(() => {
-      })
-    }
-  },
 };
 </script>
 
 <style lang="less" scoped>
 .kmcc-outter {
-  width: 936px;
-  height: 460px;
-  border: 2px solid #0f2a4d;
-  margin-left: 16px;
-  .kmcc-inner {
-    width: 100%;
-    height: calc(100% - 48px);
-  }
+    width: 936px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .kmcc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
 }
 </style>
diff --git a/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js b/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js
index 0e27d1d..a57d399 100644
--- a/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js
+++ b/src/views/ModelComparison/keyMediaCommunicationComparison/opt.js
@@ -1,17 +1,70 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-10-15 15:51:52
+ * @LastEditTime: 2021-11-11 14:49:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
+let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].key;
+      })
+      if(n === -1) {
+        let obj =
+        {
+          name: arr1[j].key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 24,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx=[], ds=[]) {
+  const data = createData(ds);
     return {
         grid: {
-            left: 16,
-            right: 16,
-            bottom: 16,
+            left: 10,
+            right: '5%',
+            bottom: 10,
             top: 56,
             containLabel: true
         },
@@ -27,10 +80,13 @@ export default function createOpt() {
         },
         legend: {
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize: 10
             },
             y: 10,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         xAxis: {
             type: 'category',
@@ -43,7 +99,7 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['汽车之家', '懂车帝', '腾讯新闻', '凤凰网', '新浪微博']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -53,6 +109,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+              formatter: (value) => {
+                let str = bigNumberTransform(value);
+                return str;
+              }
+            },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -60,68 +122,7 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
-            {
-              name: '奥迪',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [320, 302, 301, 334, 390]
-            },
-            {
-              name: '宝马',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [120, 132, 101, 134, 90]
-            },
-            {
-              name: '奔驰',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [220, 182, 191, 234, 290]
-            },
-            {
-              name: '吉利',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [150, 212, 201, 154, 190]
-            },
-            {
-              name: '大众',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [820, 832, 901, 934, 1290]
-            },
-            {
-                name: '别克',
-                type: 'bar',
-                stack: 'total',
-                barWidth: 24,
-                emphasis: {
-                  focus: 'series'
-                },
-                data: [820, 832, 901, 934, 1290]
-              }
-          ]
+        series: data
     }
 
 }
\ No newline at end of file
diff --git a/src/views/ModelComparison/overallInformation/index.vue b/src/views/ModelComparison/overallInformation/index.vue
index fc93ee6..14052bf 100644
--- a/src/views/ModelComparison/overallInformation/index.vue
+++ b/src/views/ModelComparison/overallInformation/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 11:58:33
- * @LastEditTime: 2021-10-15 15:20:41
+ * @LastEditTime: 2021-11-11 14:28:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
 -->
 <template>
-    <div class="oi-outter">
+    <div class="oi-outter" v-loading="load">
         <v-label-div title="整体信息量" ></v-label-div>
         <div class="oi-inner">
              <v-echarts :opt="opt"></v-echarts>
@@ -22,9 +22,12 @@ export default {
     name: "overallInformation",
     data() {
         return {
+            load: false,
             form: {
                 token: "",
-                sBrand: ""
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2
             },
             opt: {}
         }
@@ -35,17 +38,21 @@ export default {
     methods: {
         initData() {
             this.form.token = this.getToken;
-            let arr = this.getBComparison;
+            let arr = this.getMComparison;
             let brands = [];
+            let models = [];
             arr.forEach(ele => {
-                brands.push(ele.name)
+                brands.push(ele.brand);
+                models.push(ele.model);
             });
             this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
             this.getData();
         },
         getData() {
             return new Promise((resolve, reject) => {
             let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
             getContrastCount0528C(obj).then((res) => {
             let data = res.data || [];
             let brandsList = [];
@@ -55,6 +62,7 @@ export default {
                 infoList.push(e.value);
             })
             this.opt = createSingleColumnar(brandsList, infoList);
+            this.load = false;
             resolve(data)
             }).catch(() => {
                 reject(false)
diff --git a/src/views/ModelComparison/overallNumberOfInteractions/index.vue b/src/views/ModelComparison/overallNumberOfInteractions/index.vue
index 43b11fd..e13f9d3 100644
--- a/src/views/ModelComparison/overallNumberOfInteractions/index.vue
+++ b/src/views/ModelComparison/overallNumberOfInteractions/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 13:12:08
- * @LastEditTime: 2021-10-15 15:21:18
+ * @LastEditTime: 2021-11-11 14:29:27
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
 -->
 <template>
-    <div class="onoi-outter">
+    <div class="onoi-outter" v-loading="load">
         <v-label-div title="整体互动人数" ></v-label-div>
         <div class="onoi-inner">
             <v-echarts :opt="opt"></v-echarts>
@@ -22,9 +22,12 @@ export default {
     name: "overallInformation",
     data() {
         return {
+            load: false,
             form: {
                 token: "",
-                sBrand: ""
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2
             },
             opt: {}
         }
@@ -35,17 +38,21 @@ export default {
     methods: {
         initData() {
             this.form.token = this.getToken;
-            let arr = this.getBComparison;
+            let arr = this.getMComparison;
             let brands = [];
+            let models = [];
             arr.forEach(ele => {
-                brands.push(ele.name)
+                brands.push(ele.brand);
+                models.push(ele.model);
             });
             this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
             this.getData();
         },
         getData() {
             return new Promise((resolve, reject) => {
             let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
             getInteractCount0528C(obj).then((res) => {
             let data = res.data || [];
             let brandsList = [];
@@ -54,7 +61,8 @@ export default {
                 brandsList.push(e.key);
                 infoList.push(e.value);
             })
-            this.opt = createSingleColumnar(brandsList, infoList);
+            this.opt = createSingleColumnar(brandsList, infoList, '#54BF93');
+            this.load = false;
             resolve(data)
             }).catch(() => {
                 reject(false)