diff --git a/src/api/ThemeComparison/index.js b/src/api/ThemeComparison/index.js
new file mode 100644
index 0000000..43deaef
--- /dev/null
+++ b/src/api/ThemeComparison/index.js
@@ -0,0 +1,105 @@
+import httpService from "@/request"
+
+// 主题对比-信息量趋势
+export function getCountTime0528C(params) {
+    let obj =  Object.assign({action: 'getCountTime0528C', sType: 'BrandOverview',iContrastType: '4'}, 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: 'BrandOverview',iContrastType: '4'}, 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: 'BrandOverview',iContrastType: '4'}, 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: 'BrandOverview',iContrastType: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-渠道分布
+export function getSourcetypeC(params) {
+    let obj =  Object.assign({action: 'getSourcetypeC', sType: 'BrandOverview',iContrastType: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题对比-重点媒体传播对比
+export function getSourceCount0528C(params) {
+    let obj =  Object.assign({action: 'getSourceCount0528C', sType: 'BrandOverview',iContrastType: '4'}, 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: '4'}, 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: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/api/ThemeComparisonWeibo/index.js b/src/api/ThemeComparisonWeibo/index.js
new file mode 100644
index 0000000..d09f7c4
--- /dev/null
+++ b/src/api/ThemeComparisonWeibo/index.js
@@ -0,0 +1,92 @@
+import httpService from "@/request"
+
+// 主题对比-微博信息量对比
+export function getContrastCount0528C(params) {
+    let obj =  Object.assign({action: 'getContrastCount0528C', sType: 'BrandWeiBo',iContrastType: '4'}, 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: '4'}, 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: '4'}, 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: '4'}, 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: '4'}, 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: '4'}, 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: '4'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/assets/images/Index/card_status_small.png b/src/assets/images/Index/card_status_small.png
new file mode 100644
index 0000000..0bc0d91
Binary files /dev/null and b/src/assets/images/Index/card_status_small.png differ
diff --git a/src/components/v-card-button/index.vue b/src/components/v-card-button/index.vue
index 440f8df..07c6393 100644
--- a/src/components/v-card-button/index.vue
+++ b/src/components/v-card-button/index.vue
@@ -9,10 +9,10 @@
 
 <template>
     <div class="v-btn-card">
-            <a style="margin-left: 24px; margin-top:8px" @click="edit" class="card-edit">编辑</a>
+            <a @click="edit" class="card-edit">编辑</a>
             <a-popconfirm @confirm="del" @cancel="cancel"> 
                 <div slot="title" style="color: white">此操作将删除数据，是否继续？</div>  
-                <a style="margin-left: 34px; margin-top:8px" @click="del" class="card-delete">删除</a>
+                <a @click="del" class="card-delete">删除</a>
             </a-popconfirm>
         
     </div>
@@ -47,11 +47,13 @@ export default {
     border-image: linear-gradient(180deg, rgba(69, 149, 230, 1), rgba(0, 172, 255, 0)) 2 2;
 
     display: flex;
+    justify-content: space-around;
     font-weight: 600;
     font-size: 20px;
 
     
     .card-edit {
+        margin-top: 8px;
         font-size: 12px;
         font-family: PingFang-SC-Bold, PingFang-SC;
         font-weight: bold;
@@ -59,6 +61,7 @@ export default {
         line-height: 12px;
     }
     .card-delete {
+        margin-top: 8px;
         font-size: 12px;
         font-family: PingFang-SC-Bold, PingFang-SC;
         font-weight: bold;
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 448812b..d5d9226 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -127,10 +127,10 @@ export default {
                 }
             },
             computed: {
-                ...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus','getBcStatus','getScStatus'])
+                ...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison','getTComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus','getBcStatus','getScStatus','getTcStatus'])
             },
             methods: {
-                ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus','setBcStatus','setScStatus']),
+                ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison','setTComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus','setBcStatus','setScStatus','setTcStatus']),
                 // 获取当前日期时间
                 getDatetime() {
                     let now = new Date();
diff --git a/src/store/actions.js b/src/store/actions.js
index 88cb2d1..f5d51e7 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -58,9 +58,13 @@ const actions = {
     setMComparison: ({commit}, log) => {
         commit('setMComparison', log) 
     },
+    //设定主题对比和状态
     setTComparison: ({commit}, log) => {
         commit('setTComparison', log) 
     },
+    setTcStatus: ({commit}, log) => {
+        commit('setTcStatus', log) 
+    },
     setEComparison: ({commit}, log) => {
         commit('setEComparison', log) 
     },
diff --git a/src/store/getters.js b/src/store/getters.js
index 235e598..d76b573 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -63,6 +63,9 @@ const getters = {
     getTComparison(state) {
         return state.tComparison 
     },
+    getTcStatus(state) {
+        return state.tcStatus 
+    },
     getMcStatus(state) {
         return state.mcStatus 
     },
diff --git a/src/store/mutations.js b/src/store/mutations.js
index d791e47..bbbb076 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -108,6 +108,11 @@ const mutations = {
         let str = JSON.stringify(log);
         LS.put('tComparison', str, 1/8);
     },
+    setTcStatus: (state, log) => {
+        state.tcStatus = log;
+        let str = JSON.stringify(log);
+        LS.put('tcStatus', str, 1/8);
+    },
     setLevelBtn: (state, log) => {
         state.levelBtn = log;
         let str = JSON.stringify(log);
diff --git a/src/store/state.js b/src/store/state.js
index 4584e11..a1ea147 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -28,6 +28,7 @@ const state = {
     mcStatus:LS.get('mcStatus') ? JSON.parse(LS.get('mcStatus')) : false,
     eComparison:LS.get('eComparison') ? JSON.parse(LS.get('eComparison')) : [],
     tComparison:LS.get('tComparison') ? JSON.parse(LS.get('tComparison')) : [], //主题对比
+    tcStatus:LS.get('tcStatus') ? JSON.parse(LS.get('tcStatus')) : false,
     levelBtn:LS.get('levelBtn') ? JSON.parse(LS.get('levelBtn')) : [],
     menu: LS.get('menu') ? JSON.parse(LS.get('menu')) : [],
 }
diff --git a/src/views/BrandComparison/brandTonalDistribution/roundata/opt.js b/src/views/BrandComparison/brandTonalDistribution/roundata/opt.js
index 853878b..3223342 100644
--- a/src/views/BrandComparison/brandTonalDistribution/roundata/opt.js
+++ b/src/views/BrandComparison/brandTonalDistribution/roundata/opt.js
@@ -28,7 +28,7 @@ function createData(obj = {}) {
             //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
             //给第一个设置0，第四个设置1，就是垂直渐变
             offset: 0,
-            color: 'black'
+            color: color
          }, {
             offset: 1,
             color: color
diff --git a/src/views/ThemeAnalize/index.vue b/src/views/ThemeAnalize/index.vue
index a3d2c9a..9c390d4 100644
--- a/src/views/ThemeAnalize/index.vue
+++ b/src/views/ThemeAnalize/index.vue
@@ -9,7 +9,7 @@
                   <a-tabs type="card" @change=handlerChangeTheme>
                       <template slot="tabBarExtraContent">
                           <a-button @click="handlerAdd" type="primary">新增主题</a-button>
-                          <!-- <a-button @click="handlerCompare" type="primary" style="margin: 0px 16px 0px 16px">主题对比</a-button> -->
+                          <a-button @click="handlerCompare" type="primary" style="margin: 0px 16px 0px 16px">主题对比</a-button>
                       </template>
                       <a-tab-pane class="tab-pane" key="0" tab="我的主题">
                           <div class="card-items" v-for="(item, index) in myThemeArr" :key="index">
diff --git a/src/views/ThemeComparison/ThemeCompare.vue b/src/views/ThemeComparison/ThemeCompare.vue
index 5cbf438..7e43b42 100644
--- a/src/views/ThemeComparison/ThemeCompare.vue
+++ b/src/views/ThemeComparison/ThemeCompare.vue
@@ -1,162 +1,124 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-05 13:56:24
- * @LastEditTime: 2021-12-16 10:03:29
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
--->
 <template>
     <div class="d-container">
-        <div class="bbc-inner">
-            <brandCompateHeader ref="brandRef" @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 brands" :key="index" @click="handlerBrand(item)">{{item.brandname}}</li>
-                    </ul>
-                    <div style="clear: both"></div>
-                </div>
+        <div class="bc-outter">
+                <themeCompateHeader :data="getTComparison" @change="handlerChangeTheme"></themeCompateHeader>
+                <vue-lazy-component>
+                    <informationTrend></informationTrend>
+                </vue-lazy-component>
+            <div class="bc-d2">
+                <vue-lazy-component>
+                    <overallInformation></overallInformation>
+                </vue-lazy-component>
+                <vue-lazy-component>
+                    <overallNumberOfInteractions></overallNumberOfInteractions>
+                </vue-lazy-component>
+            </div>
+                <vue-lazy-component>
+                    <themeTonalDistribution></themeTonalDistribution>
+                </vue-lazy-component>
+            <div class="bc-d2">
+                <vue-lazy-component>
+                    <channelDistribution></channelDistribution>
+                </vue-lazy-component>
+                <vue-lazy-component>
+                    <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
+                </vue-lazy-component>
             </div>
-            <div class="beCpm-footer" @click="handlerSubmit">
-                开始对比
+                <vue-lazy-component>
+                    <themeTOPMedia></themeTOPMedia>
+                </vue-lazy-component>
+                <vue-lazy-component>
+                    <overallWordCloudComparison></overallWordCloudComparison>
+                </vue-lazy-component>
+            <div class="bc-d4">
+                <v-label-div title="主题微博对比"></v-label-div>
+                <div class="bc-d4-d1">
+                    <vue-lazy-component>
+                        <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <weiboBigVComparison></weiboBigVComparison>
+                    </vue-lazy-component>
+                </div>
+                    <vue-lazy-component>
+                        <weiboTuneComparison></weiboTuneComparison>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                    </vue-lazy-component>
+                <div class="bc-d4-d2">
+                    <vue-lazy-component>
+                        <userAreaDistribution></userAreaDistribution>
+                    </vue-lazy-component>
+                    <vue-lazy-component>
+                        <weiboUserPortrait></weiboUserPortrait>
+                    </vue-lazy-component>
+                </div>
             </div>
-        </div> 
+        </div>
     </div>
 </template>
 
 <script>
-import {getRecommendSeries} from "@/api/comm"
-import brandCompateHeader from "./brandCompateHeader"
 export default {
-    name: "BrandBeginComparte",
+    name: "ThemeCompare",
+    inject: ["reload"],
     components: {
-        brandCompateHeader
-    },
-    inject: ['reload'],
-    data() {
-        return {
-            form: {
-                token: "",
-                sType: 'brand'
-            },
-            chooseArr: [null, null, null, null, null, null],
-            brands: [],
-        }
-    },
-    created() {
-        this.form.token = this.getToken;
-        this.getData();
+        themeCompateHeader: (resolve) => require(['./themeCompateHeader'], resolve), // 选择主题
+        informationTrend: (resolve) => require(['./informationTrend'], resolve), // 信息量趋势
+        overallInformation: (resolve) => require(['./overallInformation'], resolve), // 总体信息量
+        overallNumberOfInteractions: (resolve) => require(['./overallNumberOfInteractions'], resolve), // 总体互动人数
+        themeTonalDistribution: (resolve) => require(['./themeTonalDistribution'], resolve), // 主题调性分布
+        channelDistribution: (resolve) => require(['./channelDistribution'], resolve), // 渠道分布
+        keyMediaCommunicationComparison: (resolve) => require(['./keyMediaCommunicationComparison'], resolve), // 重点媒体传播对比
+        themeTOPMedia: (resolve) => require(['./themeTOPMedia'], resolve), // 传播top媒体
+        overallWordCloudComparison: (resolve) => require(['./overallWordCloudComparison'], resolve), // 整体词云对比
+        comparisonOfWeiboInformation: (resolve) => require(['./comparisonOfWeiboInformation'], resolve), // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractions: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractions'], resolve), // 微博互动人数对比
+        weiboBigVComparison: (resolve) => require(['./weiboBigVComparison'], resolve), // 整体词云对比
+        weiboTuneComparison: (resolve) => require(['./weiboTuneComparison'], resolve), // 微博调性对比
+        weiboContentDirectionComparison: (resolve) => require(['./weiboContentDirectionComparison'], resolve), // 微博内容方向对比
+        userAreaDistribution: (resolve) => require(['./userAreaDistribution'], resolve), // 用户区域分布
+        weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), // 用户区域分布
     },
     methods: {
-        // 获取推荐品牌
-        getData() {
-            let obj = Object.assign({}, this.form);
-            getRecommendSeries(obj).then(res => {
-                let data = res.data || [];
-                this.brands = data;
-            })
-        },
-        // 选择默认的车型
-        handlerBrand(row) {
-            for(let i = 0; i < this.chooseArr.length; i++) {
-                let n = this.chooseArr.findIndex(ele =>{
-                    return ele && ele.brandname === row.brandname
-                })
-              
-                if(!this.chooseArr[i] && n === -1) {
-                    this.chooseArr[i] = row;
-                    let obj = this.$refs.brandRef.brands[i]
-                    obj.name = row.brandname;
-                    obj.isDel = true;
-                    return;
-                }
-            }    
-        },
-         // 删除
-        handlerDel(n) {
-            this.chooseArr[n] = null;
+        handlerChangeTheme(arr) {
+            this.setTComparison(arr);
+            this.reload();
         },
-        // 开始对比
-        handlerSubmit() {
-            let arr = this.$refs.brandRef.brands || [];
-            let filterArr = arr.filter((ele) => {
-                 return ele.name;
-            });
-            if(filterArr.length < 2) {
-                this.$message.warning('至少2个品牌进行对比');
-                return;
-            }
-            this.setBComparison(filterArr);
-            this.setBcStatus(true);
-            this.reload()
-        }
     }
 }
 </script>
 
-<style lang="less" scoped>
-.bbc-inner {
+<style lang="less">
+.bc-outter {
     padding: 0px 16px 16px 16px;
 }
-.mbc-inner {
+.bc-d2 {
     width: 100%;
-    height: 488px;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+.bc-d4 {
+    width: 100%;
+    height: auto;
     border: 2px solid #0f2a4d;
     margin-top: 16px;
-    .mbc-dd {
+    .bc-d4-d1 {
         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;
-            }
-        }
+        display: flex;
+        justify-content: flex-start;
+    }
+    .bc-d4-d2 {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
     }
-}
-.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;
-    font-weight: bold;
-    text-align: center;
-    line-height: 64px;
-    margin-top: 16px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ThemeComparison/ThemeIndex.vue b/src/views/ThemeComparison/ThemeIndex.vue
new file mode 100644
index 0000000..b563b0d
--- /dev/null
+++ b/src/views/ThemeComparison/ThemeIndex.vue
@@ -0,0 +1,227 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-05 13:56:24
+ * @LastEditTime: 2021-12-16 10:03:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="bbc-inner">
+            <themeCompateHeader ref="brandRef" @del="handlerDel"></themeCompateHeader>
+            <div class="mbc-inner">
+                <v-label-div title="主题分析">
+                </v-label-div>
+                <div class="card-outter">
+                    <div class="card-items" v-for="(item, index) in myThemeArr" :key="index">
+                        <div class="card-item-top">
+                            <div class="card-uncomp" v-if="item.isCom">
+                                <span style="margin-top: 5px">进行中</span>
+                            </div>
+                            <div class="card-completed" v-else>已完成</div>
+                        </div>
+                        <div class="card-item-data" @click="addThemeData(item)">
+                            <div class="cid-title">
+                              {{item.name}}
+                            </div>
+                            <div class="cid-data">
+                                <div class="s1"><div class="s1-title">开始时间</div><div class="s1-text">{{item.startTime}}</div></div>
+                                <div class="s1"><div class="s1-title">结束时间</div><div class="s1-text">{{item.endTime}}</div></div>
+                                <div class="s1"><div class="s1-title">相关报道（条）</div><div class="s1-text">{{item.total}}</div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="beCpm-footer" @click="handlerSubmit">
+                开始对比
+            </div>
+        </div> 
+    </div>
+</template>
+
+<script>
+import {getSchemeDataToTheme} from "@/api/ThemeAnalize"
+import themeCompateHeader from "./themeCompateHeader"
+export default {
+    name: "BrandBeginComparte",
+    components: {
+        themeCompateHeader
+    },
+    inject: ['reload'],
+    data() {
+        return {
+            form: {
+                token: "",
+                pageIndex: '',
+                pageSize: '',
+                sType: 'former' //former往期 now现在
+            },
+            chooseArr: [null, null, null, null, null, null],
+            brands: [],
+            myThemeArr: [],
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
+    },
+    methods: {
+        // 获取全部主题
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getSchemeDataToTheme(obj).then(res => {
+                let data = res.data;
+                let themeArr = [];
+                data.forEach(ele => {
+                    let obj = {
+                        guids: ele.Guids,
+                        name: ele.Name,
+                        startTime: ele.StartTime,
+                        endTime: ele.EndTime,
+                        total: ele.ReportSum,
+                        isCom: true
+                    };
+                    //判断是否到期
+                    if(new Date(ele.EndTime) <= new Date(this.getDatetime().clock + '' + this.getDatetime().sClock)) {
+                        obj.isCom = false
+                    }
+                    themeArr.push(obj);
+                })
+                this.myThemeArr = themeArr;
+            })
+        },
+        // 选择主题
+        addThemeData(row) {
+            for(let i = 0; i < this.chooseArr.length; i++) {
+                let n = this.chooseArr.findIndex(ele =>{
+                    return ele && ele.name === row.name
+                })
+                if(!this.chooseArr[i] && n === -1) {
+                    this.chooseArr[i] = row;
+                    let obj = this.$refs.brandRef.brands[i]
+                    obj.name = row.name;
+                    obj.guids = row.guids;
+                    obj.isDel = true;
+                    return;
+                }
+            }
+        },
+        // 删除
+        handlerDel(n) {
+            this.chooseArr[n] = null;
+        },
+        // 开始对比
+        handlerSubmit() {
+            let arr = this.$refs.brandRef.brands || [];
+            let filterArr = arr.filter((ele) => {
+                 return ele.name;
+            });
+            if(filterArr.length < 2) {
+                this.$message.warning('至少2个品牌进行对比');
+                return;
+            }
+            this.setTComparison(filterArr);
+            this.setTcStatus(true);
+            this.reload()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.bbc-inner {
+    padding: 0px 16px 16px 16px;
+}
+.mbc-inner {
+    width: 100%;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .card-outter {
+        display: flex;
+        flex-wrap:wrap;
+        justify-content: flex-start;
+        align-items: center;
+        padding-left: 16px;
+    }
+}
+.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;
+    font-weight: bold;
+    text-align: center;
+    line-height: 64px;
+    margin-top: 16px;
+}
+.card-items {
+    width: 446px;
+    height: 240px;
+    border: 2px solid #0F2A4D;
+    border-radius: 4px;
+    margin-top: 16px;
+    margin-right: 20px;
+    background: #010B19;
+    .card-item-top {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .card-uncomp {
+            color: #63AECC;
+            width: 95px;
+            height: 28px;
+            border-radius: 0px 0px 0px 1px;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-image: url('../../assets/images/Index/card_status.png');
+            display: -webkit-box;
+            -webkit-box-align: center;/*兼容FSafari、Chrome */
+            -webkit-box-pack: center;/*兼容FSafari、Chrome */
+        };
+        .card-completed {
+            color: rgb(71, 114, 145);
+            width: 95px;
+            height: 28px;
+            background-repeat: no-repeat;
+            background-size: cover;
+            border-radius: 0px 0px 0px 1px;
+            background-image: url('../../assets/images/Index/card_status.png');
+            display: -webkit-box;
+            -webkit-box-align: center;/*兼容FSafari、Chrome */
+            -webkit-box-pack: center;/*兼容FSafari、Chrome */
+        }
+    }
+    .card-item-data {
+        width: 100%;
+        padding: 16px;
+        color: white;
+        .cid-title {
+            height: 133px;
+            font-size: 20px;
+        }
+        .cid-data {
+            display: flex;
+            justify-content: flex-start;
+            .s1 {
+                width: 33%;
+                display: block;
+                font-family: Bebas;
+                font-size: 12px;
+                .s1-title {
+                    color: #7b93a5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ThemeComparison/channelDistribution/index.vue b/src/views/ThemeComparison/channelDistribution/index.vue
new file mode 100644
index 0000000..21f5229
--- /dev/null
+++ b/src/views/ThemeComparison/channelDistribution/index.vue
@@ -0,0 +1,89 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparison/index.js";
+import createOpt from "./opt";
+export default {
+  name: "channelDistribution",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getSourcetypeC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let brandList = [];
+            let dx = [];
+            data.forEach((e) => {
+              let ab = e.Data || {};
+              for (let key in ab) {
+                if (!dx.includes(key)) {
+                  dx.push(key);
+                }
+              }
+              brandList.push(e.Name);
+            });
+            this.opt = createOpt(data, dx, brandList);
+            this.load = false;
+            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>
diff --git a/src/views/ThemeComparison/channelDistribution/opt.js b/src/views/ThemeComparison/channelDistribution/opt.js
new file mode 100644
index 0000000..97b733c
--- /dev/null
+++ b/src/views/ThemeComparison/channelDistribution/opt.js
@@ -0,0 +1,166 @@
+/*
+ * @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"
+
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#3373CC66'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#63AECC66'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#54BF9366'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#CC9D1266'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#CC773366'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#CC5B4166'
+    }
+], false)]
+
+function createData(dataList = [],dx = []) {
+    let arr = [];
+    dataList.forEach(e => {
+        let a = [];
+        let Data = e.Data || {};
+        dx.forEach(e => {
+            a.push(Data[e])
+        })
+        let o = {
+            name: e.Name,
+            type: 'bar',
+            barGap: 0,
+            barWidth: 13.7,
+            emphasis: {
+                focus: 'series'
+            },
+            data: a
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+export default function createOpt(dataList = [],dx = [], brandList = []) {
+    let info = createData(dataList,dx);
+    return {
+        grid: {
+            left: 10,
+            right: '5%',
+            bottom: 10,
+            top: 52,
+            // top: "56px",
+            // left: "16px",
+            // right: "28px",
+            // bottom: "16px",
+            containLabel: true,
+        },
+        color: colors,
+        legend: {
+            data: brandList,
+            textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+            },
+            y: 12,
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
+        },
+        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: 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: info
+    }
+}
\ No newline at end of file
diff --git a/src/views/ThemeComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue b/src/views/ThemeComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
new file mode 100644
index 0000000..3a5f59e
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
@@ -0,0 +1,86 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparisonWeibo";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfTheNumberOfWeiboInteractions",
+  data() {
+    return {
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {},
+      load: false,
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getInteractCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach((ele) => {
+              dx.push(ele.key);
+              ds.push(ele.value);
+            });
+            this.opt = createSingleColumnar(dx, ds,'#54BF93');
+            this.load = false;
+            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>
diff --git a/src/views/ThemeComparison/comparisonOfWeiboInformation/index.vue b/src/views/ThemeComparison/comparisonOfWeiboInformation/index.vue
new file mode 100644
index 0000000..38e85fb
--- /dev/null
+++ b/src/views/ThemeComparison/comparisonOfWeiboInformation/index.vue
@@ -0,0 +1,87 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparisonWeibo";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "comparisonOfWeiboInformation",
+  data() {
+    return {
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      opt: {}
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getContrastCount0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            let ds = [];
+            data.forEach(ele => {
+                dx.push(ele.key);
+                ds.push(ele.value)
+            })
+            this.opt = createSingleColumnar(dx,ds);
+            this.load = false
+            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>
diff --git a/src/views/ThemeComparison/index.vue b/src/views/ThemeComparison/index.vue
index 84811d2..5e29621 100644
--- a/src/views/ThemeComparison/index.vue
+++ b/src/views/ThemeComparison/index.vue
@@ -1,12 +1,27 @@
 <template>
     <div class="d-container">
-        
+        <theme-compare v-if="hasData"></theme-compare>
+        <theme-index v-else></theme-index>
     </div>
 </template>
 
 <script>
+import ThemeIndex from "./ThemeIndex.vue";
+import ThemeCompare from './ThemeCompare.vue';
 export default {
-    name: "ThemeComparison"
+    name: "ThemeComparison",
+    components: {
+        ThemeIndex,
+        ThemeCompare,
+    },
+    data() {
+        return {
+            hasData: false,
+        };
+    },
+    created() {
+        this.hasData = this.getTcStatus;
+    },
 }
 </script>
 
diff --git a/src/views/ThemeComparison/informationTrend/index.vue b/src/views/ThemeComparison/informationTrend/index.vue
new file mode 100644
index 0000000..976787b
--- /dev/null
+++ b/src/views/ThemeComparison/informationTrend/index.vue
@@ -0,0 +1,159 @@
+<!--
+ * @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-loading="load">
+    <v-label-div title="信息量趋势"></v-label-div>
+    <div class="it-inner">
+      <v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
+    </div>
+    <div class="vshow" v-if="modelShow" :style="modelStyle">
+      <vLabel-div title="实时热点事件">
+        <a-button @click="closeBox">关闭</a-button>
+      </vLabel-div>
+      <div class="vshow-item" v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop" :key="index">
+        <a :href="item.url" target="tar">{{doStr(item.title, 28)}}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountTime0528C } from "@/api/ThemeComparison";
+import {doStr} from "@/utils/gol/dataTool"
+import createOpt from "./opt";
+export default {
+  name: "informationTrend",
+  data() {
+    return {
+      //弹出框//
+      modelStyle: {
+        left: "",
+        top: "",
+      },
+      modelShow: false,
+      ecbox: {
+        //图表宽高
+        width: 1880,
+        height: 490,
+      },
+      ecmodel: {
+        //弹框宽高
+        width: 300,
+        height: 280,
+      },
+      activeCol: 0,
+      activeIndex: 0,
+      //-*-//
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {},
+      urlArr: [],
+      doStr: doStr
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.form);
+      this.load = true;
+      getCountTime0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        let ds = [];
+        this.urlArr = data;
+        let markData = [[], [], [], [], [], []];
+        let dataI = 0;
+        data.forEach((ele) => {
+          let key = ele.key;
+          let value = ele.value;
+          dx.push(key);
+          ds.push(value);
+          for (let i = 0; i < ele.value.length; i++) {
+            if (ele.value[i].hotTop[0]) {
+              let obj = {
+                timeIndex: dataI,
+                yVal: data[dataI].value[i].value,
+                url: ele.value[i].hotTop,
+              };
+              markData[i].push(obj);
+              //  console.log(i)//车型的索引
+              //  console.log(dataI)//时间的索引
+              //  console.log(ele.value[i].hotTop)//事件列表[{},{}]
+            }
+          }
+          dataI = dataI + 1;
+        });
+        this.opt = createOpt(dx, ds, markData);
+        this.load = false;
+      });
+    },
+    // 弹出框
+    clickMark(data) {
+      this.activeCol = data.index;
+      this.activeIndex = data.seriesIndex;
+      this.modelShow = true;
+      let mw = window.event;
+      if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
+        this.modelStyle.left = mw.offsetX + 20 + "px";
+      } else {
+        this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
+      }
+      if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
+        this.modelStyle.top = mw.offsetY + "px";
+      } else {
+        this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
+      }
+    },
+    closeBox() {
+      this.modelShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.it-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .it-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+.vshow{
+  position: absolute;
+    width: 300px;
+    background: rgb(3, 18, 36);
+    border: 4px solid #0f2a4d;
+    .vshow-item {
+        padding: 11px;
+        width: 100%;
+        font-size: 15px;
+        color: rgb(54, 189, 239);
+    }
+}
+</style>
diff --git a/src/views/ThemeComparison/informationTrend/opt.js b/src/views/ThemeComparison/informationTrend/opt.js
new file mode 100644
index 0000000..a7c16dc
--- /dev/null
+++ b/src/views/ThemeComparison/informationTrend/opt.js
@@ -0,0 +1,142 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-11-19 19:47:53
+ * @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 = [], markData = []) {
+    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],
+                    markPoint: {
+                        data: [],
+                    }
+                };
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+    for(let i = 0;i< arr.length; i++) {
+        markData[i].forEach(ele => {
+            arr[i].markPoint.data.push(
+                {
+                    name: 'Max',
+                    xAxis: ele.timeIndex, yAxis: ele.yVal,
+                    symbol: 'pin',
+                    symbolSize: 16,
+                    symbolOffset: [0, '-70%'],
+                }
+            )
+        })
+    }
+    return arr 
+}
+export default function createOpt(dx = [], ds = [], markData = []) {
+    let data = createData(ds, markData);
+    return {
+        grid: {
+            left: 10,
+            right: '5%',
+            bottom: 10,
+            top: 52,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+            },
+            y: 12,
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let rex = "00:00:00";
+                    let isCont = false;
+                    let str = value;
+                    for(let i = 0;i<dx.length-1;i++){
+                        //连续两条带小时
+                        if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
+                            isCont = true;
+                            break;
+                        }
+                    }
+                    if(isCont == true) {
+                        str = value.substring(10, 16)
+                    } else {
+                        str = value.substring(5, 10)
+                    }
+                    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
+    }
+}
diff --git a/src/views/ThemeComparison/keyMediaCommunicationComparison/index.vue b/src/views/ThemeComparison/keyMediaCommunicationComparison/index.vue
new file mode 100644
index 0000000..724def8
--- /dev/null
+++ b/src/views/ThemeComparison/keyMediaCommunicationComparison/index.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:34:26
+ * @LastEditTime: 2021-11-11 16:43:10
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
+-->
+<template>
+  <div class="kmcc-outter" v-loading="load">
+    <v-label-div title="重点媒体传播对比"> </v-label-div>
+    <div class="kmcc-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import createOpt from "./opt";
+import { getSourceCount0528C } from "@/api/ThemeComparison/index.js";
+export default {
+  name: "kmcc-outter",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getSourceCount0528C(obj).then((res) => {
+        let data = res.data;
+        let dx = [];
+        data.forEach((ele) => {
+          let ab = ele.value || [];
+          // 匹配所有出现过的媒体，放入dx中
+          ab.forEach((e) => {
+            if (!dx.includes(e.key)) {
+              dx.push(e.key);
+            }
+          });
+        });
+        this.opt = createOpt(dx, data);
+        this.load = false;
+      });
+    },
+  },
+};
+</script>
+
+<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>
diff --git a/src/views/ThemeComparison/keyMediaCommunicationComparison/opt.js b/src/views/ThemeComparison/keyMediaCommunicationComparison/opt.js
new file mode 100644
index 0000000..f2065a1
--- /dev/null
+++ b/src/views/ThemeComparison/keyMediaCommunicationComparison/opt.js
@@ -0,0 +1,169 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-11-21 16:51:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import { bigNumberTransform } from "@/utils/gol/dataTool";
+import * as echarts from "echarts";
+
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#3373CC'
+  },
+  {
+      offset: 1,
+      color: '#3373CC66'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#63AECC'
+  },
+  {
+      offset: 1,
+      color: '#63AECC66'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#54BF93'
+  },
+  {
+      offset: 1,
+      color: '#54BF9366'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#CC9D12'
+  },
+  {
+      offset: 1,
+      color: '#CC9D1266'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#CC7733'
+  },
+  {
+      offset: 1,
+      color: '#CC773366'
+  }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  {
+      offset: 0,
+      color: '#CC5B41'
+  },
+  {
+      offset: 1,
+      color: '#CC5B4166'
+  }
+], false)]
+
+function createData(dataList = [],dx) {
+  let arr = [];
+  dataList.forEach(ele => {
+    let a = [];
+    let Data = ele.value || [];
+    dx.forEach(e => {
+      Data.forEach(ex => {
+        if (ex.key === e) {
+          a.push(ex.value)
+        }
+      })
+    })
+    let o = {
+      name: ele.key,
+      type: 'bar',
+      stack: 'total',
+      barWidth: 24,
+      emphasis: {
+        focus: 'series'
+      },
+      data: a
+    };
+    arr.push(o);
+  })
+  return arr;
+}
+
+export default function createOpt(dx = [], dataList = [], n = 4) {
+  let info = createData(dataList, dx);
+  return {
+    grid: {
+      left: 10,
+      right: '5%',
+      bottom: 10,
+      top: 52,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 12,
+      x: 16,
+      itemWidth: 12,
+      itemHeight: 12
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        formatter: function (value) {
+          return (value.length > n ? (value.slice(0,n)+"...") : value )
+        },
+      },
+      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: info
+  }
+
+}
\ No newline at end of file
diff --git a/src/views/ThemeComparison/overallInformation/index.vue b/src/views/ThemeComparison/overallInformation/index.vue
new file mode 100644
index 0000000..8ac8a4d
--- /dev/null
+++ b/src/views/ThemeComparison/overallInformation/index.vue
@@ -0,0 +1,77 @@
+<!--
+ * @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-loading="load">
+    <v-label-div title="整体信息量"></v-label-div>
+    <div class="oi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getContrastCount0528C } from "@/api/ThemeComparison";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "overallInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.form);
+      this.load = true;
+      getContrastCount0528C(obj).then((res) => {
+        let data = res.data || [];
+        let brandsList = [];
+        let infoList = [];
+        data.forEach((e) => {
+          brandsList.push(e.key);
+          infoList.push(e.value);
+        });
+        this.opt = createSingleColumnar(brandsList, infoList,'#3373CC',10);
+        this.load = false;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.oi-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .oi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/overallNumberOfInteractions/index.vue b/src/views/ThemeComparison/overallNumberOfInteractions/index.vue
new file mode 100644
index 0000000..7241753
--- /dev/null
+++ b/src/views/ThemeComparison/overallNumberOfInteractions/index.vue
@@ -0,0 +1,78 @@
+<!--
+ * @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-loading="load">
+    <v-label-div title="整体互动人数"></v-label-div>
+    <div class="onoi-inner">
+      <v-echarts :opt="opt"></v-echarts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInteractCount0528C } from "@/api/ThemeComparison";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
+export default {
+  name: "overallInformation",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      this.load = true;
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getInteractCount0528C(obj).then((res) => {
+        let data = res.data || [];
+        let brandsList = [];
+        let infoList = [];
+        data.forEach((e) => {
+          brandsList.push(e.key);
+          infoList.push(e.value);
+        });
+        this.opt = createSingleColumnar(brandsList, infoList,'#54BF93',10);
+        this.load = false;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.onoi-outter {
+  width: 936px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  .onoi-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/overallWordCloudComparison/index.vue b/src/views/ThemeComparison/overallWordCloudComparison/index.vue
new file mode 100644
index 0000000..250fcaf
--- /dev/null
+++ b/src/views/ThemeComparison/overallWordCloudComparison/index.vue
@@ -0,0 +1,133 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparison";
+import createWordCloud from "@/utils/gol/bubbleWord";
+export default {
+  name: "overallWordCloudComparison",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      dataSource: []
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        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;
+            this.load = false;
+            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: center;
+    .owcc-item {
+      width: 314px;
+      height: 412px;
+      margin-top: 5px;
+      .owcc-draw {
+        width: 100%;
+        height: calc(100% - 48px);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/overallWordCloudComparison/opt.js b/src/views/ThemeComparison/overallWordCloudComparison/opt.js
new file mode 100644
index 0000000..296dcc1
--- /dev/null
+++ b/src/views/ThemeComparison/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
+        }
+        ]
+    }
+}
diff --git a/src/views/ThemeComparison/themeCompateHeader/index.vue b/src/views/ThemeComparison/themeCompateHeader/index.vue
new file mode 100644
index 0000000..e57d733
--- /dev/null
+++ b/src/views/ThemeComparison/themeCompateHeader/index.vue
@@ -0,0 +1,194 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-05 13:18:12
+ * @LastEditTime: 2021-12-16 10:25:16
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
+-->
+<template>
+    <div class="bc-d1">
+        <v-label-div title="品牌对比">
+            <div>
+                <v-btn @click="reCompare">重选对比</v-btn>
+                <v-btn style="margin-left: 1rem" @click="goback">返回主题分析</v-btn>
+            </div>
+        </v-label-div>
+        <div class="bc-d1-inner">
+            <template v-for="(item,index) in brands">
+                <div class="bc-d1-item" :key="index">
+                    <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
+                        <span class="s2"><span style="margin-right:8px;margin-top:3px">主题{{index+1}}</span></span>
+                        <span class="s3" @click="handlerDel(index)" v-if="item.isDel">删除</span>
+                        <div class="s4">
+                            {{item.name}}
+                        </div>
+                    </div>
+                    <img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "brandCompateHeader",
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    inject: ['reload'],
+    watch: {
+        data: {
+            handler(val) {
+                if (val.length > 0) {
+                    val.forEach((ele, index) => {
+                        this.brands[index] = Object.assign(
+                            this.brands[index],
+                            ele
+                        );
+                    });
+                }
+            },
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            brandIndex: 0,
+            brands: [
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+                {
+                    name: "",
+                    isDel: false,
+                },
+            ],
+        };
+    },
+    methods: {
+        goback() {
+            this.$router.go(-1);
+        },
+        // 打开品牌选择
+        openBrand(n) {
+            this.brandShow = true;
+            this.brandIndex = n;
+        },
+        // 删除
+        handlerDel(n) {
+            let row = this.brands[n];
+            row.name = "";
+            row.isDel = false;
+            let filterArr = this.brands.filter((ele) => {
+                return ele.name;
+            });
+            if (filterArr.length === 0) {
+                this.setTcStatus(false);
+            }
+            this.$emit("del", n);
+            this.$emit("change", filterArr);
+        },
+        // 重选对比
+        reCompare() {
+            this.setTcStatus(false);
+            this.reload()
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.bc-d1 {
+    width: 100%;
+    height: 222px;
+    border: 2px solid #0f2a4d;
+    .bc-d1-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .bc-d1-item {
+            display: inline-block;
+            display: flex;
+            justify-content: flex-start;
+        }
+        .d1-m1 {
+            width: 96px;
+            height: 102px;
+        }
+        .d1-item {
+            position: relative;
+            width: 228.5px;
+            height: 120px;
+            background: linear-gradient(180deg, #0088C9 0%, #001C43 100%);
+            border-radius: 4px;
+            opacity: 0.8;
+            border: 2px solid #0091FF;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            .s2 {
+                display: block;
+                width: 80px;
+                height: 27px;
+                display: flex;
+                opacity: 0.6;
+                justify-content: space-around;
+                background-image: url("../../../assets/images/Index/card_status_small.png");
+                background-repeat: no-repeat;
+                background-size: cover;
+                color: rgba(99, 174, 204);
+                font-size: 12px;
+                font-weight: bold;
+            }
+            .s3 {
+                display: block;
+                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: cover;
+                color: #4390ba;
+                text-align: center;
+                line-height: 28px;
+                font-size: 12px;
+                font-weight: bold;
+                cursor: pointer;
+            }
+            .s4 {
+                padding: 12px 16px 20px 16px;
+                font-size: 14px;
+                font-family: PingFang-SC-Bold, PingFang-SC;
+                color: #FFFFFF
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ThemeComparison/themeTOPMedia/index.vue b/src/views/ThemeComparison/themeTOPMedia/index.vue
new file mode 100644
index 0000000..149b297
--- /dev/null
+++ b/src/views/ThemeComparison/themeTOPMedia/index.vue
@@ -0,0 +1,125 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-16 11:01:43
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter" v-loading="load">
+        <v-label-div title="品牌传播TOP媒体"> </v-label-div>
+        <div class="bcm-inner">
+            <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
+                <span class="ss1" :style="{ color: colors[index] }">{{
+          item.key
+        }}</span>
+                <div class="dd1">
+                  <vue-scroll>
+                    <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
+                  </vue-scroll>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { getSourceTopCount0528C } from "@/api/ThemeComparison";
+import vRankingBcm from "./v-ranking-bcm";
+export default {
+    name: "brandCommunicationTOPMedia",
+    components: {
+        vRankingBcm,
+    },
+    data() {
+        return {
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            load: false,
+            form: {
+                token: "",
+                sGuid: "",
+                sTimeType: 3
+            },
+            arrList: [],
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getTComparison;
+            let sGuid = [];
+            arr.forEach((ele) => {
+                sGuid.push(ele.guids);
+            });
+            this.form.sGuid = sGuid.toString();
+            this.getData();
+        },
+        getData() {
+            return new Promise((resolve, reject) => {
+                let obj = Object.assign({}, this.getCtime2, this.form);
+                this.load = true;
+                getSourceTopCount0528C(obj)
+                    .then((res) => {
+                        let data = res.data || [];
+                        //往原始数据内添加排名
+                        data.forEach((ele) => {
+                            for (
+                                let index = 0;
+                                index < ele.value.length;
+                                index++
+                            ) {
+                                ele.value[index].num = index + 1;
+                            }
+                        });
+                        this.arrList = data;
+                        this.load = false;
+                        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: center;
+        .bcm-item {
+            width: 282px;
+            height: 100%;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+            .dd1 {
+                height: calc(100% - 44px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ThemeComparison/themeTOPMedia/v-ranking-bcm/index.vue b/src/views/ThemeComparison/themeTOPMedia/v-ranking-bcm/index.vue
new file mode 100644
index 0000000..0d0a973
--- /dev/null
+++ b/src/views/ThemeComparison/themeTOPMedia/v-ranking-bcm/index.vue
@@ -0,0 +1,232 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-12 16:14:56
+ * @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: #9ba4af;
+      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>
diff --git a/src/views/ThemeComparison/themeTonalDistribution/index.vue b/src/views/ThemeComparison/themeTonalDistribution/index.vue
new file mode 100644
index 0000000..5edec45
--- /dev/null
+++ b/src/views/ThemeComparison/themeTonalDistribution/index.vue
@@ -0,0 +1,131 @@
+<!--
+ * @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-loading="load">
+    <v-label-div title="主题调性分布"> </v-label-div>
+    <div class="bd-d1">
+      <div class="dd1" style="margin-left: 16px">
+        <span class="s1"></span><span class="s2">正面</span>
+      </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/ThemeComparison";
+import roundata from "./roundata";
+export default {
+  name: "brandTonalDistribution",
+  components: {
+    roundata,
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+      list: [
+
+      ]
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    //
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getAffectionsC(obj).then((res) => {
+          let data = res.data || [];
+          this.list = data;
+          this.load = false;
+          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);
+    margin-left: -24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/themeTonalDistribution/roundata/index.vue b/src/views/ThemeComparison/themeTonalDistribution/roundata/index.vue
new file mode 100644
index 0000000..3151935
--- /dev/null
+++ b/src/views/ThemeComparison/themeTonalDistribution/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>
diff --git a/src/views/ThemeComparison/themeTonalDistribution/roundata/opt.js b/src/views/ThemeComparison/themeTonalDistribution/roundata/opt.js
new file mode 100644
index 0000000..3223342
--- /dev/null
+++ b/src/views/ThemeComparison/themeTonalDistribution/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: color
+         }, {
+            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
+              }
+          ]
+    }
+}
diff --git a/src/views/ThemeComparison/userAreaDistribution/index.vue b/src/views/ThemeComparison/userAreaDistribution/index.vue
new file mode 100644
index 0000000..9404064
--- /dev/null
+++ b/src/views/ThemeComparison/userAreaDistribution/index.vue
@@ -0,0 +1,149 @@
+<!--
+ * @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-loading="load">
+    <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 { getRegionWeiBoC } from "@/api/ThemeComparisonWeibo";
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
+export default {
+  name: "userAreaDistribution",
+  data() {
+    return {
+      opt1: {},
+      opt2: {},
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load:false,
+      dataSource: [],
+      brandArr: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      Promise.all([this.getData()]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+      });
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.form);
+        this.load = true;
+        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;
+            this.load = false;
+            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: 579px;
+      height: 100%;
+    }
+    .d2 {
+      width: 465px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/userAreaDistribution/opt1.js b/src/views/ThemeComparison/userAreaDistribution/opt1.js
new file mode 100644
index 0000000..0d0d9c9
--- /dev/null
+++ b/src/views/ThemeComparison/userAreaDistribution/opt1.js
@@ -0,0 +1,83 @@
+
+
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 12:38:34
+ * @LastEditTime: 2021-11-12 16:35:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOptD1(dx = [],ds = []) {
+    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",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: dx,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            inverse: true
+        },
+        series: [
+            {
+                name: '2011',
+                type: 'bar',
+                barWidth: 16,
+                data: ds,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                    offset: 0,
+                    color: '#2f68b466'
+                }, {
+                    offset: 1,
+                    color: '#2f68b4'
+                }]),
+            }
+        ]
+    }
+}
diff --git a/src/views/ThemeComparison/userAreaDistribution/opt2.js b/src/views/ThemeComparison/userAreaDistribution/opt2.js
new file mode 100644
index 0000000..9efd42e
--- /dev/null
+++ b/src/views/ThemeComparison/userAreaDistribution/opt2.js
@@ -0,0 +1,102 @@
+/*
+ * @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(dm = []) {
+    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: dm
+            }
+        ]
+    }
+}
diff --git a/src/views/ThemeComparison/weiboBigVComparison/index.vue b/src/views/ThemeComparison/weiboBigVComparison/index.vue
new file mode 100644
index 0000000..3d3e823
--- /dev/null
+++ b/src/views/ThemeComparison/weiboBigVComparison/index.vue
@@ -0,0 +1,90 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparisonWeibo";
+import createOpt from "./opt";
+export default {
+  name: "weiboBigVComparison",
+  data() {
+    return {
+      load: false,
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      opt: {}
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getBoauthen0528C(obj)
+          .then((res) => {
+            let data = res.data || [];
+            let dx = [];
+            data.forEach((ele) => {
+            let ab = ele.value || [];
+            // 匹配所有出现过的媒体，放入dx中
+            ab.forEach((e) => {
+                if (!dx.includes(e.key) && e.value != 0) {
+                dx.push(e.key);
+                }
+            });
+            });
+            this.opt = createOpt(dx,data);
+            this.load = false;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.wbc-outter {
+  width: 630px;
+  height: 412px;
+  .wbc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/weiboBigVComparison/opt.js b/src/views/ThemeComparison/weiboBigVComparison/opt.js
new file mode 100644
index 0000000..d857fe8
--- /dev/null
+++ b/src/views/ThemeComparison/weiboBigVComparison/opt.js
@@ -0,0 +1,163 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-11-18 11:36:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+
+import * as echarts from "echarts";
+
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#3373CC66'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#63AECC66'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#54BF9366'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#CC9D1266'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#CC773366'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#CC5B4166'
+    }
+], false)]
+
+function createData(dataList = [], dx = []) {
+  let arr = [];
+  dataList.forEach(ele => {
+    let a = [];
+    let Data = ele.value || [];
+    dx.forEach(e => {
+      Data.forEach(ex => {
+        if (ex.key === e) {
+          a.push(ex.value)
+        }
+      })
+    })
+    let o = {
+      name: ele.key,
+      type: 'bar',
+      stack: 'total',
+      barWidth: 24,
+      emphasis: {
+        focus: 'series'
+      },
+      data: a
+    };
+    arr.push(o);
+  })
+  return arr;
+}
+
+export default function createOpt(dx = [], dataList = []) {
+  let info = createData(dataList, dx);
+  return {
+    grid: {
+      left: 10,
+      right: '5%',
+      bottom: 10,
+      top: 52,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 16,
+      itemWidth: 12,
+      itemHeight: 12
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        with: 1 / dx.length * 100 + '%',
+        overflow: 'truncate',
+        ellipsis: '...'
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: info
+  }
+
+}
\ No newline at end of file
diff --git a/src/views/ThemeComparison/weiboContentDirectionComparison/index.vue b/src/views/ThemeComparison/weiboContentDirectionComparison/index.vue
new file mode 100644
index 0000000..de86553
--- /dev/null
+++ b/src/views/ThemeComparison/weiboContentDirectionComparison/index.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-16 11:26:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter" v-loading="load">
+        <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>
+                <div class="dd1">
+                    <vue-scroll>
+                        <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
+                    </vue-scroll>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { getDirect0528C } from "@/api/ThemeComparisonWeibo";
+import vRankingBcm from "./v-ranking-bcm";
+export default {
+    name: "weiboContentDirectionComparison",
+    components: {
+        vRankingBcm,
+    },
+    data() {
+        return {
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            form: {
+                token: "",
+                sGuid: "",
+                sTimeType: 3
+            },
+            load: false,
+            sourceData: [],
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getTComparison;
+            let sGuid = [];
+            arr.forEach((ele) => {
+                sGuid.push(ele.guids);
+            });
+            this.form.sGuid = sGuid.toString();
+            this.getData();
+        },
+        getData() {
+            return new Promise((resolve, reject) => {
+                let obj = Object.assign({}, this.getCtime2, this.form);
+                this.load = true;
+                getDirect0528C(obj)
+                    .then((res) => {
+                        let data = res.data || [];
+                        let showData = [];
+                        data.forEach((e) => {
+                            //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
+                            let sortedArr = e.Data;
+                            sortedArr.sort(this.compare("value"));
+                            let obj = {
+                                key: e.Name,
+                                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;
+                        this.load = false;
+                        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: center;
+        .bcm-item {
+            width: 282px;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+            .dd1 {
+                height: calc(100% - 44px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ThemeComparison/weiboContentDirectionComparison/v-ranking-bcm/index.vue b/src/views/ThemeComparison/weiboContentDirectionComparison/v-ranking-bcm/index.vue
new file mode 100644
index 0000000..2f8e72a
--- /dev/null
+++ b/src/views/ThemeComparison/weiboContentDirectionComparison/v-ranking-bcm/index.vue
@@ -0,0 +1,232 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-12 16:15:53
+ * @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: #9ba4af;
+      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>
diff --git a/src/views/ThemeComparison/weiboTuneComparison/index.vue b/src/views/ThemeComparison/weiboTuneComparison/index.vue
new file mode 100644
index 0000000..0edbd9c
--- /dev/null
+++ b/src/views/ThemeComparison/weiboTuneComparison/index.vue
@@ -0,0 +1,136 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparisonWeibo";
+import wbRoundata from "./wbRoundata";
+export default {
+  name: "weiboTuneComparison",
+  data() {
+    return {
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
+      dataSource: []
+    };
+  },
+  components: {
+    wbRoundata,
+  },
+
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+        sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getAffectionsC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            this.dataSource = data;
+            this.load = false;
+            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);
+    margin-left: -24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/weiboTuneComparison/wbRoundata/index.vue b/src/views/ThemeComparison/weiboTuneComparison/wbRoundata/index.vue
new file mode 100644
index 0000000..da4459e
--- /dev/null
+++ b/src/views/ThemeComparison/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>
diff --git a/src/views/ThemeComparison/weiboTuneComparison/wbRoundata/opt.js b/src/views/ThemeComparison/weiboTuneComparison/wbRoundata/opt.js
new file mode 100644
index 0000000..73e8f5a
--- /dev/null
+++ b/src/views/ThemeComparison/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: color
+            }, {
+               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
+         }
+      ]
+   }
+}
diff --git a/src/views/ThemeComparison/weiboUserPortrait/index.vue b/src/views/ThemeComparison/weiboUserPortrait/index.vue
new file mode 100644
index 0000000..ece4e14
--- /dev/null
+++ b/src/views/ThemeComparison/weiboUserPortrait/index.vue
@@ -0,0 +1,200 @@
+<!--
+ * @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-loading="load">
+    <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/ThemeComparisonWeibo";
+import createOpt1 from "./opt1";
+import createOpt2 from "./opt2";
+export default {
+  name: "weiboUserPortrait",
+  data() {
+    return {
+      form: {
+        token: "",
+        sGuid: "",
+        sTimeType: 3
+      },
+      load: false,
+      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.getTComparison;
+      let sGuid = [];
+      arr.forEach((ele) => {
+          sGuid.push(ele.guids);
+      });
+      this.form.sGuid = sGuid.toString();
+      this.getData();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        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);
+            this.load = false;
+            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%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/ThemeComparison/weiboUserPortrait/opt1.js b/src/views/ThemeComparison/weiboUserPortrait/opt1.js
new file mode 100644
index 0000000..a3fb559
--- /dev/null
+++ b/src/views/ThemeComparison/weiboUserPortrait/opt1.js
@@ -0,0 +1,75 @@
+/*
+ * @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
+ */
+
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value,
+      name: ele.key,
+      itemStyle: {
+        color: colors[index]
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+
+import * as echarts from "echarts";
+export default function createOpt1(ds = [], color = []) {
+  const data = createData(ds, color);
+  return {
+    series: [
+      {
+        name: 'Access From0',
+        type: 'pie',
+        radius: ['63%', '77%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+          lineHeight: 28,
+          color: "#ffff"
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '20',
+            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: ['80%', '84%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        center: ['50%', '50%'],//边框位置
+        data: data,
+
+      }
+    ]
+  }
+}
diff --git a/src/views/ThemeComparison/weiboUserPortrait/opt2.js b/src/views/ThemeComparison/weiboUserPortrait/opt2.js
new file mode 100644
index 0000000..1346efb
--- /dev/null
+++ b/src/views/ThemeComparison/weiboUserPortrait/opt2.js
@@ -0,0 +1,75 @@
+/*
+ * @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
+ */
+
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value, 
+      name: ele.key, 
+      itemStyle: {
+        color: colors[index]
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+
+import * as echarts from "echarts";
+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',
+          lineHeight: 28,
+          color: "#ffff",
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '20',
+            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: ['80%', '84%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        center: ['50%', '50%'],//边框位置
+        data: data,
+      }
+    ]
+  }
+}