zx-品牌对比-至尾翼

src/api/BrandComparison/BbsBrand.js

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

src/api/BrandComparison/BrandWeibo.js

@@ -77,3 +77,16 @@ export function getRegionWeiBoC(params) {
         }
     })
 }
+
+// 品牌对比-微博用户画像
+export function getSexMergeWeiBoC(params) {
+    let obj =  Object.assign({action: 'getSexMergeWeiBoC', sType: 'BrandWeiBo', iContrastType: 1}, params)
+    return httpService({    
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue

@@ -7,33 +7,73 @@
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
 -->
 <template>
-    <div class="cop-outter">
+  <div class="cop-outter">
-        <v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+    <v-label-div
-        <div class="cop-inner">
+      title="论坛发帖趋势对比"
-           <v-echarts :opt="opt"></v-echarts> 
+      :showLine="false"
-        </div>
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="cop-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getCountTime0528C } from "@/api/BrandComparison/BbsBrand.js";
+import createOpt from "./opt";
 export default {
-    name: "comparisonOfForumPostingTrends",
+  name: "comparisonOfForumPostingTrends",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createOpt()
+      form: {
-        }
+        token: "",
-    }
+        sBrand: "",
-}
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getBComparison;
+      let brands = [];
+      arr.forEach((ele) => {
+        brands.push(ele.name);
+      });
+      this.form.sBrand = brands.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getCountTime0528C(obj)
+        .then((res) => {
+          let data = res.data || [];
+          let dx = [];
+          let ds = [];
+          data.forEach((ele) => {
+            let key = ele.key;
+            let value = ele.value;
+            dx.push(key);
+            ds.push(value);
+          });
+          this.opt = createOpt(dx, ds);
+        })
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .cop-outter {
-    width: 944px;
+  width: 944px;
-    height: 412px;
+  height: 412px;
-    .cop-inner {
+  .cop-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-    }
+  }
 }
 </style>

src/views/BrandComparison/comparisonOfForumPostingTrends/opt.js

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

src/views/BrandComparison/comparisonOfNegativeTopicsInForums/index.vue

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

src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue

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

src/views/BrandComparison/forumTonalComparison/index.vue

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

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

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

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

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

src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue

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

src/views/BrandComparison/userAreaDistribution/index.vue

@@ -13,9 +13,7 @@
       :showLine="false"
       :eStyle="{ 'border-style': 'none' }"
     >
-      <v-tab-group
+      <v-tab-group :btns="this.brandArr" @change="handlerTab"></v-tab-group>
-        :btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
-      ></v-tab-group>
     </v-label-div>
     <div class="wua-inner">
       <div class="d1">
@@ -36,12 +34,14 @@ export default {
   name: "userAreaDistribution",
   data() {
     return {
-      opt1: createOptD1(),
+      opt1: {},
-      opt2: createOptD2(),
+      opt2: {},
       form: {
         token: "",
         sBrand: "",
       },
+      dataSource: [],
+      brandArr: [],
     };
   },
   created() {
@@ -56,7 +56,10 @@ export default {
         brands.push(ele.name);
       });
       this.form.sBrand = brands.toString();
-      this.getData();
+      Promise.all([this.getData()]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+      });
     },
     getData() {
       return new Promise((resolve, reject) => {
@@ -64,6 +67,33 @@ export default {
         getRegionWeiBoC(obj)
           .then((res) => {
             let data = res.data || [];
+            //dx省份 ds数据 dm省份和数据的对象数组
+            let mapArr = [];
+            let brandList = [];
+            data.forEach((ele) => {
+              let dx = [];
+              let ds = [];
+              let dm = this.toArr(ele.Data);
+              dm.forEach((e) => {
+                //处理直辖市
+                e.name = e.name.replace('省', '');
+                dx.push(e.name);
+                ds.push(e.value);
+              });
+              let o = {
+                name: ele.Name,
+                dx: dx,
+                ds: ds,
+                dm: dm,
+                //opt1: createOptD1(),
+                //opt2: createOptD2(),
+                //tapIndex: 0
+              };
+              brandList.push(ele.Name);
+              mapArr.push(o);
+            });
+            this.dataSource = mapArr;
+            this.brandArr = brandList;
             resolve(data);
           })
           .catch(() => {
@@ -71,6 +101,23 @@ export default {
           });
       });
     },
+    // 将对象变成数组
+    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>

src/views/BrandComparison/userAreaDistribution/opt1.js

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

src/views/BrandComparison/userAreaDistribution/opt2.js

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

src/views/BrandComparison/weiboUserPortrait/index.vue

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

src/views/BrandComparison/weiboUserPortrait/opt1.js

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

src/views/BrandComparison/weiboUserPortrait/opt2.js

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