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'
+        offset: 0,
+        color: '#3373CC'
     },
-        data: [320, 332, 301, 334, 390, 400]
-    },*/
-function createData(dataList = []) {
+    {
+        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,8 +7,12 @@
  * @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-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>
@@ -16,18 +20,19 @@
 </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: {},
+      load: false,
       form: {
         token: "",
-                sBrand: ""
-            }
-        }
+        sBrand: "",
+      },
+    };
   },
   created() {
     this.initData();
@@ -46,14 +51,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(() => {
@@ -62,8 +76,7 @@ export default {
       });
     },
   },
-
-}
+};
 </script>
 
 <style lang="less" scoped>

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 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,32 +6,77 @@
  * @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,
       type: 'bar',
@@ -40,21 +85,21 @@ function createData(dataList = []) {
       emphasis: {
         focus: 'series'
       },
-      data: valueArr
+      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: 10,
       right: '5%',
       bottom: 10,
-            top: 56,
+      top: 52,
       containLabel: true
     },
     tooltip: {
@@ -67,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
+      y: 12,
+      x: 16,
+      itemWidth: 12,
+      itemHeight: 12
     },
     xAxis: {
       type: 'category',
       axisTick: {
         show: false,
       },
+      axisLabel: {
+        interval: 0
+      },
       axisLine: {
         show: false,
         lineStyle: {
           color: "#fff",
         },
       },
-            data: ['微信', '懂车帝', '今日头条', '抖音', '易车']
+      data: dx
     },
     yAxis: {
       type: 'value',

src/views/BrandComparison/overallInformation/index.vue

@@ -7,7 +7,7 @@
  * @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>
@@ -16,18 +16,19 @@
 </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 {
+      load: false,
       form: {
         token: "",
-                sBrand: ""
+        sBrand: "",
       },
-            opt: {}
-        }
+      opt: {},
+    };
   },
   created() {
     this.initData();
@@ -37,31 +38,28 @@ export default {
       this.form.token = this.getToken;
       let arr = this.getBComparison;
       let brands = [];
-            arr.forEach(ele => {
-                brands.push(ele.name)
+      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);
+      this.load = true;
       getContrastCount0528C(obj).then((res) => {
         let data = res.data || [];
         let brandsList = [];
         let infoList = [];
-            data.forEach(e => {
+        data.forEach((e) => {
           brandsList.push(e.key);
           infoList.push(e.value);
-            })
-            this.opt = createSingleColumnar(brandsList, infoList);
-            resolve(data)
-            }).catch(() => {
-                reject(false)
         });
+        this.opt = createSingleColumnar(brandsList, infoList);
+        this.load = false;
       });
-        }
-    }
+    },
+  },
 };
 </script>
 

src/views/BrandComparison/overallNumberOfInteractions/index.vue

@@ -7,7 +7,7 @@
  * @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>
@@ -16,18 +16,19 @@
 </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 {
+      load: false,
       form: {
         token: "",
-                sBrand: ""
+        sBrand: "",
       },
-            opt: {}
-        }
+      opt: {},
+    };
   },
   created() {
     this.initData();
@@ -37,31 +38,28 @@ export default {
       this.form.token = this.getToken;
       let arr = this.getBComparison;
       let brands = [];
-            arr.forEach(ele => {
-                brands.push(ele.name)
+      arr.forEach((ele) => {
+        brands.push(ele.name);
       });
       this.form.sBrand = brands.toString();
       this.getData();
     },
     getData() {
-            return new Promise((resolve, reject) => {
+      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 => {
+        data.forEach((e) => {
           brandsList.push(e.key);
           infoList.push(e.value);
-            })
-            this.opt = createSingleColumnar(brandsList, infoList);
-            resolve(data)
-            }).catch(() => {
-                reject(false)
         });
+        this.opt = createSingleColumnar(brandsList, infoList);
+        this.load = false;
       });
-        }
-    }
+    },
+  },
 };
 </script>
 

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: [
+
+import * as echarts from "echarts";
+
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
   {
-              name: '奥迪',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
+    offset: 0,
+    color: '#3373CC'
+  },
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#63AECC'
   },
-              data: [320, 302, 301, 334, 390]
+  {
+    offset: 1,
+    color: '#071a32'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+    offset: 0,
+    color: '#54BF93'
   },
-*/
-function createData(dataList = []) {
+  {
+    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',