Merge branch 'dev' of git.oa00.com:SWS/carInsightSystem into dev

* 'dev' of git.oa00.com:SWS/carInsightSystem:
  zx-品牌对比-改动
  zx-品牌对比-改动

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,14 +124,23 @@ 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 || [];
             let brandList = [];
+            let dx = [];
             data.forEach((e) => {
+              let ab = e.Data || {};
+              for (let key in ab) {
+                if (!dx.includes(key)) {
+                  dx.push(key);
+                }
+              }
               brandList.push(e.Name);
             });
-            this.opt1 = createOpt(data, brandList);
+            this.opt1 = createOpt(data,dx, brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {

src/views/BrandComparison/brandEventComparison/opt.js

@@ -7,20 +7,71 @@
  * @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]
-    },*/
-function createData(dataList = []) {
+        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.Data || {};
+        dx.forEach(e => {
+            a.push(Data[e])
+        })
         let o = {
             name: ele.Name,
             type: 'bar',
@@ -29,30 +80,34 @@ function createData(dataList = []) {
             emphasis: {
                 focus: 'series'
             },
-            data: [ele.Data.新闻,ele.Data.APP,ele.Data.微信,ele.Data.微博,ele.Data.短视频,ele.Data.论坛,ele.Data.其他]
+            data: a
         };
         arr.push(o)
     })
     return arr;
 }
 
-export default function createOpt(dataList = [], brandList = []) {
-    let info = createData(dataList);
+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",
@@ -76,7 +131,7 @@ export default function createOpt(dataList = [], brandList = []) {
                         color: "#fff",
                     },
                 },
-                data: ['新闻', 'APP', '微信', '微博', '短视频','论坛', "其他"]
+                data: dx
             }
         ],
         yAxis: [

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,14 +47,23 @@ 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 || [];
             let brandList = [];
-            data.forEach(e => {
-                brandList.push(e.Name)
-            })
-            this.opt = createOpt(data,brandList);
+            let dx = [];
+            data.forEach((e) => {
+              let ab = e.Data || {};
+              for (let key in ab) {
+                if (!dx.includes(key)) {
+                  dx.push(key);
+                }
+              }
+              brandList.push(e.Name);
+            });
+            this.opt = createOpt(data, dx, brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {

src/views/BrandComparison/channelDistribution/opt.js

@@ -7,10 +7,72 @@
  * @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']
-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(e => {
+        let a = [];
+        let Data = e.Data || {};
+        dx.forEach(e => {
+            a.push(Data[e])
+        })
         let o = {
             name: e.Name,
             type: 'bar',
@@ -19,30 +81,37 @@ function createData(dataList = []) {
             emphasis: {
                 focus: 'series'
             },
-            data: [e.Data.新闻, e.Data.微信, e.Data.短视频, e.Data.APP, e.Data.论坛,e.Data.微博, e.Data.其他]
+            data: a
         };
         arr.push(o)
     })
     return arr;
 }
-export default function createOpt(dataList = [], brandList = []) {
-    let info = createData(dataList);
+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",
@@ -66,7 +135,7 @@ export default function createOpt(dataList = [], brandList = []) {
                         color: "#fff",
                     },
                 },
-                data: ['新闻', '微信', '短视频', 'APP','论坛', '微博', "其他"]
+                data: dx
             }
         ],
         yAxis: [

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;
       });
     },
   },

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',

src/views/BrandComparison/informationVolumeByChannel/index.vue

@@ -7,32 +7,37 @@
  * @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
 -->
 <template>
-    <div class="ivb-outter">
-        <v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}"/>
-        <div class="ivb-inner">
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
+  <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>
     </div>
+  </div>
 </template>
 
 <script>
-import {getSourcetypeC} from "@/api/BrandComparison/BrandWeiyi.js"
-import createOpt from "./opt"
+import { getSourcetypeC } from "@/api/BrandComparison/BrandWeiyi.js";
+import createOpt from "./opt";
 export default {
-    name: "informationVolumeByChannel",
-    data() {
-        return {
-            opt: {},
-            form: {
-                token: "",
-                sBrand: ""
-            }
-        }
-    },
-    created() {
-        this.initData();
-    },
-    methods: {
+  name: "informationVolumeByChannel",
+  data() {
+    return {
+      opt: {},
+      load: false,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
     initData() {
       this.form.token = this.getToken;
       let arr = this.getBComparison;
@@ -46,33 +51,41 @@ 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 || [];
             let brandList = [];
-            data.forEach(e => {
-                brandList.push(e.Name)
-            })
-            this.opt = createOpt(data,brandList);
+            let dx = [];
+            data.forEach((e) => {
+              let ab = e.Data || {};
+              for (let key in ab) {
+                if (!dx.includes(key)) {
+                  dx.push(key);
+                }
+              }
+              brandList.push(e.Name);
+            });
+            this.opt = createOpt(data, dx, brandList);
+            this.load = false;
             resolve(data);
           })
           .catch(() => {
             reject(false);
           });
-        });
-      },
+      });
     },
-
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .ivb-outter {
-    width: 944px;
-    height: 412px;
-    .ivb-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 944px;
+  height: 412px;
+  .ivb-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/BrandComparison/informationVolumeByChannel/opt.js

@@ -7,9 +7,71 @@
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
 import { bigNumberTransform } from "@/utils/gol/dataTool"
-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(e => {
+        let a = [];
+        let Data = e.Data || {};
+        dx.forEach(e => {
+            a.push(Data[e])
+        })
         let o = {
             name: e.Name,
             type: 'bar',
@@ -18,15 +80,15 @@ function createData(dataList = []) {
             emphasis: {
                 focus: 'series'
             },
-            data: [e.Data.新闻, e.Data.微信, e.Data.短视频, e.Data.论坛, e.Data.微博, e.Data.其他]
+            data: a
         };
         arr.push(o)
     })
     return arr;
 }
 
-export default function createOpt(dataList = [], brandList = []) {
-    let info = createData(dataList);
+export default function createOpt(dataList = [],dx = [], brandList = []) {
+    let info = createData(dataList,dx);
     return {
         grid: {
             top: "56px",
@@ -35,6 +97,7 @@ export default function createOpt(dataList = [], brandList = []) {
             bottom: "16px",
             containLabel: true,
         },
+        color: colors,
         legend: {
             data: brandList,
             textStyle: { //图例文字的样式
@@ -65,7 +128,7 @@ export default function createOpt(dataList = [], brandList = []) {
                         color: "#fff",
                     },
                 },
-                data: ['新闻', '微信', '短视频', 'APP','论坛' ,'微博', "其他"]
+                data: dx
             }
         ],
         yAxis: [

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>

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
+  }
 
 }

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>

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>

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(() => {

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',