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

src/api/BrandComparison/BbsBrand.js

@@ -0,0 +1,53 @@
+import httpService from "@/request"
+
+// 品牌对比-论坛信息概括对比
+export function getCount0528C(params) {
+    let obj =  Object.assign({action: 'getCount0528C', sType: 'BbsBrand', iContrastType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-论坛发帖趋势对比
+export function getCountTime0528C(params) {
+    let obj =  Object.assign({action: 'getCountTime0528C', sType: 'BbsBrand', iContrastType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-论坛调性对比
+export function getAffectionsC(params) {
+    let obj =  Object.assign({action: 'getAffectionsC', sType: 'BbsBrand', iContrastType: 1, iBBsType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-论坛正面/负面话题对比
+export function getTopicPosAndTopicNeg0528C(params) {
+    let obj =  Object.assign({action: 'getTopicPosAndTopicNeg0528C', sType: 'BbsBrand', iContrastType: 1, iBBsType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/BrandComparison/BrandWeibo.js

@@ -0,0 +1,92 @@
+import httpService from "@/request"
+
+// 品牌对比-微博信息量对比
+export function getContrastCount0528C(params) {
+    let obj =  Object.assign({action: 'getContrastCount0528C', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-微博互动人数对比
+export function getInteractCount0528C(params) {
+    let obj =  Object.assign({action: 'getInteractCount0528C', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-微博大V对比
+export function getBoauthen0528C(params) {
+    let obj =  Object.assign({action: 'getBoauthen0528C', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-微博调性对比
+export function getAffectionsC(params) {
+    let obj =  Object.assign({action: 'getAffectionsC', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-微博内容方向
+export function getDirect0528C(params) {
+    let obj =  Object.assign({action: 'getDirect0528C', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-用户区域分布
+export function getRegionWeiBoC(params) {
+    let obj =  Object.assign({action: 'getRegionWeiBoC', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-微博用户画像
+export function getSexMergeWeiBoC(params) {
+    let obj =  Object.assign({action: 'getSexMergeWeiBoC', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/BrandComparison/HotEvent.js

@@ -0,0 +1,27 @@
+import httpService from "@/request"
+
+// 品牌对比-品牌事件对比
+export function getSourcetypeC(params) {
+    let obj =  Object.assign({action: 'getSourcetypeC', sType: 'HotEvent0528', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-事件上榜车型
+export function getContrastCount0528C(params) {
+    let obj =  Object.assign({action: 'getContrastCount0528C', sType: 'HotEvent0528', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/BrandComparison/index.js

@@ -54,7 +54,7 @@ export function getInteractCount0528C(params) {
 
 // 品牌对比-渠道分布
 export function getSourcetypeC(params) {
-    let obj =  Object.assign({action: 'getSourcetypeC', sType: 'BrandOverview', iContrastType: 1}, params)
+    let obj =  Object.assign({action: 'getSourcetypeC', iContrastType: 1}, params)
     return httpService({
         url: `/api/v6.ashx`,
         method: 'post',
@@ -63,4 +63,44 @@ export function getSourcetypeC(params) {
             'content-type': 'application/x-www-form-urlencoded'
         }
     })
-}
+}
+
+// 品牌对比-重点媒体传播对比
+export function getSourceCount0528C(params) {
+    let obj =  Object.assign({action: 'getSourceCount0528C', sType: 'BrandOverview', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-品牌传播top媒体
+export function getSourceTopCount0528C(params) {
+    let obj =  Object.assign({action: 'getSourceTopCount0528C', sType: 'BrandOverview', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌对比-整体词云对比
+export function getPositiveAndNegative0528C(params) {
+    let obj =  Object.assign({action: 'getPositiveAndNegative0528C', sType: 'BrandOverview', iContrastType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+

src/api/ModelForumDetails/index.js

@@ -0,0 +1,211 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-10 09:50:36
+ * @LastEditTime: 2021-11-10 16:02:05
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /data-show/src/api/ModelForumDetails/index.js
+ */
+import httpService from "@/request"
+// 论坛洞察详情
+export function getBbsCount(params) {
+    let obj =  Object.assign({action: 'getBbsCount',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 主贴内容分析-论坛传播态势
+export function getBbsVolumeTime(params) {
+    let obj =  Object.assign({action: 'getBbsVolumeTime',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主贴内容分析-论坛调性分布
+export function getAffections(params) {
+    let obj =  Object.assign({action: 'getAffections',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主贴内容分析-阅读量
+export function getClicksDistribution(params) {
+    let obj =  Object.assign({action: 'getClicksDistribution',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 主贴内容分析-回复量
+export function getReplyDistribution(params) {
+    let obj =  Object.assign({action: 'getReplyDistribution',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主贴内容分析-精华率
+export function getJingHuaDistribution(params) {
+    let obj =  Object.assign({action: 'getJingHuaDistribution',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主贴内容分析-图文
+export function getImgDistribution(params) {
+    let obj =  Object.assign({action: 'getImgDistribution',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 正面话题分布-正面话题分布
+export function getPositiveTopic(params) {
+    let obj =  Object.assign({action: 'getPositiveTopic',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 负面话题分布-负面话题分布
+export function getNegativeTopic(params) {
+    let obj =  Object.assign({action: 'getNegativeTopic',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主贴/跟帖ID车型分析-主贴/跟帖ID
+export function getGuanZhuSeriesname(params) {
+    let obj =  Object.assign({action: 'getGuanZhuSeriesname',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 主贴/跟帖ID车型分析-主贴/跟帖认证ID
+export function getAttestationBuycars(params) {
+    let obj =  Object.assign({action: 'getAttestationBuycars',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 主贴/跟帖用户分析-性别
+export function getAttestationSex(params) {
+    let obj =  Object.assign({action: 'getAttestationSex',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 主贴/跟帖用户分析-认证
+export function getUserAttestation(params) {
+    let obj =  Object.assign({action: 'getUserAttestation',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主贴/跟帖区域分布-区域分布
+export function getRegion(params) {
+    let obj =  Object.assign({action: 'getRegion',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 疑似车黑ID-疑似车黑ID
+export function getCarblackUserName(params) {
+    let obj =  Object.assign({action: 'getCarblackUserName',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 跟帖ID注册时间-跟帖ID注册时间
+export function getUserRegTime(params) {
+    let obj =  Object.assign({action: 'getUserRegTime',sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+

src/components/v-echars-map/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-14 13:08:10
- * @LastEditTime: 2021-10-14 16:07:31
+ * @LastEditTime: 2021-11-10 15:16:30
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-echars-map/index.vue

src/lycomponents/iSwitchModel/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 09:16:31
- * @LastEditTime: 2021-11-01 17:45:28
+ * @LastEditTime: 2021-11-09 18:01:58
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
@@ -34,7 +34,7 @@
 
                     <div class="sb-dd-right">
                        <vue-scroll>
-                           <div class="sb-bd">
+                           <div class="sb-bd" v-loading="load">
                                <div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">{{item.name}}</div>    
                            </div>
                        </vue-scroll> 
@@ -90,6 +90,7 @@ export default {
         return {
             show: false,
             activeLi: 0,
+            load: false,
             form: {
                 token: "",
                 sBrandName: ""
@@ -186,9 +187,11 @@ export default {
             if(!this.getToken) return;
              this.form.token = this.getToken;
              this.form.sBrandName = brandName;
+             this.load = true;
             getUserSeriesName(this.form).then(res => {
                 let data = res.data || [];
-                this.models = data
+                this.models = data;
+                this.load = false;
             })
         }
     },

src/mixins/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-11-09 10:24:25
+ * @LastEditTime: 2021-11-09 18:11:18
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -89,10 +89,10 @@ export default {
                 }
             },
             computed: {
-                ...mapGetters(['getZoom', 'getLoading','getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison','getBComparison'])
+                ...mapGetters(['getZoom', 'getLoading','getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison','getBComparison', 'getMComparison'])
             },
             methods: {
-                ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison','setBComparison']),
+                ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison','setBComparison', 'setMComparison']),
                 // 获取当前日期时间
                 getDatetime() {
                     let now = new Date();

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-11-08 18:38:19
+ * @LastEditTime: 2021-11-09 18:12:40
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -35,6 +35,8 @@ import mcIndex from "@/views/MarketingComparison"
 import ModelTailDetails from "@/views/ModelTailDetails"
 import ModelEventDetails from "@/views/ModelEventDetails"
 import ModelWeiboDetails from "@/views/ModelWeiboDetails"
+import ModelForumDetails from "@/views/ModelForumDetails"
+import ModelComparison from "@/views/ModelComparison"
 const router = [
     {
         path: '/login',
@@ -137,6 +139,12 @@ const router = [
                 desc: "车型事件详情",
                 component: ModelEventDetails
             },
+            {
+                path: '/modelForumDetails',
+                name: "modelForumDetails",
+                desc: "车型论坛详情",
+                component: ModelForumDetails
+            },
             {
                 path: '/modelWeiboDetails',
                 name: "modelWeiboDetails",
@@ -149,6 +157,12 @@ const router = [
                 desc: "车型尾翼详情",
                 component: ModelTailDetails
             },
+            {   
+                path: '/modelComparison',
+                name: "ModelComparison",
+                desc: "车型对比",
+                component: ModelComparison
+            },
             {
                 path: '/mcIndex',
                 name: "mcIndex",

src/store/actions.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:36:49
- * @LastEditTime: 2021-11-09 10:23:08
+ * @LastEditTime: 2021-11-09 18:07:52
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/actions.js
@@ -46,5 +46,8 @@ const actions = {
     setSComparison: ({commit}, log) => {
         commit('setSComparison', log) 
     },
+    setMComparison: ({commit}, log) => {
+        commit('setMComparison', log) 
+    },
 }
 export default actions

src/store/getters.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:06
- * @LastEditTime: 2021-11-09 10:20:07
+ * @LastEditTime: 2021-11-09 18:09:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/getters.js
@@ -46,5 +46,8 @@ const getters = {
     getSComparison(state) {
         return state.sComparison 
     },
+    getMComparison(state) {
+        return state.mComparison 
+    },
 }
 export default getters

src/store/mutations.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:35
- * @LastEditTime: 2021-11-09 11:07:48
+ * @LastEditTime: 2021-11-09 18:09:44
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/mutations.js
@@ -71,6 +71,11 @@ const mutations = {
         let str = JSON.stringify(log);
         sessionStorage.setItem('sComparison', str);
     },
+    setMComparison: (state, log) => {
+        state.mComparison = log;
+        let str = JSON.stringify(log);
+        sessionStorage.setItem('mComparison', str);
+    },
     
 }
 

src/store/state.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:37:50
- * @LastEditTime: 2021-11-09 10:19:08
+ * @LastEditTime: 2021-11-09 18:07:14
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/store/state.js
@@ -21,6 +21,6 @@ const state = {
     model: JSON.parse(sessionStorage.getItem('model')) || {},
     bComparison: JSON.parse(sessionStorage.getItem('bComparison')) || [],
     sComparison: JSON.parse(sessionStorage.getItem('sComparison')) || [],
-    
+    mComparison: JSON.parse(sessionStorage.getItem('mComparison')) || [],    
 }
 export default state;

src/styles/antd.less

@@ -253,3 +253,10 @@ li.ant-calendar-time-picker-select-option-selected {
     background: #3373CC !important;
   }
 }
+.ant-tooltip {
+  box-shadow: 0px 0px 10px 0px #3373CC !important;
+  background: #08182e !important;
+}
+.ant-tooltip-inner {
+  background: #08182e !important;
+}

src/utils/gol/bubbleWord.js

@@ -6,12 +6,12 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/utils/gol/bubbleWord.js
  */
-import {compare} from "./dataTool"
- // 将后台数据转成数组
+import { compare } from "./dataTool"
+// 将后台数据转成数组
 function doWordCloud(data) {
     let arr1 = [];
     for (let key in data) {
-        let obj = { name: key, value: data[key] };
+        let obj = { key: key, value: data[key] };
         arr1.push(obj);
     }
     return arr1;
@@ -93,12 +93,17 @@ function bubbleChart(data = [], format = []) {
 
 // 创建词云图
 export default function createWordCloud(obj) {
-    let words = doWordCloud(obj);
-    words.sort(compare('value'));
-    let bubble = bubbleChart(words, ['name', 'value']);
+    let bubble = null;
+    if (Array.isArray(obj)) {
+        bubble = bubbleChart(obj, ['key', 'value']);
+    } else {
+        let words = doWordCloud(obj);
+        words.sort(compare('value'));
+        bubble = bubbleChart(words, ['key', 'value']);
+    }
     return {
         animationEasingUpdate: 'bounceIn',
-        tooltip: { 
+        tooltip: {
             backgroundColor: "#08182F",
             color: "#fff",
             borderColor: "#3373CC",
@@ -106,8 +111,9 @@ export default function createWordCloud(obj) {
                 color: "#fff", //设置文字颜色
             },
             extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
-            formatter: function(param) {
+            formatter: function (param) {
                 let data = param.data;
+                console.log(data)
                 return `<span>${data.name}</span><br><span>${data.value}</span>`
             }
         },
@@ -115,13 +121,13 @@ export default function createWordCloud(obj) {
             type: 'graph',
             layout: 'force',
             label: {
-                show:true,
-                color:"#FFF",
-                fontSize:12,
-               
+                show: true,
+                color: "#FFF",
+                fontSize: 12,
+
             },
             force: {
-                gravity:0.2,
+                gravity: 0.2,
                 repulsion: bubble.repulsion,
                 edgeLength: 10
             },

src/views/BrandComparison/brandCommunicationTOPMedia/index.vue

@@ -7,236 +7,108 @@
  * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
 -->
 <template>
-    <div class="bcm-outter">
-        <v-label-div title="品牌传播TOP媒体">
-        </v-label-div>
-        <div class="bcm-inner">
-            <div class="bcm-item" v-for="(item,index) in list" :key="index">
-                <span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
-                <v-ranking-bcm  v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
-            </div>
-        </div>
+  <div class="bcm-outter">
+    <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] }">{{
+          item.key
+        }}</span>
+        <v-ranking-bcm
+          v-for="(it, n) in item.value"
+          :key="n"
+          :label="it.key"
+          :num="it.num"
+          :val="it.value"
+        ></v-ranking-bcm>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import vRankingBcm from "./v-ranking-bcm"
+import { getSourceTopCount0528C } from "@/api/BrandComparison";
+import vRankingBcm from "./v-ranking-bcm";
 export default {
-    name: "brandCommunicationTOPMedia",
-    components: {
-       vRankingBcm 
+  name: "brandCommunicationTOPMedia",
+  components: {
+    vRankingBcm,
+  },
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      arrList:[],
+    };
+  },
+  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();
     },
-    data() {
-        return {
-            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-            list: [
-                {
-                    name: '奥迪',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '宝马',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '奔驰',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                 {
-                    name: '吉利',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                 {
-                    name: '大众',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '别克',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getSourceTopCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            data.forEach(ele => {
+                for(let index = 0 ; index<ele.value.length;index++){
+                    ele.value[index].num = index + 1;
                 }
-            ]
-        }
-    }
+            });
+            this.arrList = data;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .bcm-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bcm-inner {
     width: 100%;
-    height: 460px;
-    border: 2px solid #0f2a4d;
-    margin-top: 16px;
-    .bcm-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .bcm-item {
-            width: 282px;
-            margin-left: 27px;
-            .ss1 {
-                display: block;
-                font-size: 18px;
-                color: #fff;
-                font-weight: 500;
-                padding-top: 14px;
-            }
-        }
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .bcm-item {
+      width: 282px;
+      margin-left: 27px;
+      .ss1 {
+        display: block;
+        font-size: 18px;
+        color: #fff;
+        font-weight: 500;
+        padding-top: 14px;
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/brandEventComparison/index.vue

@@ -7,96 +7,185 @@
  * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
 -->
 <template>
-    <div class="bec-outter">
-        <v-label-div title="品牌事件对比">
-        </v-label-div>
-        <div class="bec-inner">
-            <v-echarts :opt="opt1"></v-echarts> 
+  <div class="bec-outter">
+    <v-label-div title="品牌事件对比"> </v-label-div>
+    <div class="bec-inner">
+      <v-echarts :opt="opt1"></v-echarts>
+    </div>
+    <v-label-div
+      title="事件上榜车型"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="bec-one">
+      <div class="bec-one-item" v-for="(item, index) in list" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
         </div>
-        <v-label-div title="事件上榜车型" :showLine="false" :eStyle="{'border-style': 'none'}">
-         </v-label-div>
-         <div class="bec-one">
-             <div class="bec-one-item" v-for="(item,index) in list" :key="index">
-                 <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
-                 <div class="d1">
-                     <v-echarts :opt="item.drawOpt"></v-echarts> 
-                 </div>
-             </div>
-         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
-import createOpt from "./opt"
+import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
+import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+import createOpt from "./opt";
 export default {
-    name: "brandEventComparison",
-    data() {
-        return {
-          opt1: createOpt(),
-          colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-          list: [
-              {
-                  name: '奥迪',
-                  drawOpt: createSideSingleColumn(['A4', 'A3','Q5','A7','A6'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '宝马',
-                  drawOpt: createSideSingleColumn(['520', '220','S4','525','320'], [400, 500, 600, 800, 1000], '#63AECC'),
-              },
-              {
-                  name: '奔驰',
-                  drawOpt: createSideSingleColumn(['GML', '350','S600','SEL','300'], [400, 500, 600, 800, 1000], '#54BF93'),
-              },
-              {
-                  name: '吉利',
-                  drawOpt: createSideSingleColumn(['330', '吉利星','星耀','星月','帝豪'], [400, 500, 600, 800, 1000], '#CC9D12'),
-              },
-              {
-                  name: '大众',
-                  drawOpt: createSideSingleColumn(['途观', '速腾','迈腾','桑塔纳','帕萨特'], [400, 500, 600, 800, 1000], '#CC7733'),
-              },
-              {
-                  name: '别克',
-                  drawOpt: createSideSingleColumn(['凯悦', '奥克拉','君悦','君越','君威'], [400, 500, 600, 800, 1000], '#CC5B41'),
-              }
-          ]
-        }
-    }
-}
+  name: "brandEventComparison",
+  data() {
+    return {
+      opt1: createOpt(),
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      list: [
+        {
+          name: "奥迪",
+          drawOpt: createSideSingleColumn(
+            ["A4", "A3", "Q5", "A7", "A6"],
+            [400, 500, 600, 800, 1000],
+            "#3373CC"
+          ),
+        },
+        {
+          name: "宝马",
+          drawOpt: createSideSingleColumn(
+            ["520", "220", "S4", "525", "320"],
+            [400, 500, 600, 800, 1000],
+            "#63AECC"
+          ),
+        },
+        {
+          name: "奔驰",
+          drawOpt: createSideSingleColumn(
+            ["GML", "350", "S600", "SEL", "300"],
+            [400, 500, 600, 800, 1000],
+            "#54BF93"
+          ),
+        },
+        {
+          name: "吉利",
+          drawOpt: createSideSingleColumn(
+            ["330", "吉利星", "星耀", "星月", "帝豪"],
+            [400, 500, 600, 800, 1000],
+            "#CC9D12"
+          ),
+        },
+        {
+          name: "大众",
+          drawOpt: createSideSingleColumn(
+            ["途观", "速腾", "迈腾", "桑塔纳", "帕萨特"],
+            [400, 500, 600, 800, 1000],
+            "#CC7733"
+          ),
+        },
+        {
+          name: "别克",
+          drawOpt: createSideSingleColumn(
+            ["凯悦", "奥克拉", "君悦", "君越", "君威"],
+            [400, 500, 600, 800, 1000],
+            "#CC5B41"
+          ),
+        },
+      ],
+    };
+  },
+  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();
+      this.getTypeData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getSourcetypeC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let brandList = [];
+            data.forEach((e) => {
+              brandList.push(e.Name);
+            });
+            this.opt1 = createOpt(data, brandList);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    getTypeData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getContrastCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .bec-outter {
+  width: 100%;
+  height: auto;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bec-inner {
     width: 100%;
-    height: auto;
-    border: 2px solid #0f2a4d;
-    margin-top: 16px;
-    .bec-inner {
-        width: 100%;
-        height: 412px;
-    }
-    .bec-one {
+    height: 412px;
+  }
+  .bec-one {
+    width: 100%;
+    height: 412px;
+    display: flex;
+    justify-content: flex-start;
+    .bec-one-item {
+      width: 314px;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
         width: 100%;
-        height: 412px;
-        display: flex;
-        justify-content: flex-start;
-        .bec-one-item {
-            width: 314px;
-            height: 100%;
-            .s1 {
-                padding-left: 16px;
-                display: block;
-                height: 40px;
-                line-height: 40px;
-                color:#fff;
-                font-size: 18px;
-            }
-            .d1 {
-                width: 100%;
-                height: calc(100% - 40px);
-            }
-        }
+        height: calc(100% - 40px);
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/brandEventComparison/opt.js

@@ -6,7 +6,38 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
-export default function createOpt() {
+
+/*series: [
+    {
+        name: '奥迪',
+        type: 'bar',
+        barGap: 0,
+        barWidth: 20,
+        emphasis: {
+            focus: 'series'
+        },
+        data: [320, 332, 301, 334, 390, 400]
+    },*/
+function createData(dataList = []) {
+    let arr = [];
+    dataList.forEach(ele => {
+        let o = {
+            name: ele.Name,
+            type: 'bar',
+            barGap: 0,
+            barWidth: 20,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [ele.Data.新闻,ele.Data.论坛,ele.Data.微信,ele.Data.APP,ele.Data.微博,ele.Data.其他]
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+
+export default function createOpt(dataList = [], brandList = []) {
+    let info = createData(dataList);
     return {
         grid: {
             top: "56px",
@@ -16,7 +47,7 @@ export default function createOpt() {
             containLabel: true,
         },
         legend: {
-            data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
+            data: brandList,
             textStyle: { //图例文字的样式
                 color: '#fff'
             },
@@ -65,62 +96,6 @@ export default function createOpt() {
                 },
             }
         ],
-        series: [
-            {
-                name: '奥迪',
-                type: 'bar',
-                barGap: 0,
-                barWidth: 20,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [320, 332, 301, 334, 390, 400]
-            },
-            {
-                name: '宝马',
-                type: 'bar',
-                barWidth: 20,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [220, 182, 191, 234, 290, 300]
-            },
-            {
-                name: '奔驰',
-                type: 'bar',
-                barWidth: 20,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [150, 232, 201, 154, 190, 200]
-            },
-            {
-                name: '吉利',
-                type: 'bar',
-                barWidth: 20,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [98, 77, 101, 99, 40, 44]
-            },
-            {
-                name: '大众',
-                type: 'bar',
-                barWidth: 20,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [198, 177, 101, 199, 140, 145]
-            },
-            {
-                name: '别克',
-                type: 'bar',
-                barWidth: 20,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [298, 277, 201, 299, 240, 250]
-            }
-        ]
+        series: info
     }
 }

src/views/BrandComparison/channelDistribution/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { getSourcetypeC } from "@/api/BrandComparison";
+import { getSourcetypeC } from "@/api/BrandComparison/index.js";
 import createOpt from "./opt";
 export default {
   name: "channelDistribution",
@@ -51,7 +51,7 @@ export default {
             let data = res.data || [];
             let brandList = [];
             data.forEach(e => {
-                brandList.push(e.Name);
+                brandList.push(e.Name)
             })
             this.opt = createOpt(data,brandList);
             resolve(data);

src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue

@@ -7,33 +7,73 @@
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
 -->
 <template>
-    <div class="cop-outter">
-        <v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
-        <div class="cop-inner">
-           <v-echarts :opt="opt"></v-echarts> 
-        </div>
+  <div class="cop-outter">
+    <v-label-div
+      title="论坛发帖趋势对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cop-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getCountTime0528C } from "@/api/BrandComparison/BbsBrand.js";
+import createOpt from "./opt";
 export default {
-    name: "comparisonOfForumPostingTrends",
-    data() {
-        return {
-            opt: createOpt()
-        }
-    }
-}
+  name: "comparisonOfForumPostingTrends",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getCountTime0528C(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);
+        })
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .cop-outter {
-    width: 944px;
-    height: 412px;
-    .cop-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 944px;
+  height: 412px;
+  .cop-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/BrandComparison/comparisonOfForumPostingTrends/opt.js

@@ -6,7 +6,38 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
  */
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+function createData(ds = []) {
+    let testData = {}
+    ds.forEach(item => {
+        item.forEach(val => {
+            if (testData[val.key] === undefined) {
+                testData[val.key] = {
+                    name: val.key,
+                    type: 'line',
+                    symbol: 'none',
+                    areaStyle: {
+                        opacity: 0.4
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [val.value]
+                }
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+   return arr 
+}
+
+export default function createOpt(dx = [], ds = []) {
+    let data = createData(ds);
     return {
         grid: {
             left: 16,
@@ -39,13 +70,19 @@ export default function createOpt() {
             axisTick: {
                 show: false,
             },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
             axisLine: {
                 show: false,
                 lineStyle: {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -55,6 +92,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+            },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -62,86 +105,6 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
-            {
-                name: '奥迪',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
-            },
-            {
-                name: '宝马',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
-            },
-            {
-                name: '奔驰',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
-            },
-            {
-                name: '吉利',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
-            },
-            {
-                name: '大众',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-            {
-                name: '别克',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-
-        ]
+        series: data
     }
 }

src/views/BrandComparison/comparisonOfNegativeTopicsInForums/index.vue

@@ -7,82 +7,169 @@
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
 -->
 <template>
-    <div class="cpt-outter">
-        <v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
-        <div class="cpt-inner">
-            <div class="cpt-item" v-for="(item,index) in list" :key="index">
-                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
-                <div class="d1">
-                    <v-echarts :opt="item.drawOpt"></v-echarts> 
-                </div>
-            </div>
+  <div class="cpt-outter">
+    <v-label-div
+      title="论坛负面话题对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cpt-inner">
+      <div class="cpt-item" v-for="(item, index) in showData" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+import { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
 export default {
-    name: "comparisonOfPositiveTopicsInTheForum",
-    data() {
-        return {
-           colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-          list: [
-              {
-                  name: '奥迪',
-                  drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
-              },
-              {
-                  name: '宝马',
-                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#bd9312'),
-              },
-              {
-                  name: '奔驰',
-                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
-              },
-              {
-                  name: '吉利',
-                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
-              },
-              {
-                  name: '大众',
-                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
-              },
-              {
-                  name: '别克',
-                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
-              }
-          ] 
-        }
-    }
-}
+  name: "comparisonOfPositiveTopicsInTheForum",
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      showData: [],
+      list: [
+        {
+          name: "奥迪",
+          drawOpt: createSideSingleColumn(
+            ["全屏", "高度", "长度", "空间", "内饰"],
+            [400, 500, 600, 800, 1000],
+            "#bd9312"
+          ),
+        },
+        {
+          name: "宝马",
+          drawOpt: createSideSingleColumn(
+            ["异味", "舒适度", "刹车", "全景", "内容"],
+            [400, 500, 600, 800, 1000],
+            "#bd9312"
+          ),
+        },
+        {
+          name: "奔驰",
+          drawOpt: createSideSingleColumn(
+            ["舒适度", "高度", "宽度", "空间", "内饰"],
+            [400, 500, 600, 800, 1000],
+            "#bd9312"
+          ),
+        },
+        {
+          name: "吉利",
+          drawOpt: createSideSingleColumn(
+            ["底盘", "加速度", "全景", "空间", "内饰"],
+            [400, 500, 600, 800, 1000],
+            "#bd9312"
+          ),
+        },
+        {
+          name: "大众",
+          drawOpt: createSideSingleColumn(
+            ["刹车", "加速度", "大小", "空间", "内饰"],
+            [400, 500, 600, 800, 1000],
+            "#bd9312"
+          ),
+        },
+        {
+          name: "别克",
+          drawOpt: createSideSingleColumn(
+            ["空间", "长度", "高度", "舒适度", "内饰"],
+            [400, 500, 600, 800, 1000],
+            "#bd9312"
+          ),
+        },
+      ],
+    };
+  },
+  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);
+        getTopicPosAndTopicNeg0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let sourceData = [];
+            data.forEach( ele => {
+                let tagArr = [];
+                let valArr = [];
+                //ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
+                ele.value[1].value.forEach( e => {
+                    tagArr.push(e.key);
+                    valArr.push(e.value)
+                });
+                let o = {
+                    name: ele.key,
+                    drawOpt: createSideSingleColumn(tagArr,valArr,"#bd9312")
+                };
+                sourceData.push(o);
+            });
+            this.showData = sourceData;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .cpt-outter {
+  width: 100%;
+  height: 412px;
+  .cpt-inner {
     width: 100%;
-    height: 412px;
-    .cpt-inner {
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .cpt-item {
+      width: 100%;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
         width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .cpt-item {
-            width: 100%;
-            height: 100%;
-            .s1 {
-                padding-left: 16px;
-                display: block;
-                height: 40px;
-                line-height: 40px;
-                color:#fff;
-                font-size: 18px;
-            }
-            .d1 {
-                width: 100%;
-                height: calc(100% - 40px);
-            }
-        }
+        height: calc(100% - 40px);
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue

@@ -7,82 +7,119 @@
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
 -->
 <template>
-    <div class="cpt-outter">
-        <v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
-        <div class="cpt-inner">
-            <div class="cpt-item" v-for="(item,index) in list" :key="index">
-                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
-                <div class="d1">
-                    <v-echarts :opt="item.drawOpt"></v-echarts> 
-                </div>
-            </div>
+  <div class="cpt-outter">
+    <v-label-div
+      title="论坛正面话题对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cpt-inner">
+      <div class="cpt-item" v-for="(item, index) in showData" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+import { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
 export default {
-    name: "comparisonOfPositiveTopicsInTheForum",
-    data() {
-        return {
-           colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-          list: [
-              {
-                  name: '奥迪',
-                  drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '宝马',
-                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '奔驰',
-                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '吉利',
-                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '大众',
-                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '别克',
-                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              }
-          ] 
-        }
-    }
-}
+  name: "comparisonOfPositiveTopicsInTheForum",
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      showData: [],
+    };
+  },
+  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);
+        getTopicPosAndTopicNeg0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let sourceData = [];
+            data.forEach( ele => {
+                let tagArr = [];
+                let valArr = [];
+                //ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
+                ele.value[0].value.forEach( e => {
+                    tagArr.push(e.key);
+                    valArr.push(e.value)
+                });
+                let o = {
+                    name: ele.key,
+                    drawOpt: createSideSingleColumn(tagArr,valArr,"#3373CC")
+                };
+                sourceData.push(o);
+            });
+            this.showData = sourceData;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .cpt-outter {
+  width: 100%;
+  height: 412px;
+  .cpt-inner {
     width: 100%;
-    height: 412px;
-    .cpt-inner {
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .cpt-item {
+      width: 100%;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
         width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .cpt-item {
-            width: 100%;
-            height: 100%;
-            .s1 {
-                padding-left: 16px;
-                display: block;
-                height: 40px;
-                line-height: 40px;
-                color:#fff;
-                font-size: 18px;
-            }
-            .d1 {
-                width: 100%;
-                height: calc(100% - 40px);
-            }
-        }
+        height: calc(100% - 40px);
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue

@@ -7,32 +7,76 @@
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
 -->
 <template>
-    <div class="cotn-outter">
-        <v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-        <div class="cotn-inner">
-            <v-echarts :opt="opt"></v-echarts> 
-        </div>
+  <div class="cotn-outter">
+    <v-label-div
+      title="微博互动人数对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cotn-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "comparisonOfTheNumberOfWeiboInteractions",
-    data() {
-        return {
-           opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'],'#45a380')
-        }
-    }
-}
+  name: "comparisonOfTheNumberOfWeiboInteractions",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getInteractCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach((ele) => {
+              dx.push(ele.key);
+              ds.push(ele.value);
+            });
+            this.opt = createSingleColumnar(dx, ds);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
 .cotn-outter {
-    width: 628px;
-    height: 412px;
-    .cotn-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 628px;
+  height: 412px;
+  .cotn-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/BrandComparison/comparisonOfWeiboInformation/index.vue

@@ -7,33 +7,77 @@
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
 -->
 <template>
-    <div class="cowi-outter">
-       <v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-       <div class="cowi-inner">
-           <v-echarts :opt="opt"></v-echarts> 
-       </div>
+  <div class="cowi-outter">
+    <v-label-div
+      title="微博信息量对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cowi-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "comparisonOfWeiboInformation",
-    data() {
-        return {
-           opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'])
-        }
-    }
-}
+  name: "comparisonOfWeiboInformation",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getContrastCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach(ele => {
+                dx.push(ele.key);
+                ds.push(ele.value)
+            })
+            this.opt = createSingleColumnar(dx,ds);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .cowi-outter {
-    width: 628px;
-    height: 412px;
-    .cowi-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 628px;
+  height: 412px;
+  .cowi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/BrandComparison/forumTonalComparison/index.vue

@@ -7,70 +7,131 @@
  * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
 -->
 <template>
-    <div class="wtc-outter">
-         <v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-         </v-label-div>
-         <div class="wtc-d1">
-            <div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
-            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
-            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
-        </div>
-        <div class="wtc-inner">
-            <roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
-            <roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
-            <roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
-            <roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
-            <roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
-            <roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
-        </div>
+  <div class="wtc-outter">
+    <v-label-div
+      title="论坛调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wtc-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
     </div>
+    <div class="wtc-inner">
+      <roundata
+        v-for="(item,index) in dataSource"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></roundata>
+    </div>
+  </div>
 </template>
 
 <script>
+import { getAffectionsC } from "@/api/BrandComparison/BbsBrand.js";
 import roundata from "./roundata";
 export default {
-    name: "forumTonalComparison",
-    components: {
-       roundata 
-    }
-}
+  name: "forumTonalComparison",
+  components: {
+    roundata,
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: [],
+    };
+  },
+  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);
+        getAffectionsC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            this.dataSource = data;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wtc-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .wtc-d1 {
     width: 100%;
-    height: 460px;
-    margin-top: 16px;
-    .wtc-d1 {
-        width: 100%;
-        display: flex;
-        height: 36px;
-        justify-content: flex-start;
-        align-items: center;
-        .dd1 {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-        }
-        .s1 {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            background: #3373cc;
-        }
-        .s2 {
-            display: inline-block;
-            font-size: 12px;
-            color: #fff;
-            margin-left: 10px;
-        }
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
     }
-    .wtc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
     }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .wtc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
 }
 </style>

src/views/BrandComparison/forumTonalComparison/roundata/index.vue

@@ -27,10 +27,22 @@ export default {
             type: String,
             default: "",
         },
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+       data: {
+           handler(val) {
+              this.opt = createOpt(val) 
+           },
+           immediate: true
+       } 
     },
     data() {
         return {
-            opt: createOpt(),
+            //opt: createOpt(),
         };
     },
     methods: {

src/views/BrandComparison/forumTonalComparison/roundata/opt.js

@@ -7,7 +7,42 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+function createData(obj = {}) {
+   if (JSON.stringify(obj) === '{}') {
+      return;
+   }
+   let arr = [];
+   for (let key in obj) {
+      let color = "";
+      if (key === '正面') {
+         color = "#3373CC"
+      } else if (key === '负面') {
+         color = "#b38b14"
+      } else {
+         color = "#54BF93"
+      }
+      let o = {
+         value: obj[key],
+         name: key,
+         itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+               //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+               //给第一个设置0，第四个设置1，就是垂直渐变
+               offset: 0,
+               color: 'black'
+            }, {
+               offset: 1,
+               color: color
+            }])
+         }
+      }
+      arr.push(o)
+   }
+   return arr
+}
+
+export default function createOpt(obj={}) {
+    let data = createData(obj);
     return {
         series: [
             {
@@ -18,52 +53,23 @@ export default function createOpt() {
               label: {
                 show: false,
                 position: 'center',
-                lineHeight: 40
+                lineHeight: 28
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '20',
+                  fontSize: '18',
                   color: "#ffff",
                   fontWeight: 'bold',
                   formatter: function(p) {
-                      return `${p.data.name}\n25%\n${p.data.value}`
+                      return `${p.data.name}\n${p.percent}%\n${p.data.value}`
                   }
                 }
               },
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 2000, name: '正面', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-               
-                { value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-              ],
+              data: data,
             },
             {
                 name: 'Access From1',
@@ -78,37 +84,7 @@ export default function createOpt() {
                   show: false
                 },
                 center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                
-                  { value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-               
-                ],
+                data: data,
               }
           ]
     }

src/views/BrandComparison/keyMediaCommunicationComparison/index.vue

@@ -7,36 +7,61 @@
  * @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>
+  <div class="kmcc-outter">
+    <v-label-div title="重点媒体传播对比"> </v-label-div>
+    <div class="kmcc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import createOpt from "./opt";
+import { getSourceCount0528C } from "@/api/BrandComparison";
 export default {
-    name: "kmcc-outter",
-    data() {
-        return {
-            opt: createOpt()
-        }
+  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();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getSourceCount0528C(obj).then(() => {
+          //console.log(res);
+      })
     }
-}
+  },
+};
 </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>

src/views/BrandComparison/overallWordCloudComparison/index.vue

@@ -7,75 +7,124 @@
  * @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
 -->
 <template>
-    <div class="owcc-outter">
-        <v-label-div title="整体词云对比">
+  <div class="owcc-outter">
+    <v-label-div title="整体词云对比"> </v-label-div>
+    <div class="owcc-inner">
+      <div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
+        <v-label-div
+          :title="item.name"
+          :titleColor="colors[index]"
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+          <v-tab-group
+            :btns="['正面', '负面']"
+            @change="(n) => {handlerTab(n,item)}"
+          ></v-tab-group>
         </v-label-div>
-        <div class="owcc-inner">
-            <div class="owcc-item" v-for="(item,index) in list" :key="index">
-                <v-label-div :title="item.name" :titleColor="colors[index]" :showLine="false" :eStyle="{'border-style': 'none'}">
-                    <v-tab-group :btns="['正面', '负面']"></v-tab-group>
-                </v-label-div>
-                <div class="owcc-draw">
-                    <v-echarts :opt="opt"></v-echarts>
-                </div>
-            </div>
+        <div class="owcc-draw">
+          <v-echarts :opt="item.opt"></v-echarts>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt";
+import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
+import createWordCloud from "@/utils/gol/bubbleWord";
 export default {
-    name: "overallWordCloudComparison",
-    data() {
-        return {
-            opt: createOpt(),
-            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-            list: [
-                {
-                    name: "奥迪",
-                },
-                {
-                    name: "宝马",
-                },
-                {
-                    name: "奔驰",
-                },
-                {
-                    name: "吉利",
-                },
-                {
-                    name: "大众",
-                },
-                {
-                    name: "别克",
-                },
-            ],
-        };
+  name: "overallWordCloudComparison",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: []
+    };
+  },
+  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);
+        getPositiveAndNegative0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let arr = [];
+            data.forEach(ele => {
+                let obj = {
+                    name: ele.key,
+                    p: ele.value[0].value,
+                    s: ele.value[1].value,
+                    opt: createWordCloud(ele.value[0].value),
+                    tapIndex: 0
+                }
+                arr.push(obj);
+            })
+            this.dataSource = arr;
+
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    handlerTab(n,item) {
+       item.tapIndex = n;
+       if(n === 0) {
+           item.opt = createWordCloud(item.p)
+       } else {
+           item.opt = createWordCloud(item.s)
+       }
+    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .owcc-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .owcc-inner {
     width: 100%;
-    height: 460px;
-    border: 2px solid #0f2a4d;
-    margin-top: 16px;
-    .owcc-inner {
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .owcc-item {
+      width: 314px;
+      height: 412px;
+      margin-top: 5px;
+      .owcc-draw {
         width: 100%;
         height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .owcc-item {
-            width: 314px;
-            height: 412px;
-            margin-top: 5px;
-            .owcc-draw {
-                width: 100%;
-                height: calc(100% - 48px);
-            }
-        }
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue

@@ -9,34 +9,34 @@
 <template>
     <div class="saco-outter">
         <v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
-        <div class="saco-item" v-for="(item,index) in list" :key="index">
-            <span class="s1">{{item.name}}</span>
+        <div class="saco-item" v-for="(item,index) in sourceData" :key="index">
+            <span class="s1">{{item.key}}</span>
             <div class="d1">
                 <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
                 <div class="d1-d1">
                     <span class="ss1">论坛信息量</span>
-                    <span class="ss2">{{item.a}}</span>
+                    <span class="ss2">{{item.Count}}</span>
                 </div>
             </div>
             <div class="d1">
                 <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
                 <div class="d1-d1">
                     <span class="ss1">互动人数</span>
-                    <span class="ss2">{{item.b}}</span>
+                    <span class="ss2">{{item.commentsSum}}</span>
                 </div>
             </div>
             <div class="d1">
                 <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
                 <div class="d1-d1">
                     <span class="ss1">论坛主贴量</span>
-                    <span class="ss2">{{item.c}}</span>
+                    <span class="ss2">{{item.zhutieCount}}</span>
                 </div>
             </div>
             <div class="d1">
                 <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
                 <div class="d1-d1">
                     <span class="ss1">论坛评论量</span>
-                    <span class="ss2">{{item.d}}</span>
+                    <span class="ss2">{{item.interactCount}}</span>
                 </div>
             </div>
         </div>
@@ -44,54 +44,43 @@
 </template>
 
 <script>
+import {getCount0528C} from "@/api/BrandComparison/BbsBrand.js"
 export default {
     name: "summaryAndComparisonOfForumInformation",
     data() {
         return {
-            list: [
-                {
-                    name: '奥迪',
-                    a: 5869,
-                    b: 2345,
-                    c: 45678,
-                    d: 12345
-                },
-                {
-                    name: '宝马',
-                    a: 5869,
-                    b: 2345,
-                    c: 45678,
-                    d: 12345
-                },
-                {
-                    name: '奔驰',
-                    a: 5869,
-                    b: 2345,
-                    c: 45678,
-                    d: 12345
-                },
-                {
-                    name: '吉利',
-                    a: 5869,
-                    b: 2345,
-                    c: 45678,
-                    d: 12345
-                },
-                {
-                    name: '大众',
-                    a: 5869,
-                    b: 2345,
-                    c: 45678,
-                    d: 12345
-                },
-                {
-                    name: '别克',
-                    a: 5869,
-                    b: 2345,
-                    c: 45678,
-                    d: 12345
-                }
-            ]
+            form: {
+                token: "",
+                sBrand: ""
+            },
+            sourceData: [],
+        }
+    },
+    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);
+            getCount0528C(obj).then((res) => {
+            let data = res.data || [];
+            this.sourceData = data;
+            resolve(data)
+            }).catch(() => {
+                reject(false)
+            });
+        });
         }
     }
 }

src/views/BrandComparison/userAreaDistribution/index.vue

@@ -7,53 +7,139 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
 -->
 <template>
-    <div class="wua-outter">
-      <v-label-div title="用户区域分布" :showLine="false" :eStyle="{'border-style': 'none'}">
-          <v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
-      </v-label-div>
-      <div class="wua-inner">
-          <div class="d1">
-            <v-echarts :opt="opt1"></v-echarts>
-          </div>
-          <div class="d2">
-             <v-echars-map :opt="opt2"></v-echars-map> 
-          </div>
+  <div class="wua-outter">
+    <v-label-div
+      title="用户区域分布"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group :btns="this.brandArr" @change="handlerTab"></v-tab-group>
+    </v-label-div>
+    <div class="wua-inner">
+      <div class="d1">
+        <v-echarts :opt="opt1"></v-echarts>
+      </div>
+      <div class="d2">
+        <v-echars-map :opt="opt2"></v-echars-map>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
-import createOptD1 from "./opt1"
-import createOptD2 from './opt2'
+import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
 export default {
-    name: "userAreaDistribution",
-    data() {
-        return {
-            opt1: createOptD1(),
-            opt2: createOptD2()
-        }
-    }
-}
+  name: "userAreaDistribution",
+  data() {
+    return {
+      opt1: {},
+      opt2: {},
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      dataSource: [],
+      brandArr: [],
+    };
+  },
+  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();
+      Promise.all([this.getData()]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+      });
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getRegionWeiBoC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            //dx省份 ds数据 dm省份和数据的对象数组
+            let mapArr = [];
+            let brandList = [];
+            data.forEach((ele) => {
+              let dx = [];
+              let ds = [];
+              let dm = this.toArr(ele.Data);
+              dm.forEach((e) => {
+                //处理直辖市
+                e.name = e.name.replace('省', '');
+                dx.push(e.name);
+                ds.push(e.value);
+              });
+              let o = {
+                name: ele.Name,
+                dx: dx,
+                ds: ds,
+                dm: dm,
+                //opt1: createOptD1(),
+                //opt2: createOptD2(),
+                //tapIndex: 0
+              };
+              brandList.push(ele.Name);
+              mapArr.push(o);
+            });
+            this.dataSource = mapArr;
+            this.brandArr = brandList;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          name: key,
+          value: obj[key] * 1,
+        };
+        arr.push(o);
+      }
+      return arr;
+    },
+    // 切换数据
+    handlerTab(n) {
+      this.opt1 = createOptD1(this.dataSource[n].dx, this.dataSource[n].ds);
+      this.opt2 = createOptD2(this.dataSource[n].dm);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wua-outter {
-    width: 944px;
-    height: 412px;
-    .wua-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .d1 {
-          width: 479px;
-          height: 100%;  
-        }
-        .d2 {
-            width: 465px;
-            height: 100%;
-            margin-left: 16px;
-        }
+  width: 944px;
+  height: 412px;
+  .wua-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 479px;
+      height: 100%;
+    }
+    .d2 {
+      width: 465px;
+      height: 100%;
+      margin-left: 16px;
     }
+  }
 }
 </style>

src/views/BrandComparison/userAreaDistribution/opt1.js

@@ -9,7 +9,7 @@
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
  */
 import * as echarts from "echarts";
-export default function createOptD1() {
+export default function createOptD1(dx = [],ds = []) {
     return {
         grid: {
             left: '4%',
@@ -45,7 +45,7 @@ export default function createOptD1() {
         },
         yAxis: {
             type: 'category',
-            data: ['山西省',  '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
+            data: dx,
             axisTick: {
                 show: false,
             },
@@ -55,13 +55,14 @@ export default function createOptD1() {
                     color: "#fff",
                 },
             },
+            inverse: true
         },
         series: [
             {
                 name: '2011',
                 type: 'bar',
                 barWidth: 24,
-                data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
+                data: ds,
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                     offset: 0,
                     color: '#010B19'

src/views/BrandComparison/userAreaDistribution/opt2.js

@@ -15,7 +15,7 @@ for (var i = 0; i < provArr.length; i++) {
     var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
     ini_data.push(str2);
 }
-export default function createOptD2() {
+export default function createOptD2(dm = []) {
     return {
         tooltip: {
             trigger: "item",
@@ -59,7 +59,7 @@ export default function createOptD2() {
         },
         series: [
             {
-                name: "微博区域",
+                name: "用户区域",
                 type: "map",
                 mapType: "china",
                 roam: false,
@@ -95,39 +95,7 @@ export default function createOptD2() {
                 //         areaColor: '#3edffe'
                 //     }
                 // },
-                data: [
-                    {
-                        name: "河北省",
-                        value: 1000,
-                        // selected: true,
-                    },
-                    {
-                        name: "浙江省",
-                        value: 1100,
-                        // selected: true
-                    },
-                    {
-                        name: "山东省",
-                        value: 1200,
-                        // selected: true
-                    },
-                    {
-                        name: "山西省",
-                        value: 1300,
-                        // selected: true
-                    },
-                    {
-                        name: "上海市",
-                        value: 1400,
-                        // selected: true
-                    },
-                    {
-                        name: "江苏省",
-                        value: 1500,
-                        // selected: true
-                    }
-                ]
-
+                data: dm
             }
         ]
     }

src/views/BrandComparison/weiboBigVComparison/index.vue

@@ -7,32 +7,70 @@
  * @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
 -->
 <template>
-    <div class="wbc-outter">
-        <v-label-div title="微博大V对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-        <div class="wbc-inner">
-            <v-echarts :opt="opt"></v-echarts> 
-        </div>
+  <div class="wbc-outter">
+    <v-label-div
+      title="微博大V对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="wbc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import createOpt from "./opt";
 export default {
-    name: "weiboBigVComparison",
-    data() {
-        return {
-            opt: createOpt()
-        }
-    }
-}
+  name: "weiboBigVComparison",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getBoauthen0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            this.opt = createOpt(data);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
 .wbc-outter {
-    width: 630px;
-    height: 412px;
-    .wbc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 630px;
+  height: 412px;
+  .wbc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/BrandComparison/weiboBigVComparison/opt.js

@@ -6,61 +6,8 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
-    return {
-        grid: {
-            left: 16,
-            right: 16,
-            bottom: 16,
-            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
-        },
-        xAxis: {
-            type: 'category',
-            axisTick: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            data: ['名人', '媒体', '企业', '政府', '个人大v']
-        },
-        yAxis: {
-            type: 'value',
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            splitLine: {
-                lineStyle: {
-                    type: "dashed", // y轴分割线类型
-                    color: "#012b4b",
-                },
-            },
-        },
-        series: [
+/*
+series: [
             {
               name: '奥迪',
               type: 'bar',
@@ -71,57 +18,82 @@ export default function createOpt() {
               },
               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]
-              }
-          ]
-    }
+*/
+function createData(dataList = []) {
+  let arr = [];
+  dataList.forEach(ele => {
+    let o = {
+      name: ele.key,
+      type: 'bar',
+      stack: 'total',
+      barWidth: 24,
+      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]
+    };
+    arr.push(o);
+  })
+  return arr;
+}
+
+export default function createOpt(dataList = []) {
+  let info = createData(dataList);
+  return {
+    grid: {
+      left: 16,
+      right: 16,
+      bottom: 16,
+      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
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: ['名人', '媒体', '企业', '政府', '个人大v']
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: info
+  }
 
 }

src/views/BrandComparison/weiboContentDirectionComparison/index.vue

@@ -7,235 +7,131 @@
  * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
 -->
 <template>
-    <div class="bcm-outter">
-        <v-label-div title="微博内容方向对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-        </v-label-div>
-        <div class="bcm-inner">
-            <div class="bcm-item" v-for="(item,index) in list" :key="index">
-                <span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
-                <v-ranking-bcm  v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
-            </div>
-        </div>
+  <div class="bcm-outter">
+    <v-label-div
+      title="微博内容方向对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="bcm-inner">
+      <div class="bcm-item" v-for="(item, index) in sourceData" :key="index">
+        <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+        <v-ranking-bcm
+          v-for="(it, n) in item.value"
+          :key="n"
+          :label="it.key"
+          :num="it.num"
+          :val="it.value"
+        ></v-ranking-bcm>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import vRankingBcm from "./v-ranking-bcm"
+import { getDirect0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import vRankingBcm from "./v-ranking-bcm";
 export default {
-    name: "weiboContentDirectionComparison",
-    components: {
-       vRankingBcm 
+  name: "weiboContentDirectionComparison",
+  components: {
+    vRankingBcm,
+  },
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      sourceData: [],
+    };
+  },
+  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();
     },
-    data() {
-        return {
-            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-            list: [
-                {
-                    name: '奥迪',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '宝马',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '奔驰',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                 {
-                    name: '吉利',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                 {
-                    name: '大众',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '别克',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                }
-            ]
-        }
-    }
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getDirect0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let showData = [];
+            data.forEach((e) => {
+              //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
+              let sortedArr = e.value.sort(this.compare("value")).slice(0, 5);
+              let obj = {
+                key: e.key,
+                value: sortedArr,
+              };
+              showData.push(obj);
+            });
+            showData.forEach((ele) => {
+              //给数据添加排名
+              for (let index = 0; index < ele.value.length; index++) {
+                ele.value[index].num = index + 1;
+              }
+            });
+            this.sourceData = showData;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 根据对象的属性排序 v2-v1为顺序，v1-v2为倒序
+    compare(property) {
+      return function (a, b) {
+        let value1 = a[property];
+        let value2 = b[property];
+        return value2 - value1;
+      };
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .bcm-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .bcm-inner {
     width: 100%;
-    height: 460px;
-    margin-top: 16px;
-    .bcm-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .bcm-item {
-            width: 282px;
-            margin-left: 27px;
-            .ss1 {
-                display: block;
-                font-size: 18px;
-                color: #fff;
-                font-weight: 500;
-                padding-top: 14px;
-            }
-        }
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .bcm-item {
+      width: 282px;
+      margin-left: 27px;
+      .ss1 {
+        display: block;
+        font-size: 18px;
+        color: #fff;
+        font-weight: 500;
+        padding-top: 14px;
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/weiboTuneComparison/index.vue

@@ -7,70 +7,125 @@
  * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
 -->
 <template>
-    <div class="wtc-outter">
-         <v-label-div title="微博调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-         </v-label-div>
-         <div class="wtc-d1">
-            <div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
-            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
-            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
-        </div>
-        <div class="wtc-inner">
-            <wbRoundata title="奥迪" color="#3373CC" style="margin-left: 46px"></wbRoundata>
-            <wbRoundata title="宝马" color="#63AECC" style="margin-left: 110px"></wbRoundata>
-            <wbRoundata title="奔驰" color="#54BF93" style="margin-left: 110px"></wbRoundata>
-            <wbRoundata title="吉利" color="#CC9D12" style="margin-left: 110px"></wbRoundata>
-            <wbRoundata title="大众" color="#CC7733" style="margin-left: 110px"></wbRoundata>
-            <wbRoundata title="别克" color="#CC5B41" style="margin-left: 110px"></wbRoundata>
-        </div>
+  <div class="wtc-outter">
+    <v-label-div
+      title="微博调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wtc-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
     </div>
+    <div class="wtc-inner">
+      <wbRoundata
+        v-for="(item,index) in dataSource"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></wbRoundata>
+    </div>
+  </div>
 </template>
 
 <script>
+import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
 import wbRoundata from "./wbRoundata";
 export default {
-    name: "weiboTuneComparison",
-    components: {
-       wbRoundata 
-    }
-}
+  name: "weiboTuneComparison",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
+      dataSource: []
+    };
+  },
+  components: {
+    wbRoundata,
+  },
+
+  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);
+        getAffectionsC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            this.dataSource = data;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wtc-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .wtc-d1 {
     width: 100%;
-    height: 460px;
-    margin-top: 16px;
-    .wtc-d1 {
-        width: 100%;
-        display: flex;
-        height: 36px;
-        justify-content: flex-start;
-        align-items: center;
-        .dd1 {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-        }
-        .s1 {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            background: #3373cc;
-        }
-        .s2 {
-            display: inline-block;
-            font-size: 12px;
-            color: #fff;
-            margin-left: 10px;
-        }
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
     }
-    .wtc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
     }
+  }
+  .wtc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
 }
 </style>

src/views/BrandComparison/weiboTuneComparison/wbRoundata/index.vue

@@ -27,10 +27,22 @@ export default {
             type: String,
             default: "",
         },
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+       data: {
+           handler(val) {
+              this.opt = createOpt(val) 
+           },
+           immediate: true
+       } 
     },
     data() {
         return {
-            opt: createOpt(),
+            //opt: createOpt(),
         };
     },
     methods: {

src/views/BrandComparison/weiboTuneComparison/wbRoundata/opt.js

@@ -7,109 +7,84 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
-    return {
-        series: [
-            {
-              name: 'Access From0',
-              type: 'pie',
-              radius: ['70%', '92%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center',
-                lineHeight: 40
-              },
-              emphasis: {
-                label: {
+function createData(obj = {}) {
+   if (JSON.stringify(obj) === '{}') {
+      return;
+   }
+   let arr = [];
+   for (let key in obj) {
+      let color = "";
+      if (key === '正面') {
+         color = "#3373CC"
+      } else if (key === '负面') {
+         color = "#b38b14"
+      } else {
+         color = "#54BF93"
+      }
+      let o = {
+         value: obj[key],
+         name: key,
+         itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+               //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+               //给第一个设置0，第四个设置1，就是垂直渐变
+               offset: 0,
+               color: 'black'
+            }, {
+               offset: 1,
+               color: color
+            }])
+         }
+      }
+      arr.push(o)
+   }
+   return arr
+}
+export default function createOpt(obj={}) {
+   let data = createData(obj);
+   return {
+      series: [
+         {
+            name: 'Access From0',
+            type: 'pie',
+            radius: ['70%', '92%'],
+            avoidLabelOverlap: false,
+            label: {
+               show: false,
+               position: 'center',
+               lineHeight: 28
+            },
+            emphasis: {
+               label: {
                   show: true,
-                  fontSize: '20',
+                  fontSize: '18',
                   color: "#ffff",
                   fontWeight: 'bold',
-                  formatter: function(p) {
-                      return `${p.data.name}\n25%\n${p.data.value}`
+                  formatter: function (p) {
+                     return `${p.data.name}\n${p.percent}%\n${p.data.value}`
                   }
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: 2000, name: '正面', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-               
-                { value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-              ],
+               }
+            },
+            labelLine: {
+               show: false
+            },
+            data: data
+         },
+         {
+            name: 'Access From1',
+            type: 'pie',
+            radius: ['96%', '100%'],
+            avoidLabelOverlap: false,
+            label: {
+               show: false,
+               position: 'center'
+            },
+            labelLine: {
+               show: false
             },
-            {
-                name: 'Access From1',
-                type: 'pie',
-                radius: ['96%', '100%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                    position: 'center'
-                  },
-                labelLine: {
-                  show: false
-                },
-                center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                
-                  { value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-               
-                ],
-              }
-          ]
-    }
+            center: ['50%', '50%'],//边框位置
+            data: data
+         }
+      ]
+   }
 }

src/views/BrandComparison/weiboUserPortrait/index.vue

@@ -7,75 +7,190 @@
  * @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
 -->
 <template>
-    <div class="wup-outter">
-        <v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
-            <v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
-        </v-label-div>
-        <div class="wup-inner">
-            <div class="d1">
-                <div class="dd1">
-                    <v-echarts :opt="opt1"></v-echarts>
-                </div>
-                <div class="dd2">
-                    <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                    <v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
-                </div>
-            </div>
-            <div class="d1">
-                <div class="dd1">
-                    <v-echarts :opt="opt2">
-                        <v-echarts :opt="opt2"></v-echarts>
-                    </v-echarts>
-                </div>
-                <div class="dd2" style="margin-right: 16px">
-                    <v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                    <v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
-                </div>
-            </div>
+  <div class="wup-outter">
+    <v-label-div
+      title="微博用户画像"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group
+        :btns="this.brandArr"
+        @change="handlerTab"
+      ></v-tab-group>
+    </v-label-div>
+    <div class="wup-inner">
+      <div class="d1">
+        <div class="dd1">
+          <v-echarts :opt="opt1"></v-echarts>
         </div>
+        <div class="dd2">
+          <v-label-ctx v-for="(item,index) in showSexData " 
+            :key="index"
+            :label="item.key"
+            :cont="item.value"
+            :percentage="((item.value / totalSexData) * 100).toFixed(2) + '%'"
+            :color="colors[index]"
+            :eStyle="{ height: '7.35rem' }"
+          ></v-label-ctx>
+        </div>
+      </div>
+      <div class="d1">
+        <div class="dd1">
+          <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="dd2" style="margin-right: 16px">
+          <v-label-ctx v-for="(item,index) in showAttestData " 
+            :key="index"
+            :label="item.key"
+            :cont="item.value"
+            :percentage="((item.value / totalAttestData) * 100).toFixed(2) + '%'"
+            :color="colors[index]"
+            :eStyle="{ height: '7.35rem' }"
+          ></v-label-ctx>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+import { getSexMergeWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
 import createOpt1 from "./opt1";
 import createOpt2 from "./opt2";
 export default {
-    name: "weiboUserPortrait",
-    data() {
-        return {
-            opt1: createOpt1(),
-            opt2: createOpt2(),
+  name: "weiboUserPortrait",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      opt1: {},
+      opt2: {},
+      sourceData: [],
+      showSexData: [],
+      totalSexData: 0,
+      totalAttestData: 0,
+      showAttestData: [],
+      brandArr: [],
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
+    };
+  },
+  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);
+        getSexMergeWeiBoC(obj)
+          .then((res) => {
+            let data = res.data;
+            let brandList = [];
+            let dataArr = []; //数组，传给createOpt方法
+            data.forEach( e => {
+                let o = {
+                    name: e.Name,
+                    sexData: this.toArr(e.Data.sex), //性别数据 type=arr
+                    attestData: this.toArr(e.Data.attestation) //认证数据 type=arr
+                }
+                brandList.push(e.Name); //获取品牌名
+                dataArr.push(o);
+            })
+            this.brandArr = brandList;
+            this.sourceData = dataArr;
+            this.doVal(0);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          key: key,
+          value: obj[key],
         };
+        arr.push(o);
+      }
+      return arr;
+    },
+    // 给页面变化赋值
+    doVal(index) {
+      this.showSexData = this.sourceData[index].sexData;
+      this.showAttestData = this.sourceData[index].attestData;
+      this.totalSexData = this.showSexData[0].value*1 + this.showSexData[1].value*1 + this.showSexData[2].value*1;
+      this.totalAttestData = this.showAttestData[0].value*1+this.showAttestData[1].value*1+this.showAttestData[2].value*1;
+      this.opt1 = createOpt1(this.showSexData, this.colors);
+      this.opt2 = createOpt2(this.showAttestData, this.colors);
+    },
+    // 切换数据
+    handlerTab(n) {
+      this.doVal(n)
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .wup-outter {
-    width: 944px;
-    height: 412px;
-    .wup-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .d1 {
-            width: 50%;
-            height: 100%;
-            display: flex;
-            justify-content: flex-start;
-            overflow: hidden;
-            .dd1 {
-                width: 260px;
-                height: 100%;
-            }
-            .dd2 {
-                width: 240px;
-                height: 100%;
-            }
-        }
+  width: 944px;
+  height: 412px;
+  .wup-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      overflow: hidden;
+      .dd1 {
+        width: 260px;
+        height: 100%;
+      }
+      .dd2 {
+        width: 240px;
+        height: 100%;
+      }
     }
+  }
 }
 </style>

src/views/BrandComparison/weiboUserPortrait/opt1.js

@@ -6,8 +6,33 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
  */
+
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value, 
+      name: ele.key, 
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+          //给第一个设置0，第四个设置1，就是垂直渐变
+          offset: 0,
+          color: 'black'
+        }, {
+          offset: 1,
+          color: colors[index]
+        }])
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+
 import * as echarts from "echarts";
-export default function createOpt1() {
+export default function createOpt1(ds = [], color = []) {
+    const data = createData(ds, color);
     return {
         series: [
             {
@@ -24,46 +49,18 @@ export default function createOpt1() {
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '22',
                   color: "#ffff",
+                  fontWeight: 'bold',
                   formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
+                    return p.data.name + '\n' + p.percent + '%' + '\n' + p.data.value; 
                   },
                 }
               },
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 2200, name: '男性', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-              ],
-
+              data: data,
             },
             {
                 name: 'Access From1',
@@ -78,35 +75,7 @@ export default function createOpt1() {
                   show: false
                 },
                 center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                ],
+                data: data,
   
               }
           ]

src/views/BrandComparison/weiboUserPortrait/opt2.js

@@ -6,109 +6,78 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
  */
+
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value, 
+      name: ele.key, 
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+          //给第一个设置0，第四个设置1，就是垂直渐变
+          offset: 0,
+          color: 'black'
+        }, {
+          offset: 1,
+          color: colors[index]
+        }])
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+
 import * as echarts from "echarts";
-export default function createOpt2() {
-    return {
-        series: [
-            {
-              name: 'Access From0',
-              type: 'pie',
-              radius: ['63%', '77%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center',
-                fontSize: '40',
-                color: "#ffff",
+export default function createOpt2(ds = [], color = []) {
+  const data = createData(ds, color);
+  return {
+    series: [
+      {
+        name: 'Access From0',
+        type: 'pie',
+        radius: ['63%', '77%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+          fontSize: '40',
+          color: "#ffff",
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '22',
+            color: "#ffff",
+            fontWeight: 'bold',
+            formatter: (p) => {
+              return p.data.name + '\n' + p.percent + '%' + '\n' + p.data.value;
             },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: '40',
-                  color: "#ffff",
-                  formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
-                  },
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: 2200, name: '已认证', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                { value: 2200, name: '未认证', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-              ],
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data,
 
-            },
-            {
-                name: 'Access From1',
-                type: 'pie',
-                radius: ['80%', '84%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                    position: 'center'
-                  },
-                labelLine: {
-                  show: false
-                },
-                center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#3373CC'
-                 }])} },
-                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#CC9D12'
-                 }])} },
-                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                ],
-  
-              }
-          ]
-    }
+      },
+      {
+        name: 'Access From1',
+        type: 'pie',
+        radius: ['80%', '84%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        center: ['50%', '50%'],//边框位置
+        data: data,
+      }
+    ]
+  }
 }

src/views/BrandInsight/forumHotTopicDirection/v-ranking-fhtd/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 16:44:08
- * @LastEditTime: 2021-10-12 17:35:07
+ * @LastEditTime: 2021-11-09 16:25:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-ranking/index.vue
@@ -134,7 +134,7 @@ export default {
     text-align: center;
     line-height: 48px;
     .s1 {
-      color: #ffffff;
+      color: #99a2ad;
       font-size: 16px;
       line-height: 48px;
       font-family: Bebas;

src/views/ForumDetails/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-13 15:17:14
- * @LastEditTime: 2021-11-09 13:26:17
+ * @LastEditTime: 2021-11-09 14:52:21
  * @LastEditors: Please set LastEditors
  * @Description: 论坛洞察详情
  * @FilePath: /data-show/src/views/ForumDetails/index.vue
@@ -50,7 +50,7 @@ export default {
             load1: false,
             load2: false,
             opt1: {},
-            opt2: createOptD2(),
+            opt2: {},
             msg: "",
             form: {
                 sBrand: "",

src/views/ModelComparison/BrandBeginComparte.vue

@@ -0,0 +1,160 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 17:12:47
+ * @LastEditTime: 2021-11-09 18:24:47
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Editiv
+ * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="mbc-outter">
+            <brandCompateHeader ref="modelRef" @del="handlerDel"></brandCompateHeader>
+            <div class="mbc-inner">
+                <v-label-div title="车型推荐">
+                </v-label-div>
+                <div class="mbc-dd">
+                    <ul class="mb-ul">
+                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item.seriesname}}</li>
+                    </ul>
+                    <div style="clear: both"></div>
+                </div>
+            </div>
+            <div class="beCpm-footer" @click="handlerSubmit">
+                开始对比
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getRecommendSeries} from "@/api/comm"
+import brandCompateHeader from "./brandCompateHeader";
+export default {
+    name: "BrandBeginComparte",
+    components: {
+        brandCompateHeader,
+    },
+    inject: ['reload'],
+    data() {
+        return {
+            form: {
+                token: ""
+            },
+            chooseArr: [null, null, null, null, null, null],
+            models: [
+            ],
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
+    methods: {
+        // 选择默认的车型
+        handlerModel(row) {
+            for(let i = 0; i < this.chooseArr.length; i++) {
+                if(!this.chooseArr[i]) {
+                    this.chooseArr[i] = row;
+                    let obj = this.$refs.modelRef.list[i]
+                    obj.brand = row.brandname;
+                    obj.model = row.seriesname;
+                    obj.isDel = true;
+                    return;
+                }
+            }
+            
+        },
+        // 获取推荐车型
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getRecommendSeries(obj).then(res => {
+                let data = res.data || [];
+                this.models = data;
+            })
+        },
+        // 删除
+        handlerDel(n) {
+            this.chooseArr[n] = null;
+        },
+        // 开始比对
+        handlerSubmit() {
+           let arr = this.$refs.modelRef.list || [];
+           let filterArr = arr.filter(ele => {
+              return ele.brand && ele.model
+           });
+           if(filterArr.length < 2) {
+                this.$message.warning('至少2个车型进行对比');
+                return;
+           }
+           this.setMComparison(filterArr);
+           this.reload()
+        }
+       
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mbc-outter {
+    width: 100%;
+    padding: 0px 16px 16px 16px;
+}
+.mbc-inner {
+    width: 100%;
+    height: 488px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .mbc-dd {
+        width: 100%;
+        height: calc(100% - 48px);
+        .mb-ul {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            li {
+                float: left;
+                width: 295px;
+                height: 89px;
+                background-color: #0f2b47;
+                margin-left: 16px;
+                margin-top: 16px;
+                color: #fff;
+                text-align: center;
+                border-radius: 2px;
+                border: 1px solid transparent;
+                line-height: 89px;
+                font-size: 20px;
+                font-weight: 500;
+                cursor: pointer;
+                &:hover {
+                    border: 1px solid #0058e6;
+                }
+            }
+            .liActive {
+                color: #0058e6;
+                border: 1px solid #0058e6;
+            }
+        }
+    }
+}
+.beCpm-footer {
+    position: relative;
+    width: 354px;
+    height: 64px;
+    background-image: url("../../assets/images/login/img_dlan_nor.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%);
+    cursor: pointer;
+    color: #63aecc;
+    font-size: 24px;
+    text-align: center;
+    line-height: 64px;
+    margin-top: 16px;
+}
+</style>

src/views/ModelComparison/BrandComparison.vue

@@ -0,0 +1,203 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-05 13:49:05
+ * @LastEditTime: 2021-11-09 18:48:33
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
+-->
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 10:39:43
+ * @LastEditTime: 2021-11-05 13:25:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/index.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="bc-outter">
+            <brandCompateHeader :data="getMComparison" @change="handlerChangeBrand"></brandCompateHeader>
+            <div class="bc-d2">
+                <informationTrend></informationTrend>
+                <overallInformation></overallInformation>
+                <overallNumberOfInteractions></overallNumberOfInteractions>
+            </div>
+            <brandTonalDistribution></brandTonalDistribution>
+            <div class="bc-d3">
+                <channelDistribution></channelDistribution>
+                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
+            </div>
+            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
+            <overallWordCloudComparison></overallWordCloudComparison>
+            <brandEventComparison></brandEventComparison>
+            <div class="bc-d4">
+                <v-label-div title="品牌微博对比"></v-label-div>
+                <div class="bc-d4-d1">
+                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
+                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
+                    <weiboBigVComparison></weiboBigVComparison>
+                </div>
+                <weiboTuneComparison></weiboTuneComparison>
+                <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                <div class="bc-d4-d2">
+                    <userAreaDistribution></userAreaDistribution>
+                    <weiboUserPortrait></weiboUserPortrait>
+                </div>
+            </div>
+            <div class="bc-d5">
+                <v-label-div title="品牌论坛对比"></v-label-div>
+                <div class="bc-d5-dd1">
+                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
+                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                </div>
+                 <forumTonalComparison></forumTonalComparison>
+                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
+                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+            </div>
+            <div class="bc-d6">
+               <v-label-div title="品牌尾翼对比"></v-label-div> 
+                <div class="bc-d6-dd1">
+                    <brandRearWingComparison></brandRearWingComparison>
+                    <informationVolumeByChannel></informationVolumeByChannel>
+                </div>
+                <tailTOPMedia></tailTOPMedia>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import informationTrend from "./informationTrend";
+import overallInformation from "./overallInformation";
+import overallNumberOfInteractions from "./overallNumberOfInteractions";
+import brandTonalDistribution from "./brandTonalDistribution";
+import channelDistribution from "./channelDistribution";
+import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
+import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
+import overallWordCloudComparison from "./overallWordCloudComparison";
+import brandEventComparison from "./brandEventComparison";
+import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
+import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
+import weiboBigVComparison from "./weiboBigVComparison";
+import weiboTuneComparison from "./weiboTuneComparison";
+import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
+import userAreaDistribution from "./userAreaDistribution";
+import weiboUserPortrait from "./weiboUserPortrait";
+import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
+import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
+import forumTonalComparison from "./forumTonalComparison"
+import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
+import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
+import brandRearWingComparison from "./brandRearWingComparison"
+import informationVolumeByChannel from "./informationVolumeByChannel"
+import tailTOPMedia from "./tailTOPMedia"
+import brandCompateHeader from "./brandCompateHeader"
+export default {
+    name: "brandComparison",
+    inject: ['reload'],
+    components: {
+        informationTrend, // 信息量趋势
+        overallInformation, // 整体信息量
+        overallNumberOfInteractions, // 整体互动人数
+        brandTonalDistribution, // 品牌调性分布
+        channelDistribution, // 渠道分布
+        keyMediaCommunicationComparison, // 重点媒体传播对比
+        brandCommunicationTOPMedia, // 品牌传播TOP媒体
+        overallWordCloudComparison, // 整体词云对比
+        brandEventComparison, //品牌事件对比
+        comparisonOfWeiboInformation, // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
+        weiboBigVComparison, // 微博大V对比
+        weiboTuneComparison, // 微博调性对比
+        weiboContentDirectionComparison, // 微博内容方向对比
+        userAreaDistribution, //用户区域分布
+        weiboUserPortrait, // 微博用户画像
+        summaryAndComparisonOfForumInformation, // 论坛信息概括对比
+        comparisonOfForumPostingTrends, // 论坛发帖趋势对比
+        forumTonalComparison, // 论坛调性对比
+        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
+        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
+        brandRearWingComparison, // 尾翼趋势对比
+        informationVolumeByChannel, // 分渠道信息量
+        tailTOPMedia, // 尾翼TOP媒体
+        brandCompateHeader // 选择品牌
+        
+    },
+    data() {
+        return {
+            
+        };	
+    },
+    beforeMount() {
+        console.log('请等待')
+    },
+    methods: {
+        handlerChangeBrand(arr) {
+            this.setMComparison(arr);
+            this.reload()
+        }
+       
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.bc-outter {
+    padding: 0px 16px 16px 16px;
+}
+
+.bc-d2 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d3 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d4 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d4-d1 {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .bc-d4-d2 {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+.bc-d5 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d5-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+.bc-d6 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d6-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+</style>
+

src/views/ModelComparison/brandCommunicationTOPMedia/index.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-10-15 16:52:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+  <div class="bcm-outter">
+    <v-label-div title="品牌传播TOP媒体"> </v-label-div>
+    <div class="bcm-inner">
+      <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
+        <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+        <v-ranking-bcm
+          v-for="(it, n) in item.value"
+          :key="n"
+          :label="it.key"
+          :num="it.num"
+          :val="it.value"
+        ></v-ranking-bcm>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getSourceTopCount0528C } from "@/api/BrandComparison";
+import vRankingBcm from "./v-ranking-bcm";
+export default {
+  name: "brandCommunicationTOPMedia",
+  components: {
+    vRankingBcm,
+  },
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      arrList:[],
+    };
+  },
+  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);
+        getSourceTopCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            data.forEach(ele => {
+                for(let index = 0 ; index<ele.value.length;index++){
+                    ele.value[index].num = index + 1;
+                }
+            });
+            this.arrList = data;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bcm-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .bcm-item {
+      width: 282px;
+      margin-left: 27px;
+      .ss1 {
+        display: block;
+        font-size: 18px;
+        color: #fff;
+        font-weight: 500;
+        padding-top: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/ModelComparison/brandCommunicationTOPMedia/v-ranking-bcm/index.vue

@@ -0,0 +1,232 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-10-15 16:51:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">传播量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-bcm",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 281px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 14px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 40px;
+    margin-top: 14px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 30px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      display: flex;
+      justify-content: flex-start;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+          margin-left: 10px;
+      }
+  }
+  .v-r-left {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 40px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>

src/views/ModelComparison/brandCompateHeader/index.vue

@@ -0,0 +1,247 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 11:54:08
+ * @LastEditTime: 2021-11-09 18:23:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
+-->
+<template>
+    <div class="mccm-outter">
+        <v-label-div title="切换车型">
+            <v-btn @click="goback">返回洞察详情</v-btn>
+        </v-label-div>
+        <div class="mccm-inner">
+            <template v-for="(item,index) in list">
+                <div :key="index" style="display: flex;justify-content: flex-start;">
+                    <div class="mccm-item" style="margin-left: 1rem">
+                        <div class="mc-t">
+                            <div class="m-t-d1">{{item.brand|doStr(4)}}</div>
+                            <span class="m-t-s1">{{item.model|doStr(10)}}</span>
+                        </div>
+                        <div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
+                        <div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
+                    </div>
+                    <img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+                </div>
+            </template>
+
+        </div>
+        <iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
+    </div>
+</template>
+
+<script>
+import moment from "moment";
+import { getUserSeriesName } from "@/api/comm";
+export default {
+    name: "brandCompateHeader",
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    watch: {
+        data: {
+            handler(val) {
+                if (val.length > 0) {
+                    val.forEach((ele, index) => {
+                        this.list[index] = Object.assign(this.list[index], ele);
+                    });
+                }
+            },
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            labelCol: { span: 9 },
+            wrapperCol: { span: 14 },
+            modelShow: false,
+            brand: "",
+            model: "",
+            chooseIndex: -1,
+            form: {
+                token: "",
+                sBrandName: "",
+            },
+            list: [
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+                {
+                    brand: "",
+                    model: "",
+                    isDel: false,
+                },
+            ],
+        };
+    },
+    created() {
+        this.brand = this.getBrand.brandname || "奥迪";
+        this.modelData();
+    },
+    methods: {
+        goback() {
+            this.$router.go(-1);
+        },
+        // 获取车型
+        modelData() {
+            let model = this.getModel.name || "";
+            if (!model) {
+                this.getUserSeriesName(this.brand);
+            } else {
+                this.model = model;
+            }
+        },
+        // 获取车型
+        getUserSeriesName(brandName) {
+            this.form.token = this.getToken;
+            this.form.sBrandName = brandName;
+            getUserSeriesName(this.form).then((res) => {
+                let data = res.data || [];
+                this.model = data[0].name;
+            });
+        },
+        // 打开选择车型的弹出框
+        handlerChoose(n) {
+            this.chooseIndex = n;
+            this.modelShow = true;
+        },
+        // 删除车型
+        handlerDel(n) {
+            let row = this.list[n];
+            row.brand = "";
+            row.model = "";
+            row.startTime = "";
+            row.endTime = "";
+            row.isDel = false;
+            let filterArr = this.list.filter((ele) => {
+                return ele.brand && ele.model && ele.startTime && ele.endTime;
+            });
+            this.$emit("del", n);
+            this.$emit("change", filterArr);
+             
+        },
+        // 获取切换车型的数据
+        handlerBrand(arr) {
+            let row = this.list[this.chooseIndex];
+            row.brand = arr[0].brandname;
+            row.model = arr[1].name;
+            row.isDel = true;
+        },
+        // 选择时间的判断
+        handlerTime(item) {
+            if (item.startTime && item.endTime) {
+                let isBefore = moment(item.startTime).isBefore(item.endTime);
+                if (!isBefore) {
+                    item.endTime = "";
+                    this.$message.warning("结束时间必须大于开始时间");
+                } else {
+                    let filterArr = this.list.filter((ele) => {
+                        return ele.brand && ele.model;
+                    });
+                    this.$emit("change", filterArr);
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mccm-outter {
+    width: 1888px;
+    height: 236px;
+    border: 2px solid #0f2a4d;
+    .mccm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .mccm-item {
+            width: 230px;
+            height: 160px;
+            background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
+            border: 2px solid #0e5193;
+            margin-top: 13px;
+            border-radius: 2px;
+            position: relative;
+            .m-t-btn {
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                width: 95px;
+                height: 28px;
+                background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+                text-align: center;
+                color: #63aecc;
+                line-height: 28px;
+            }
+            .mc-t {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                margin-top: 21px;
+                .m-t-d1 {
+                    width: 78px;
+                    height: 78px;
+                    background-image: url("../../../assets/images/BrandInsight/img_lq.png");
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    line-height: 78px;
+                    text-align: center;
+                    font-size: 14px;
+                    color: #0090ff;
+                    margin-left: 17px;
+                }
+                .m-t-s1 {
+                    display: block;
+                    font-size: 20px;
+                    color: #fff;
+                    margin-left: 6px;
+                }
+            }
+        }
+        .mccm-vs {
+            width: 78px;
+            height: 78px;
+            margin-top: 22px;
+        }
+    }
+}
+/deep/ .ant-form-item {
+    margin-bottom: 10px;
+}
+/deep/ .ant-calendar-picker {
+    min-width: auto !important;
+}
+</style>

src/views/ModelComparison/brandEventComparison/index.vue

@@ -0,0 +1,191 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 17:33:28
+ * @LastEditTime: 2021-10-15 18:25:51
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
+-->
+<template>
+  <div class="bec-outter">
+    <v-label-div title="品牌事件对比"> </v-label-div>
+    <div class="bec-inner">
+      <v-echarts :opt="opt1"></v-echarts>
+    </div>
+    <v-label-div
+      title="事件上榜车型"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="bec-one">
+      <div class="bec-one-item" v-for="(item, index) in list" :key="index">
+        <span class="s1" :style="{ color: colors[index] }">{{
+          item.name
+        }}</span>
+        <div class="d1">
+          <v-echarts :opt="item.drawOpt"></v-echarts>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
+import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
+import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
+import createOpt from "./opt";
+export default {
+  name: "brandEventComparison",
+  data() {
+    return {
+      opt1: createOpt(),
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      list: [
+        {
+          name: "奥迪",
+          drawOpt: createSideSingleColumn(
+            ["A4", "A3", "Q5", "A7", "A6"],
+            [400, 500, 600, 800, 1000],
+            "#3373CC"
+          ),
+        },
+        {
+          name: "宝马",
+          drawOpt: createSideSingleColumn(
+            ["520", "220", "S4", "525", "320"],
+            [400, 500, 600, 800, 1000],
+            "#63AECC"
+          ),
+        },
+        {
+          name: "奔驰",
+          drawOpt: createSideSingleColumn(
+            ["GML", "350", "S600", "SEL", "300"],
+            [400, 500, 600, 800, 1000],
+            "#54BF93"
+          ),
+        },
+        {
+          name: "吉利",
+          drawOpt: createSideSingleColumn(
+            ["330", "吉利星", "星耀", "星月", "帝豪"],
+            [400, 500, 600, 800, 1000],
+            "#CC9D12"
+          ),
+        },
+        {
+          name: "大众",
+          drawOpt: createSideSingleColumn(
+            ["途观", "速腾", "迈腾", "桑塔纳", "帕萨特"],
+            [400, 500, 600, 800, 1000],
+            "#CC7733"
+          ),
+        },
+        {
+          name: "别克",
+          drawOpt: createSideSingleColumn(
+            ["凯悦", "奥克拉", "君悦", "君越", "君威"],
+            [400, 500, 600, 800, 1000],
+            "#CC5B41"
+          ),
+        },
+      ],
+    };
+  },
+  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();
+      this.getTypeData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getSourcetypeC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let brandList = [];
+            data.forEach((e) => {
+              brandList.push(e.Name);
+            });
+            this.opt1 = createOpt(data, brandList);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    getTypeData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getContrastCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bec-outter {
+  width: 100%;
+  height: auto;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bec-inner {
+    width: 100%;
+    height: 412px;
+  }
+  .bec-one {
+    width: 100%;
+    height: 412px;
+    display: flex;
+    justify-content: flex-start;
+    .bec-one-item {
+      width: 314px;
+      height: 100%;
+      .s1 {
+        padding-left: 16px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .d1 {
+        width: 100%;
+        height: calc(100% - 40px);
+      }
+    }
+  }
+}
+</style>

src/views/ModelComparison/brandEventComparison/opt.js

@@ -0,0 +1,101 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-10-15 17:43:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
+ */
+
+/*series: [
+    {
+        name: '奥迪',
+        type: 'bar',
+        barGap: 0,
+        barWidth: 20,
+        emphasis: {
+            focus: 'series'
+        },
+        data: [320, 332, 301, 334, 390, 400]
+    },*/
+function createData(dataList = []) {
+    let arr = [];
+    dataList.forEach(ele => {
+        let o = {
+            name: ele.Name,
+            type: 'bar',
+            barGap: 0,
+            barWidth: 20,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [ele.Data.新闻,ele.Data.论坛,ele.Data.微信,ele.Data.APP,ele.Data.微博,ele.Data.其他]
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+
+export default function createOpt(dataList = [], brandList = []) {
+    let info = createData(dataList);
+    return {
+        grid: {
+            top: "56px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        legend: {
+            data: brandList,
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#fff",
+                    },
+                },
+                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#FFF",
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: "dashed", // y轴分割线类型
+                        color: "#012b4b",
+                    },
+                },
+            }
+        ],
+        series: info
+    }
+}

src/views/ModelComparison/brandRearWingComparison/index.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:26:18
+ * @LastEditTime: 2021-10-16 14:42:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
+-->
+<template>
+    <div class="brw-outter">
+         <v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+         <div class="brw-inner">
+             <v-echarts :opt="opt"></v-echarts> 
+         </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "brandRearWingComparison",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.brw-outter {
+    width: 944px;
+    height: 412px;
+    .brw-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelComparison/brandRearWingComparison/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-15 11:56:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            left: 16,
+            right: 26,
+            bottom: 16,
+            top: 52,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: '奥迪',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
+            },
+            {
+                name: '宝马',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
+            },
+            {
+                name: '奔驰',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
+            },
+            {
+                name: '吉利',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
+            },
+            {
+                name: '大众',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+            {
+                name: '别克',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+
+        ]
+    }
+}

src/views/ModelComparison/brandTonalDistribution/index.vue

@@ -0,0 +1,126 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:27:50
+ * @LastEditTime: 2021-10-15 14:30:30
+ * @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-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="bd-inner">
+      <roundata
+        v-for="(item,index) in list"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></roundata>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAffectionsC } from "@/api/BrandComparison";
+import roundata from "./roundata";
+export default {
+  name: "brandTonalDistribution",
+  components: {
+    roundata,
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+      list: [
+
+      ]
+    };
+  },
+  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);
+        getAffectionsC(obj).then((res) => {
+          let data = res.data || [];
+          this.list = data;
+          resolve(data)
+        }).catch(() => {
+            reject(false)
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.bd-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bd-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .bd-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>

src/views/ModelComparison/brandTonalDistribution/roundata/index.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:41:17
+ * @LastEditTime: 2021-11-05 13:47:57
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
+-->
+<template>
+    <div class="bd-item-round">
+        <div class="bd-item-r-cav">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
+    </div>
+</template>
+<script>
+import createOpt from "./opt";
+export default {
+    name: "roundata",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        color: {
+            type: String,
+            default: "",
+        },
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+       data: {
+           handler(val) {
+              this.opt = createOpt(val) 
+           },
+           immediate: true
+       } 
+    },
+    data() {
+        return {
+           
+        };
+    },
+    methods: {
+        
+    },
+};
+</script>
+<style lang="less" scoped>
+.bd-item-round {
+    display: inline-block;
+    .bd-item-r-cav {
+        width: 193px;
+        height: 206px;
+    }
+    .bd-item-r-c-s1 {
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        margin-top: 30px;
+    }
+}
+</style>

src/views/ModelComparison/brandTonalDistribution/roundata/opt.js

@@ -0,0 +1,89 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-15 14:49:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+function createData(obj = {}) {
+   if(JSON.stringify(obj) === '{}') {
+      return;
+   }
+   let arr = [];
+   for(let key in obj) {
+      let color = "";
+      if(key === '正面') {
+         color = "#3373CC"
+      } else if(key === '负面') {
+         color = "#b38b14"
+      } else {
+         color = "#54BF93"
+      }
+      let o = {
+         value: obj[key],
+         name: key,
+         itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+            //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //给第一个设置0，第四个设置1，就是垂直渐变
+            offset: 0,
+            color: 'black'
+         }, {
+            offset: 1,
+            color: color
+         }])}
+      }
+      arr.push(o)
+   }
+   return arr
+   
+}
+export default function createOpt(obj = {}) {
+   let data = createData(obj)
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['70%', '92%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                lineHeight: 28
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '18',
+                  color: "#ffff",
+                  fontWeight: 'bold',
+                  formatter: function(p) {
+                      return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: data
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['96%', '100%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: data
+              }
+          ]
+    }
+}

src/views/ModelComparison/channelDistribution/index.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:08:13
+ * @LastEditTime: 2021-10-15 15:18:32
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
+-->
+<template>
+  <div class="cd-outter">
+    <v-label-div title="渠道分布"> </v-label-div>
+    <div class="cd-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getSourcetypeC } from "@/api/BrandComparison/index.js";
+import createOpt from "./opt";
+export default {
+  name: "channelDistribution",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getSourcetypeC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let brandList = [];
+            data.forEach(e => {
+                brandList.push(e.Name)
+            })
+            this.opt = createOpt(data,brandList);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cd-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .cd-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>

src/views/ModelComparison/channelDistribution/opt.js

@@ -0,0 +1,108 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-10-28 15:44:36
+ * @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']
+function createData(dataList = []) {
+    /*series: [
+        {
+            name: '奥迪',
+            type: 'bar',
+            barGap: 0,
+            barWidth: 16,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390, 400]
+        },*/
+    let arr = [];
+    dataList.forEach(e => {
+        let o = {
+            name: e.Name,
+            type: 'bar',
+            barGap: 0,
+            barWidth: 16,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [e.Data.新闻,e.Data.论坛,e.Data.微信,e.Data.短视频,e.Data.微博,e.Data.其他]
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+export default function createOpt(dataList = [],brandList = []) {
+    let info = createData(dataList);
+    return {
+        grid: {
+            top: "56px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        color: colors,
+        legend: {
+            data: brandList,
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#fff",
+                    },
+                },
+                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#FFF",
+                    },
+                },
+                axisLabel: {
+                    formatter: (value) => {
+                      let str = bigNumberTransform(value);
+                      return str;
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: "dashed", // y轴分割线类型
+                        color: "#012b4b",
+                    },
+                },
+            }
+        ],
+        series: info
+    }
+}

src/views/ModelComparison/comparisonOfForumPostingTrends/index.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:45:18
+ * @LastEditTime: 2021-10-16 13:49:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
+-->
+<template>
+    <div class="cop-outter">
+        <v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="cop-inner">
+           <v-echarts :opt="opt"></v-echarts> 
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "comparisonOfForumPostingTrends",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.cop-outter {
+    width: 944px;
+    height: 412px;
+    .cop-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelComparison/comparisonOfForumPostingTrends/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-15 11:56:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            left: 16,
+            right: 26,
+            bottom: 16,
+            top: 52,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: '奥迪',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
+            },
+            {
+                name: '宝马',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
+            },
+            {
+                name: '奔驰',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
+            },
+            {
+                name: '吉利',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
+            },
+            {
+                name: '大众',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+            {
+                name: '别克',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+
+        ]
+    }
+}

src/views/ModelComparison/comparisonOfNegativeTopicsInForums/index.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-10-16 14:20:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+    <div class="cpt-outter">
+        <v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="cpt-inner">
+            <div class="cpt-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts> 
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+export default {
+    name: "comparisonOfPositiveTopicsInTheForum",
+    data() {
+        return {
+           colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+          list: [
+              {
+                  name: '奥迪',
+                  drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '宝马',
+                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '奔驰',
+                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '吉利',
+                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '大众',
+                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '别克',
+                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              }
+          ] 
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+    width: 100%;
+    height: 412px;
+    .cpt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .cpt-item {
+            width: 100%;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color:#fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>

src/views/ModelComparison/comparisonOfPositiveTopicsInTheForum/index.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-10-16 14:16:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+    <div class="cpt-outter">
+        <v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="cpt-inner">
+            <div class="cpt-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts> 
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+export default {
+    name: "comparisonOfPositiveTopicsInTheForum",
+    data() {
+        return {
+           colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+          list: [
+              {
+                  name: '奥迪',
+                  drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
+              },
+              {
+                  name: '宝马',
+                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
+              },
+              {
+                  name: '奔驰',
+                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
+              },
+              {
+                  name: '吉利',
+                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
+              },
+              {
+                  name: '大众',
+                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
+              },
+              {
+                  name: '别克',
+                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
+              }
+          ] 
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+    width: 100%;
+    height: 412px;
+    .cpt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .cpt-item {
+            width: 100%;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color:#fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>

src/views/ModelComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue

@@ -0,0 +1,82 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:22:21
+ * @LastEditTime: 2021-10-16 10:28:27
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
+-->
+<template>
+  <div class="cotn-outter">
+    <v-label-div
+      title="微博互动人数对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cotn-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfTheNumberOfWeiboInteractions",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getInteractCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach((ele) => {
+              dx.push(ele.key);
+              ds.push(ele.value);
+            });
+            this.opt = createSingleColumnar(dx, ds);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.cotn-outter {
+  width: 628px;
+  height: 412px;
+  .cotn-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>

src/views/ModelComparison/comparisonOfWeiboInformation/index.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:01:52
+ * @LastEditTime: 2021-10-16 10:20:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
+-->
+<template>
+  <div class="cowi-outter">
+    <v-label-div
+      title="微博信息量对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="cowi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfWeiboInformation",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getContrastCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach(ele => {
+                dx.push(ele.key);
+                ds.push(ele.value)
+            })
+            this.opt = createSingleColumnar(dx,ds);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cowi-outter {
+  width: 628px;
+  height: 412px;
+  .cowi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>

src/views/ModelComparison/forumTonalComparison/index.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:49:09
+ * @LastEditTime: 2021-10-16 13:55:52
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
+-->
+<template>
+    <div class="wtc-outter">
+         <v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
+         </v-label-div>
+         <div class="wtc-d1">
+            <div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
+            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
+            <div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
+        </div>
+        <div class="wtc-inner">
+            <roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
+            <roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
+            <roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
+            <roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
+            <roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
+            <roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
+        </div>
+    </div>
+</template>
+
+<script>
+import roundata from "./roundata";
+export default {
+    name: "forumTonalComparison",
+    components: {
+       roundata 
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.wtc-outter {
+    width: 100%;
+    height: 460px;
+    margin-top: 16px;
+    .wtc-d1 {
+        width: 100%;
+        display: flex;
+        height: 36px;
+        justify-content: flex-start;
+        align-items: center;
+        .dd1 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        .s1 {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            background: #3373cc;
+        }
+        .s2 {
+            display: inline-block;
+            font-size: 12px;
+            color: #fff;
+            margin-left: 10px;
+        }
+    }
+    .wtc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+}
+</style>

src/views/ModelComparison/forumTonalComparison/roundata/index.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:41:17
+ * @LastEditTime: 2021-11-05 13:31:48
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
+-->
+<template>
+    <div class="bd-item-round">
+        <div class="bd-item-r-cav">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
+    </div>
+</template>
+<script>
+import createOpt from "./opt";
+export default {
+    name: "roundata",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        color: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            opt: createOpt(),
+        };
+    },
+    methods: {
+       
+    },
+};
+</script>
+<style lang="less" scoped>
+.bd-item-round {
+    display: inline-block;
+    .bd-item-r-cav {
+        width: 193px;
+        height: 206px;
+    }
+    .bd-item-r-c-s1 {
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        margin-top: 30px;
+    }
+}
+</style>

src/views/ModelComparison/forumTonalComparison/roundata/opt.js

@@ -0,0 +1,115 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-15 14:49:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['70%', '92%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                lineHeight: 40
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  color: "#ffff",
+                  fontWeight: 'bold',
+                  formatter: function(p) {
+                      return `${p.data.name}\n25%\n${p.data.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2000, name: '正面', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+               
+                { value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#b38b14'
+                 }])} },
+              ],
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['96%', '100%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: [
+                  { value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                
+                  { value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#b38b14'
+                 }])} },
+               
+                ],
+              }
+          ]
+    }
+}

src/views/ModelComparison/index.vue

@@ -0,0 +1,96 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 10:39:43
+ * @LastEditTime: 2021-11-09 18:11:44
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/index.vue
+-->
+<template>
+    <div class="d-container">
+        <BrandComparison v-if="hasData"></BrandComparison>
+        <BrandBeginComparte v-else></BrandBeginComparte>
+    </div>
+</template>
+
+<script>
+import BrandComparison from "./BrandComparison.vue";
+import BrandBeginComparte from "./BrandBeginComparte.vue";
+export default {
+    name: "ModelComparison",
+    components: {
+        BrandComparison,
+        BrandBeginComparte,
+    },
+    data() {
+        return {
+            hasData: false,
+        };
+    },
+    created() {
+        this.hasData = this.getMComparison.length > 0 ? true : false;
+    },
+    mounted() {
+       
+    },
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.bc-outter {
+    padding: 0px 16px 16px 16px;
+}
+
+.bc-d2 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d3 {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d4 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d4-d1 {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .bc-d4-d2 {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+.bc-d5 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d5-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+.bc-d6 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d6-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+</style>

src/views/ModelComparison/informationTrend/index.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 11:40:55
+ * @LastEditTime: 2021-10-15 11:53:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
+-->
+<template>
+  <div class="it-outter">
+    <v-label-div title="信息量趋势"></v-label-div>
+    <div class="it-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountTime0528C } from "@/api/BrandComparison";
+import createOpt from "./opt";
+export default {
+  name: "informationTrend",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getCountTime0528C(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);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.it-outter {
+  width: 618px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .it-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>

src/views/ModelComparison/informationTrend/opt.js

@@ -0,0 +1,109 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-15 11:56:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ */
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+function createData(ds = []) {
+    let testData = {}
+    ds.forEach(item => {
+        item.forEach(val => {
+            if (testData[val.key] === undefined) {
+                testData[val.key] = {
+                    name: val.key,
+                    type: 'line',
+                    symbol: 'none',
+                    areaStyle: {
+                        opacity: 0.2
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [val.value]
+                }
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+   return arr 
+}
+export default function createOpt(dx = [], ds = []) {
+    let data = createData(ds);
+    return {
+        grid: {
+            left: 16,
+            right: 26,
+            bottom: 16,
+            top: 52,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: dx
+        },
+        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",
+                },
+            },
+        },
+        series: data
+    }
+}

src/views/ModelComparison/informationVolumeByChannel/index.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:47:23
+ * @LastEditTime: 2021-10-16 14:54:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @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>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "informationVolumeByChannel",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.ivb-outter {
+    width: 944px;
+    height: 412px;
+    .ivb-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelComparison/informationVolumeByChannel/opt.js

@@ -0,0 +1,126 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-10-15 17:44:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            top: "56px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        legend: {
+            data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#fff",
+                    },
+                },
+                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#FFF",
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: "dashed", // y轴分割线类型
+                        color: "#012b4b",
+                    },
+                },
+            }
+        ],
+        series: [
+            {
+                name: '奥迪',
+                type: 'bar',
+                barGap: 0,
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 400]
+            },
+            {
+                name: '宝马',
+                type: 'bar',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 300]
+            },
+            {
+                name: '奔驰',
+                type: 'bar',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [150, 232, 201, 154, 190, 200]
+            },
+            {
+                name: '吉利',
+                type: 'bar',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [98, 77, 101, 99, 40, 44]
+            },
+            {
+                name: '大众',
+                type: 'bar',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [198, 177, 101, 199, 140, 145]
+            },
+            {
+                name: '别克',
+                type: 'bar',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [298, 277, 201, 299, 240, 250]
+            }
+        ]
+    }
+}

src/views/ModelComparison/keyMediaCommunicationComparison/index.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:34:26
+ * @LastEditTime: 2021-10-15 15:43:55
+ * @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>
+  </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();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getSourceCount0528C(obj).then(() => {
+          //console.log(res);
+      })
+    }
+  },
+};
+</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);
+  }
+}
+</style>

src/views/ModelComparison/keyMediaCommunicationComparison/opt.js

@@ -0,0 +1,127 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-10-15 15:51:52
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            left: 16,
+            right: 16,
+            bottom: 16,
+            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
+        },
+        xAxis: {
+            type: 'category',
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['汽车之家', '懂车帝', '腾讯新闻', '凤凰网', '新浪微博']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        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]
+              }
+          ]
+    }
+
+}

src/views/ModelComparison/overallInformation/index.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 11:58:33
+ * @LastEditTime: 2021-10-15 15:20:41
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @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>
+</template>
+
+<script>
+import {getContrastCount0528C} from "@/api/BrandComparison"
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "overallInformation",
+    data() {
+        return {
+            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();
+        },
+        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)
+            });
+        });
+        }
+    }
+};
+</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);
+    }
+}
+</style>

src/views/ModelComparison/overallNumberOfInteractions/index.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:12:08
+ * @LastEditTime: 2021-10-15 15:21:18
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @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>
+</template>
+
+<script>
+import {getInteractCount0528C} from "@/api/BrandComparison"
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "overallInformation",
+    data() {
+        return {
+            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();
+        },
+        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)
+            });
+        });
+        }
+    }
+};
+</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);
+    }
+}
+</style>

src/views/ModelComparison/overallWordCloudComparison/index.vue

@@ -0,0 +1,130 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 16:56:32
+ * @LastEditTime: 2021-10-15 17:31:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
+-->
+<template>
+  <div class="owcc-outter">
+    <v-label-div title="整体词云对比"> </v-label-div>
+    <div class="owcc-inner">
+      <div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
+        <v-label-div
+          :title="item.name"
+          :titleColor="colors[index]"
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+          <v-tab-group
+            :btns="['正面', '负面']"
+            @change="(n) => {handlerTab(n,item)}"
+          ></v-tab-group>
+        </v-label-div>
+        <div class="owcc-draw">
+          <v-echarts :opt="item.opt"></v-echarts>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
+import createWordCloud from "@/utils/gol/bubbleWord";
+export default {
+  name: "overallWordCloudComparison",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: []
+    };
+  },
+  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);
+        getPositiveAndNegative0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let arr = [];
+            data.forEach(ele => {
+                let obj = {
+                    name: ele.key,
+                    p: ele.value[0].value,
+                    s: ele.value[1].value,
+                    opt: createWordCloud(ele.value[0].value),
+                    tapIndex: 0
+                }
+                arr.push(obj);
+            })
+            this.dataSource = arr;
+
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    handlerTab(n,item) {
+       item.tapIndex = n;
+       if(n === 0) {
+           item.opt = createWordCloud(item.p)
+       } else {
+           item.opt = createWordCloud(item.s)
+       }
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.owcc-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .owcc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .owcc-item {
+      width: 314px;
+      height: 412px;
+      margin-top: 5px;
+      .owcc-draw {
+        width: 100%;
+        height: calc(100% - 48px);
+      }
+    }
+  }
+}
+</style>

src/views/ModelComparison/overallWordCloudComparison/opt.js

@@ -0,0 +1,215 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 13:35:13
+ * @LastEditTime: 2021-10-15 17:23:18
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ */
+// import * as echarts from "echarts";
+const dataBJ = [
+    [1, 55, 9, 56, 0.46, 18, 6, '良'],
+    [2, 25, 11, 21, 0.65, 34, 9, '优'],
+    [3, 56, 7, 63, 0.3, 14, 5, '良'],
+    [4, 33, 7, 29, 0.33, 16, 6, '优'],
+    [5, 42, 24, 44, 0.76, 40, 16, '优'],
+    [6, 82, 58, 90, 1.77, 68, 33, '良'],
+    [7, 74, 49, 77, 1.46, 48, 27, '良'],
+    [8, 78, 55, 80, 1.29, 59, 29, '良'],
+    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
+    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
+    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
+    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
+    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
+    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
+    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
+    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
+    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
+    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
+    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
+    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
+    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
+    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
+    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
+    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
+    // [25, 42, 27, 43, 1, 53, 22, '优'],
+    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
+    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
+    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
+    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
+    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
+    // [31, 46, 5, 49, 0.28, 10, 6, '优']
+  ];
+  const dataGZ = [
+    [1, 26, 37, 27, 1.163, 27, 13, '优'],
+    [2, 85, 62, 71, 1.195, 60, 8, '良'],
+    [3, 78, 38, 74, 1.363, 37, 7, '良'],
+    [4, 21, 21, 36, 0.634, 40, 9, '优'],
+    [5, 41, 42, 46, 0.915, 81, 13, '优'],
+    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
+    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
+    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
+    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
+    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
+    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
+    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
+    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
+    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
+    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
+    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
+    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
+    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
+    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
+    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
+    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
+    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
+    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
+    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
+    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
+    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
+    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
+    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
+    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
+    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
+    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
+  ];
+  const dataSH = [
+    [1, 91, 45, 125, 0.82, 34, 23, '良'],
+    [2, 65, 27, 78, 0.86, 45, 29, '良'],
+    [3, 83, 60, 84, 1.09, 73, 27, '良'],
+    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [8, 89, 65, 78, 0.86, 51, 26, '良'],
+    // [9, 53, 33, 47, 0.64, 50, 17, '良'],
+    // [10, 80, 55, 80, 1.01, 75, 24, '良'],
+    // [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
+    // [12, 99, 71, 142, 1.1, 62, 42, '良'],
+    // [13, 95, 69, 130, 1.28, 74, 50, '良'],
+    // [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
+    // [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
+    // [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
+    // [17, 79, 43, 107, 1.05, 59, 37, '良'],
+    // [18, 71, 46, 89, 0.86, 64, 25, '良'],
+    // [19, 97, 71, 113, 1.17, 88, 31, '良'],
+    // [20, 84, 57, 91, 0.85, 55, 31, '良'],
+    // [21, 87, 63, 101, 0.9, 56, 41, '良'],
+    // [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
+    // [23, 87, 62, 100, 1, 72, 28, '良'],
+    // [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
+    // [25, 65, 45, 51, 0.74, 39, 17, '良'],
+    // [26, 39, 24, 38, 0.61, 47, 17, '优'],
+    // [27, 39, 24, 39, 0.59, 50, 19, '优'],
+    // [28, 93, 68, 96, 1.05, 79, 29, '良'],
+    // [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
+    // [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
+    // [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
+  ];
+//   const schema = [
+//     { name: 'date', index: 0, text: '日' },
+//     { name: 'AQIindex', index: 1, text: 'AQI指数' },
+//     { name: 'PM25', index: 2, text: 'PM2.5' },
+//     { name: 'PM10', index: 3, text: 'PM10' },
+//     { name: 'CO', index: 4, text: '一氧化碳（CO）' },
+//     { name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
+//     { name: 'SO2', index: 6, text: '二氧化硫（SO2）' }
+//   ];
+  const itemStyle = {
+    opacity: 0.8,
+    shadowBlur: 10,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    shadowColor: 'rgba(0,0,0,0.3)'
+  };
+export default function createOpt() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: { 
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function(param) {
+                let value = param.value;
+                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+            }
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            }
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            },
+            scale: true
+        },
+        series: [{
+            name: '北京',
+            data: dataBJ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }, {
+            name: '上海',
+            data: dataSH,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        },
+        {
+            name: '广州',
+            data: dataGZ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF", 
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }
+        ]
+    }
+}

src/views/ModelComparison/summaryAndComparisonOfForumInformation/index.vue

@@ -0,0 +1,146 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:14:28
+ * @LastEditTime: 2021-10-16 13:44:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
+-->
+<template>
+    <div class="saco-outter">
+        <v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="saco-item" v-for="(item,index) in list" :key="index">
+            <span class="s1">{{item.name}}</span>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛信息量</span>
+                    <span class="ss2">{{item.a}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
+                <div class="d1-d1">
+                    <span class="ss1">互动人数</span>
+                    <span class="ss2">{{item.b}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛主贴量</span>
+                    <span class="ss2">{{item.c}}</span>
+                </div>
+            </div>
+            <div class="d1">
+                <img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
+                <div class="d1-d1">
+                    <span class="ss1">论坛评论量</span>
+                    <span class="ss2">{{item.d}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "summaryAndComparisonOfForumInformation",
+    data() {
+        return {
+            list: [
+                {
+                    name: '奥迪',
+                    a: 5869,
+                    b: 2345,
+                    c: 45678,
+                    d: 12345
+                },
+                {
+                    name: '宝马',
+                    a: 5869,
+                    b: 2345,
+                    c: 45678,
+                    d: 12345
+                },
+                {
+                    name: '奔驰',
+                    a: 5869,
+                    b: 2345,
+                    c: 45678,
+                    d: 12345
+                },
+                {
+                    name: '吉利',
+                    a: 5869,
+                    b: 2345,
+                    c: 45678,
+                    d: 12345
+                },
+                {
+                    name: '大众',
+                    a: 5869,
+                    b: 2345,
+                    c: 45678,
+                    d: 12345
+                },
+                {
+                    name: '别克',
+                    a: 5869,
+                    b: 2345,
+                    c: 45678,
+                    d: 12345
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.saco-outter {
+    width: 944px;
+    height: 412px;
+    .saco-item {
+        width: 912px;
+        height: 54px;
+        border-radius: 4px;
+        border: 1px solid #0f2a4d;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 5px;
+        margin-left: 16px;
+        .s1 {
+            width: 137px;
+            display: block;
+            font-size: 16px;
+            color: #fff;
+            margin-left: 16px;
+        }
+        .d1 {
+                width: 183px;
+                display: flex;
+                justify-content: flex-start;
+                .d1-m1 {
+                    width: 44px;
+                    height: 44px;
+                }
+                .d1-d1 {
+                    .ss1 {
+                        display: block;
+                        font-size: 12px;
+                        color: #7f868d;
+                        margin-top: 2px;
+                    }
+                    .ss2 {
+                        display: block;
+                        font-size: 16px;
+                        font-family: Bebas;
+                        color: #fff;
+                    }
+                }
+        }
+    }
+}
+</style>

src/views/ModelComparison/tailTOPMedia/index.vue

@@ -0,0 +1,91 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:56:13
+ * @LastEditTime: 2021-10-19 11:52:43
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
+-->
+
+<template>
+    <div class="ttm-outter">
+        <v-label-div title="尾翼TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="ttm-inner">
+            <div class="ttm-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "tailTOPMedia",
+    data() {
+        return {
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+            list: [
+                {
+                    name: "奥迪",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400])
+                },
+                 {
+                    name: "宝马",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#63AECC')
+                },
+                 {
+                    name: "奔驰",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#54BF93')
+                },
+                 {
+                    name: "吉利",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC9D12')
+                },
+                 {
+                    name: "大众",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC7733')
+                },
+                 {
+                    name: "别克",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC5B41')
+                }
+            ],
+          
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.ttm-outter {
+    width: 100%;
+    height: auto;
+    .ttm-inner {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .ttm-item {
+            width: 628px;
+            height: 380px;
+            .s1 {
+                padding-left: 16px;
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                color: #fff;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>

src/views/ModelComparison/userAreaDistribution/index.vue

@@ -0,0 +1,98 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 11:25:20
+ * @LastEditTime: 2021-10-16 11:31:16
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
+-->
+<template>
+  <div class="wua-outter">
+    <v-label-div
+      title="用户区域分布"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group
+        :btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
+      ></v-tab-group>
+    </v-label-div>
+    <div class="wua-inner">
+      <div class="d1">
+        <v-echarts :opt="opt1"></v-echarts>
+      </div>
+      <div class="d2">
+        <v-echars-map :opt="opt2"></v-echars-map>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
+export default {
+  name: "userAreaDistribution",
+  data() {
+    return {
+      opt1: createOptD1(),
+      opt2: createOptD2(),
+      form: {
+        token: "",
+        sBrand: "",
+      },
+    };
+  },
+  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);
+        getRegionWeiBoC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wua-outter {
+  width: 944px;
+  height: 412px;
+  .wua-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 479px;
+      height: 100%;
+    }
+    .d2 {
+      width: 465px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+}
+</style>

src/views/ModelComparison/userAreaDistribution/opt1.js

@@ -0,0 +1,75 @@
+
+
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 12:38:34
+ * @LastEditTime: 2021-10-14 11:48:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOptD1() {
+    return {
+        grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '4%',
+            top: "1%",
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['山西省',  '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+        },
+        series: [
+            {
+                name: '2011',
+                type: 'bar',
+                barWidth: 24,
+                data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                    offset: 0,
+                    color: '#010B19'
+                }, {
+                    offset: 1,
+                    color: '#2f68b4'
+                }]),
+            }
+        ]
+    }
+}

src/views/ModelComparison/userAreaDistribution/opt2.js

@@ -0,0 +1,134 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-14 11:53:16
+ * @LastEditTime: 2021-10-14 15:51:30
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
+ */
+const ini_data = [];//初始化省份数组
+const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东'];
+//正则省份，将省与市的字眼去掉，框架不识别
+for (var i = 0; i < provArr.length; i++) {
+    var str = provArr[i];
+    var re = /省|市/g;  //全局匹配
+    var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
+    ini_data.push(str2);
+}
+export default function createOptD2() {
+    return {
+        tooltip: {
+            trigger: "item",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        // geo: {
+        //     show: true,
+        //     map: 'china',
+        //     roam: false,//地图设置不可拖拽，固定的
+        //     itemStyle: {
+        //         normal: {
+        //             borderWidth: 0,
+        //             shadowColor: 'rgba(0,54,255, 1)',
+        //             shadowBlur: 100
+        //         }
+        //     }
+        // },
+        visualMap: {
+            type: 'continuous', 
+            show: false,
+            min: 0,
+            max: 2000,
+            text: ['高', '低'],
+            orient: 'horizontal',
+            itemWidth: 15,
+            itemHeight: 200,
+            right: 0,
+            bottom: 30,
+            inRange: {
+                color: ['#0393d2', '#75ddff']
+            },
+            textStyle: {
+                color: 'white'
+            }
+        },
+        series: [
+            {
+                name: "微博区域",
+                type: "map",
+                mapType: "china",
+                roam: false,
+                zoom: 1,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
+                left: 16,
+                top: 20,
+                right: 10,
+                bottom: 10,
+                selectedMode:'multiple',
+                colorBy: 'data',
+                itemStyle: {
+                    areaColor: '#001f5b',//地图区域背景颜色
+                    borderColor: '#005cf9',//地图边界颜色
+                    shadowColor: '#005cf9',
+                    emphasis: {
+                        areaColor: '#3066ba',//鼠标滑过区域颜色
+                        label: {
+                            color: '#fff'
+                        }
+                    }
+                },
+                label: {
+                    normal: {
+                        show: false
+                    },
+                },
+                
+                // select: {
+                //     label: {
+                //         show: false
+                //     },
+                //     itemStyle: {
+                //         areaColor: '#3edffe'
+                //     }
+                // },
+                data: [
+                    {
+                        name: "河北省",
+                        value: 1000,
+                        // selected: true,
+                    },
+                    {
+                        name: "浙江省",
+                        value: 1100,
+                        // selected: true
+                    },
+                    {
+                        name: "山东省",
+                        value: 1200,
+                        // selected: true
+                    },
+                    {
+                        name: "山西省",
+                        value: 1300,
+                        // selected: true
+                    },
+                    {
+                        name: "上海市",
+                        value: 1400,
+                        // selected: true
+                    },
+                    {
+                        name: "江苏省",
+                        value: 1500,
+                        // selected: true
+                    }
+                ]
+
+            }
+        ]
+    }
+}

src/views/ModelComparison/weiboBigVComparison/index.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:30:29
+ * @LastEditTime: 2021-10-16 10:41:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
+-->
+<template>
+  <div class="wbc-outter">
+    <v-label-div
+      title="微博大V对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    ></v-label-div>
+    <div class="wbc-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import createOpt from "./opt";
+export default {
+  name: "weiboBigVComparison",
+  data() {
+    return {
+      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();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getBoauthen0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            this.opt = createOpt(data);
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.wbc-outter {
+  width: 630px;
+  height: 412px;
+  .wbc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>

src/views/ModelComparison/weiboBigVComparison/opt.js

@@ -0,0 +1,99 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-10-16 10:42:52
+ * @LastEditors: Please set LastEditors
+ * @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 = []) {
+  let arr = [];
+  dataList.forEach(ele => {
+    let o = {
+      name: ele.key,
+      type: 'bar',
+      stack: 'total',
+      barWidth: 24,
+      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]
+    };
+    arr.push(o);
+  })
+  return arr;
+}
+
+export default function createOpt(dataList = []) {
+  let info = createData(dataList);
+  return {
+    grid: {
+      left: 16,
+      right: 16,
+      bottom: 16,
+      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
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: ['名人', '媒体', '企业', '政府', '个人大v']
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: info
+  }
+
+}

src/views/ModelComparison/weiboContentDirectionComparison/index.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-10-16 11:25:20
+ * @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="微博内容方向对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="bcm-inner">
+      <div class="bcm-item" v-for="(item, index) in sourceData" :key="index">
+        <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+        <v-ranking-bcm
+          v-for="(it, n) in item.value"
+          :key="n"
+          :label="it.key"
+          :num="it.num"
+          :val="it.value"
+        ></v-ranking-bcm>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getDirect0528C } from "@/api/BrandComparison/BrandWeibo.js";
+import vRankingBcm from "./v-ranking-bcm";
+export default {
+  name: "weiboContentDirectionComparison",
+  components: {
+    vRankingBcm,
+  },
+  data() {
+    return {
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      sourceData: [],
+    };
+  },
+  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);
+        getDirect0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let showData = [];
+            data.forEach((e) => {
+              //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
+              let sortedArr = e.value.sort(this.compare("value")).slice(0, 5);
+              let obj = {
+                key: e.key,
+                value: sortedArr,
+              };
+              showData.push(obj);
+            });
+            showData.forEach((ele) => {
+              //给数据添加排名
+              for (let index = 0; index < ele.value.length; index++) {
+                ele.value[index].num = index + 1;
+              }
+            });
+            this.sourceData = showData;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 根据对象的属性排序 v2-v1为顺序，v1-v2为倒序
+    compare(property) {
+      return function (a, b) {
+        let value1 = a[property];
+        let value2 = b[property];
+        return value2 - value1;
+      };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .bcm-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .bcm-item {
+      width: 282px;
+      margin-left: 27px;
+      .ss1 {
+        display: block;
+        font-size: 18px;
+        color: #fff;
+        font-weight: 500;
+        padding-top: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/ModelComparison/weiboContentDirectionComparison/v-ranking-bcm/index.vue

@@ -0,0 +1,232 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-10-15 16:51:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">传播量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-bcm",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 281px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 14px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 40px;
+    margin-top: 14px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 30px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      display: flex;
+      justify-content: flex-start;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+          margin-left: 10px;
+      }
+  }
+  .v-r-left {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 40px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>

src/views/ModelComparison/weiboTuneComparison/index.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 10:49:09
+ * @LastEditTime: 2021-11-05 13:45:20
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
+-->
+<template>
+  <div class="wtc-outter">
+    <v-label-div
+      title="微博调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wtc-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#54BF93' }"></span
+        ><span class="s2">中性</span>
+      </div>
+      <div class="dd1" style="margin-left: 24px">
+        <span class="s1" :style="{ background: '#CC9D12' }"></span
+        ><span class="s2">负面</span>
+      </div>
+    </div>
+    <div class="wtc-inner">
+      <wbRoundata
+        v-for="(item,index) in dataSource"
+        :key="index"
+        :title="item.Name"
+        :color="colors[index]"
+        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
+        :data="item.Data"
+      ></wbRoundata>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
+import wbRoundata from "./wbRoundata";
+export default {
+  name: "weiboTuneComparison",
+  data() {
+    return {
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
+      dataSource: []
+    };
+  },
+  components: {
+    wbRoundata,
+  },
+
+  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);
+        getAffectionsC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            this.dataSource = data;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wtc-outter {
+  width: 100%;
+  height: 460px;
+  margin-top: 16px;
+  .wtc-d1 {
+    width: 100%;
+    display: flex;
+    height: 36px;
+    justify-content: flex-start;
+    align-items: center;
+    .dd1 {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .s1 {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: #3373cc;
+    }
+    .s2 {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      margin-left: 10px;
+    }
+  }
+  .wtc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+</style>

src/views/ModelComparison/weiboTuneComparison/wbRoundata/index.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 13:41:17
+ * @LastEditTime: 2021-11-05 13:47:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
+-->
+<template>
+    <div class="bd-item-round">
+        <div class="bd-item-r-cav">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+        <span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
+    </div>
+</template>
+<script>
+import createOpt from "./opt";
+export default {
+    name: "wbRoundata",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        color: {
+            type: String,
+            default: "",
+        },
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+       data: {
+           handler(val) {
+              this.opt = createOpt(val) 
+           },
+           immediate: true
+       } 
+    },
+    data() {
+        return {
+            //opt: createOpt(),
+        };
+    },
+    methods: {
+        
+    },
+};
+</script>
+<style lang="less" scoped>
+.bd-item-round {
+    display: inline-block;
+    .bd-item-r-cav {
+        width: 193px;
+        height: 206px;
+    }
+    .bd-item-r-c-s1 {
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        margin-top: 30px;
+    }
+}
+</style>

src/views/ModelComparison/weiboTuneComparison/wbRoundata/opt.js

@@ -0,0 +1,90 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-15 14:49:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+function createData(obj = {}) {
+   if (JSON.stringify(obj) === '{}') {
+      return;
+   }
+   let arr = [];
+   for (let key in obj) {
+      let color = "";
+      if (key === '正面') {
+         color = "#3373CC"
+      } else if (key === '负面') {
+         color = "#b38b14"
+      } else {
+         color = "#54BF93"
+      }
+      let o = {
+         value: obj[key],
+         name: key,
+         itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+               //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+               //给第一个设置0，第四个设置1，就是垂直渐变
+               offset: 0,
+               color: 'black'
+            }, {
+               offset: 1,
+               color: color
+            }])
+         }
+      }
+      arr.push(o)
+   }
+   return arr
+}
+export default function createOpt(obj={}) {
+   let data = createData(obj);
+   return {
+      series: [
+         {
+            name: 'Access From0',
+            type: 'pie',
+            radius: ['70%', '92%'],
+            avoidLabelOverlap: false,
+            label: {
+               show: false,
+               position: 'center',
+               lineHeight: 28
+            },
+            emphasis: {
+               label: {
+                  show: true,
+                  fontSize: '18',
+                  color: "#ffff",
+                  fontWeight: 'bold',
+                  formatter: function (p) {
+                     return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
+               }
+            },
+            labelLine: {
+               show: false
+            },
+            data: data
+         },
+         {
+            name: 'Access From1',
+            type: 'pie',
+            radius: ['96%', '100%'],
+            avoidLabelOverlap: false,
+            label: {
+               show: false,
+               position: 'center'
+            },
+            labelLine: {
+               show: false
+            },
+            center: ['50%', '50%'],//边框位置
+            data: data
+         }
+      ]
+   }
+}

src/views/ModelComparison/weiboUserPortrait/index.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 11:36:20
+ * @LastEditTime: 2021-10-16 12:01:38
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
+-->
+<template>
+    <div class="wup-outter">
+        <v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
+            <v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
+        </v-label-div>
+        <div class="wup-inner">
+            <div class="d1">
+                <div class="dd1">
+                    <v-echarts :opt="opt1"></v-echarts>
+                </div>
+                <div class="dd2">
+                    <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
+                    <v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
+                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
+                </div>
+            </div>
+            <div class="d1">
+                <div class="dd1">
+                    <v-echarts :opt="opt2">
+                        <v-echarts :opt="opt2"></v-echarts>
+                    </v-echarts>
+                </div>
+                <div class="dd2" style="margin-right: 16px">
+                    <v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
+                    <v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
+                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt1 from "./opt1";
+import createOpt2 from "./opt2";
+export default {
+    name: "weiboUserPortrait",
+    data() {
+        return {
+            opt1: createOpt1(),
+            opt2: createOpt2(),
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.wup-outter {
+    width: 944px;
+    height: 412px;
+    .wup-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .d1 {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            overflow: hidden;
+            .dd1 {
+                width: 260px;
+                height: 100%;
+            }
+            .dd2 {
+                width: 240px;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>

src/views/ModelComparison/weiboUserPortrait/opt1.js

@@ -0,0 +1,114 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:14:58
+ * @LastEditTime: 2021-10-14 10:43:47
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt1() {
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['63%', '77%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                fontSize: '40',
+                color: "#ffff",
+            },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\n' + p.data.value; 
+                  },
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2200, name: '男性', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['80%', '84%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: [
+                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}

src/views/ModelComparison/weiboUserPortrait/opt2.js

@@ -0,0 +1,114 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:14:58
+ * @LastEditTime: 2021-10-16 11:53:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt2() {
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['63%', '77%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                fontSize: '40',
+                color: "#ffff",
+            },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\n' + p.data.value; 
+                  },
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2200, name: '已认证', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                { value: 2200, name: '未认证', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['80%', '84%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: [
+                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}

src/views/ModelForumDetails/FollowPostIDModelAnalysis/index.vue

@@ -0,0 +1,128 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-09 16:02:50
+ * @LastEditTime: 2021-11-10 16:45:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/ModelForumDetails/MainPostIDModelAnalysis/index.vue
+-->
+<template>
+    <div class="mpma-outter" v-loading="load">
+        <v-label-div title="跟帖ID车型分析" :showLine="false" :eStyle="{'border-style': 'none'}">
+            <v-tab-group :btns="['主帖ID', '认证ID']" @change="handlerTab"></v-tab-group>
+        </v-label-div>
+        <div class="mpma-inner">
+            <vue-scroll>
+                <v-ranking-fpma :num="index + 1" :label="item.key" :val="item.value" v-for="(item,index) in list" :key="index"></v-ranking-fpma>
+            </vue-scroll>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    getGuanZhuSeriesname,
+    getAttestationBuycars,
+} from "@/api/ModelForumDetails";
+import vRankingFpma from "./v-ranking-fpma"
+export default {
+    name: "FollowPostIDModelAnalysis",
+    components: {
+        vRankingFpma
+    },
+    data() {
+        return {
+            load: false,
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+                iBBsType: 3,
+            },
+            zIds: [],
+            aIds: [],
+            list: [],
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.form.sSeriesName = this.getModel.name;
+        this.load = true;
+        Promise.all([this.getGuanZhuSeriesname(), this.getAttestationBuycars()]).then(() => {
+            this.handlerTab(0);
+            this.load = false;
+        })
+    },
+    methods: {
+        // 跟帖ID
+        getGuanZhuSeriesname() {
+            return new Promise((resolve, reject) => {
+                let obj = Object.assign({}, this.getCtime2, this.form);
+                getGuanZhuSeriesname(obj)
+                    .then((res) => {
+                        let data = res.data || {};
+                        let arr = [];
+                        for (let key in data) {
+                            let o = {
+                                key: key,
+                                value: data[key],
+                            };
+                            arr.push(o);
+                        }
+                        this.zIds = arr;
+                        resolve(true);
+                    })
+                    .catch(() => {
+                        reject(false);
+                    });
+            });
+        },
+        // 认证ID
+        getAttestationBuycars() {
+            return new Promise((resolve, reject) => {
+                let obj = Object.assign({}, this.getCtime2, this.form);
+                getAttestationBuycars(obj).then(res => {
+                     let data = res.data || {};
+                        let arr = [];
+                        for (let key in data) {
+                            let o = {
+                                key: key,
+                                value: data[key],
+                            };
+                            arr.push(o);
+                        }
+                        this.aIds = arr;
+                        resolve(true);
+                }).catch(() => {
+                    reject(false);
+                })
+            })
+        },
+        handlerTab(n) {
+            switch (n) {
+                case 0:
+                   this.list = this.zIds; 
+                    break;
+                case 1:
+                    this.list = this.aIds;
+                    break;
+                default:
+                    this.list = this.zIds; 
+                    break;
+            }
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.mpma-outter {
+    width: 452px;
+    height: 412px;
+    .mpma-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/ModelForumDetails/FollowPostIDModelAnalysis/v-ranking-fpma/index.vue

@@ -0,0 +1,231 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-09 17:12:38
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">数量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-fpma",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 436px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 11px;
+    margin-bottom: 10px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: inline-block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+          margin-right: 8px;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #99a2ad;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 410px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 410px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 410px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 410px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>

src/views/ModelForumDetails/FollowPostUserActiveArea/index.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-14 11:25:20
+ * @LastEditTime: 2021-11-10 17:16:40
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
+-->
+<template>
+  <div class="wua-outter" v-loading="load">
+    <v-label-div title="跟帖ID区域分布" :showLine="false" :eStyle="{'border-style': 'none'}"> </v-label-div>
+    <div class="wua-inner">
+      <div class="d1">
+        <v-echarts :opt="opt1"></v-echarts>
+      </div>
+      <div class="d2">
+        <v-echars-map :opt="opt2"></v-echars-map>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRegion } from "@/api/ModelForumDetails";
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
+export default {
+  name: "FollowPostUserActiveArea",
+  data() {
+    return {
+      load: false,
+      form: {
+        sBrand: "",
+        token: "",
+        sSeriesName: "",
+        iBBsType: 3
+      },
+      opt1: {},
+      opt2: {},
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || '奥迪';
+    this.form.sSeriesName = this.getModel.name;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.load = true;
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getRegion(obj).then((res) => {
+        let data = res.data || {};
+        let arr = this.toArr(data);
+        let dx = []; //省份
+        let ds = []; //数据
+        arr.forEach((ele) => {
+          ele.name = ele.name.replace('省', '')
+          let value = ele.value;
+          dx.push(ele.name);
+          ds.push(value);
+        });
+        let dm = arr //省份和数据
+        this.opt1 = createOptD1(dx, ds);
+        this.opt2 = createOptD2(dm);
+        this.load = false;
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          name: key,
+          value: obj[key] * 1,
+        };
+        arr.push(o);
+      }
+      return arr;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wua-outter {
+  width: 936px;
+  height: 412px;
+  .wua-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 479px;
+      height: 100%;
+    }
+    .d2 {
+      width: 420px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+}
+</style>