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

* 'dev' of git.oa00.com:SWS/carInsightSystem:
  张雄-WeiboDetails-(微博洞察详情，微博人物画像，微博用户活跃地区，微博内容top声量)

src/api/WeiboDetails/index.js

@@ -0,0 +1,74 @@
+import httpService from "@/request"
+export function getBrandWeiBoCount0528(params) {
+    let obj =  Object.assign({action: 'getBrandWeiBoCount0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+export function getAffections(params) {
+    let obj =  Object.assign({action: 'getAffections', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+export function getCountTime0528(params) {
+    let obj =  Object.assign({action: 'getCountTime0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+export function getDirectWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getDirectWeiBo0528', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//微博人物画像-男女比例-认证与非认证
+export function getSexMergeWeiBo(params) {
+    let obj =  Object.assign({action: 'getSexMergeWeiBo', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+//微博活跃用户地区
+export function getRegionWeiBo(params) {
+    let obj =  Object.assign({action: 'getRegionWeiBo', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/getEchars/index.js

@@ -6,10 +6,14 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/getEchars/index.js
  */
-import httpService from "@/request"
+import axios from 'axios';
 export function getGraphData() {
-    return httpService({
+    return new Promise((resolve, reject) => {
-        url: `/echarsData/npmdepgraph.min10.json`,
+        let url = `/echarsData/npmdepgraph.min10.json`;
-        method: 'get'
+        axios.get(url).then(res => {
+            resolve(res)
+        }).catch(() => {
+            reject(false)
+        })
     })
 }

src/api/getMap/index.js

@@ -6,11 +6,16 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/getMap/index.js
  */
-import httpService from "@/request"
+import axios from 'axios';
 
 export function createMap(name) {
-    return httpService({
+    return new Promise((resolve, reject) => {
-        url: `/map/${name}.json`,
+        let url = `/map/${name}.json`;
-        method: 'get'
+        axios.get(url).then(res => {
+            resolve(res)
+        }).catch(() => {
+            reject(false)
         })
+    })
+
 }

src/utils/gol/dataTool.js

@@ -62,7 +62,7 @@
   }
   return newValue.join('')
 }
-  // 对数组中某个对象值进行排序
+// 对数组中某个对象值由小到大进行排序
 export function compare(property) {
   return function (a, b) {
     let value1 = a[property];
@@ -70,3 +70,11 @@
     return value1 - value2;
   }
 }
+// 对数组中某个对象值由大到小进行排序
+export function comparePig(property) {
+  return function (a, b) {
+    let value1 = a[property];
+    let value2 = b[property];
+    return value2 - value1;
+  }
+}

src/views/WeiboDetails/index.vue

@@ -15,36 +15,73 @@
         </v-label-div>
         <div class="wd-d1-bd">
           <div class="d1">
-                        奥迪
+            {{ form.sBrand }}
           </div>
           <div class="d2" style="margin-left: 114px">
-                        <img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
+            <img
+              class="dd1"
+              src="../../assets/images/BrandInsight/ic_xxzl.png"
+            />
             <div class="dd2">
-                            <span class="s1">74,073,195</span>
+              <span class="s1">{{ countObj.count }}</span>
               <span class="s2">信息总量</span>
             </div>
           </div>
           <div class="d2">
-                        <img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
+            <img
+              class="dd1"
+              src="../../assets/images/BrandInsight/ic_dvsl.png"
+            />
             <div class="dd2">
-                            <span class="s1">16578</span>
+              <span class="s1">{{ countObj.vCount }}</span>
               <span class="s2">参与大V数量</span>
             </div>
           </div>
           <div class="d2">
-                        <img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
+            <img
+              class="dd1"
+              src="../../assets/images/BrandInsight/ic_yhs.png"
+            />
             <div class="dd2">
-                            <span class="s1">13200</span>
+              <span class="s1">{{ countObj.userCount }}</span>
               <span class="s2">参与用户数</span>
             </div>
           </div>
           <div class="d2">
-                        <img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
+            <img
+              class="dd1"
+              src="../../assets/images/BrandInsight/ic_yqdx.png"
+            />
+            <a-popover title="舆情调性">
+              <template slot="content">
+                <template v-for="(item, key) in countObj2">
+                  <div class="pd-item" :key="key">
+                    <span >{{key}}</span>
+                    <span>{{item}}</span>
+                  </div>
+                </template>
+              </template>
               <div class="dd3">
-                            <span class="s3" style="background: #3373CC"></span>
+                <span
-                            <span class="s3" style="background: #54BF93;width: 69px"></span>
+                  class="s3"
-                            <span class="s3" style="background: #CC9D12;width: 96px"></span>
+                  :style="{ width: (countObj2['正面'] / total) * width + 'px' }"
+                ></span>
+                <span
+                  class="s3"
+                  :style="{
+                    width: (countObj2['中性'] / total) * width + 'px',
+                    background: '#54BF93',
+                  }"
+                ></span>
+                <span
+                  class="s3"
+                  :style="{
+                    width: (countObj2['负面'] / total) * width + 'px',
+                    background: '#CC9D12',
+                  }"
+                ></span>
               </div>
+            </a-popover>
           </div>
         </div>
       </div>
@@ -82,7 +119,9 @@ import weiboWordCloud from "./weiboWordCloud";
 import weiboSpreadFission from "./weiboSpreadFission";
 import weiboTonalDistribution from "./weiboTonalDistribution";
 import positiveViewKOL from "./positiveViewKOL";
-import negativeOpinionKOL from "./negativeOpinionKOL"
+import negativeOpinionKOL from "./negativeOpinionKOL";
+import { getBrandWeiBoCount0528 } from "@/api/WeiboDetails/index.js";
+import { getAffections } from "@/api/WeiboDetails/index.js";
 export default {
   name: "WeiboDetails",
   components: {
@@ -96,12 +135,54 @@ export default {
     weiboSpreadFission, // 微博传播裂变
     weiboTonalDistribution, // 调性分布
     positiveViewKOL, // 正面观点KOL
-        negativeOpinionKOL // 负面观点KOL
+    negativeOpinionKOL, // 负面观点KOL
+  },
+  data() {
+    return {
+      width: 200,
+      form: {
+        token: "",
+        sBrand: "",
+      },
+      countObj: {
+        carseriesCount: 0,
+        count: 0,
+        userCount: 0,
+        vCount: 0,
+      },
+      countObj2: {
+        正面: 0,
+        中性: 0,
+        负面: 0,
+      },
+      total: 0,
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || "奥迪";
+    this.getData();
   },
   methods: {
     goback() {
       this.$router.go(-1);
     },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getBrandWeiBoCount0528(obj).then((res) => {
+        let data = res.data;
+        this.countObj = Object.assign(this.countObj, data);
+      });
+      getAffections(obj).then((res) => {
+        let data = res.data || {};
+        let total = 0;
+        for (let key in data) {
+          total += data[key] * 1;
+        }
+        this.countObj2 = Object.assign(this.countObj2, data);
+        this.total = total;
+      });
+    },
   },
 };
 </script>
@@ -167,6 +248,7 @@ export default {
           height: 33px;
           display: inline-block;
           margin-right: 2px;
+          background: #3373cc;
         }
       }
     }
@@ -200,4 +282,11 @@ export default {
   justify-content: flex-start;
   margin-top: 16px;
 }
+.pd-item {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    border-bottom: 1px solid #173b6d;
+    padding: 10px;
+}
 </style>

src/views/WeiboDetails/weiboCharacters/index.vue

@@ -10,7 +10,10 @@
   <div class="wc-outter">
     <v-label-div title="微博人物画像">
       <div>
-              <v-tab-group :btns="['性别', '认证', '分类']"></v-tab-group>
+        <v-tab-group
+          :btns="['性别', '认证', '分类']"
+          @change="handlerTab"
+        ></v-tab-group>
       </div>
     </v-label-div>
     <div class="wc-inner">
@@ -18,24 +21,126 @@
         <v-echarts :opt="opt"></v-echarts>
       </div>
       <div class="d2">
-                <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
+        <vue-scroll>
-                <v-label-ctx label="女性" cont="2200" percentage="25%" color="#a58115" :eStyle="{ height: '137px' }"></v-label-ctx>
+          <v-label-ctx
-                <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
+            v-for="(item, index) in labelArr"
+            :key="index"
+            :label="item.key"
+            :cont="item.value"
+            :percentage="((item.value / total) * 100).toFixed(2) + '%'"
+            :color="colors[index]"
+            :eStyle="{ height: '8.54rem' }"
+          ></v-label-ctx>
+        </vue-scroll>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getSexMergeWeiBo } from "@/api/WeiboDetails";
+import createOpt from "./opt";
 export default {
   name: "weiboCharacters",
   data() {
     return {
-            opt: createOpt()
+      load: false,
-        }
+      form: {
+        sBrand: "",
+        token: "",
+      },
+      RegionWeiBo: [],
+      attestation: [],
+      sex: [],
+      total: 0,
+      labelArr: [],
+
+      opt: createOpt(),
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
+    };
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+  methods: {
+    // 获取后台数据
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getSexMergeWeiBo(obj).then((res) => {
+        let data = res.data || {};
+        let RegionWeiBo = data.RegionWeiBo;
+        let attestation = data.attestation;
+        let sex = data.sex;
+        this.RegionWeiBo = this.toArr(RegionWeiBo);
+        this.attestation = this.toArr(attestation);
+        this.sex = this.toArr(sex);
+        this.doVal(this.sex);
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          key: key,
+          value: obj[key],
+        };
+        arr.push(o);
       }
+      return arr;
+    },
+    // 给页面变化值赋值
+    doVal(arr = []) {
+      let total = 0;
+      arr.forEach((ele) => {
+        total += ele.value * 1;
+      });
+      this.total = total;
+      this.labelArr = arr;
+      this.opt = createOpt(this.labelArr, this.colors);
+    },
+    // 切换数据
+    handlerTab(n) {
+      switch (n) {
+        case 0:
+          this.doVal(this.sex);
+          break;
+        case 1:
+          this.doVal(this.attestation);
+          break;
+        case 2:
+          this.doVal(this.RegionWeiBo);
+          break;
+        default:
+          this.doVal(this.sex);
+          break;
       }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>

src/views/WeiboDetails/weiboCharacters/opt.js

@@ -1,74 +1,69 @@
 /*
  * @Author: your name
- * @Date: 2021-10-12 15:14:58
+ * @Date: 2021-10-09 09:49:50
- * @LastEditTime: 2021-10-14 10:43:47
+ * @LastEditTime: 2021-10-28 13:07:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
+ * @FilePath: /data-show/src/views/Index/userPortrait/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
+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;
+}
+export default function createOpt(ds = [], color = []) {
+  const data = createData(ds, color);
   return {
     series: [
       {
         name: 'Access From0',
         type: 'pie',
-              radius: ['63%', '77%'],
+        radius: ['65%', '80%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
           position: 'center',
-                fontSize: '40',
+          lineHeight: 30
-                color: "#ffff",
         },
         emphasis: {
           label: {
             show: true,
-                  fontSize: '40',
+            fontSize: '16',
             color: "#ffff",
-                  formatter: (p)=>{
+            fontWeight: 'bold',
-                    return p.data.name + '\n' + p.data.value; 
+            formatter: function (p) {
-                  },
+              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',
         type: 'pie',
-                radius: ['80%', '84%'],
+        radius: ['86%', '94%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
@@ -78,36 +73,7 @@ export default function createOpt() {
           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/WeiboDetails/weiboCommunicationTrend/index.vue

@@ -17,13 +17,43 @@
 </template>
 
 <script>
+import {getCountTime0528} from "@/api/WeiboDetails"
 import createOpt from "./opt"
 export default {
     name: "weibo-communication-trend",
     data() {
         return {
+            load: false, 
+             form: {
+                sBrand: "",
+                token: "",
+            },
             opt: createOpt()
         }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getCountTime0528(obj).then(res => {
+                let data = res.data || [];
+                let dx = []; //time
+                let ds = []; //value
+                data.forEach(ele => {
+                    let key = ele.Time;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value);
+                })
+                this.opt = createOpt(dx, ds)
+                this.load = false
+            });
+        }
     }
 };
 </script>

src/views/WeiboDetails/weiboCommunicationTrend/opt.js

@@ -7,13 +7,14 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx = [], ds = []) {
     return {
         grid: {
-            top: "16px",
+            top: 16,
-            left: "16px",
+            left: 16,
-            right: "16px",
+            right: "5%",
-            bottom: "16px",
+            bottom: 10,
             containLabel: true,
         },
         tooltip: {
@@ -32,13 +33,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', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -48,6 +55,12 @@ export default function createOpt() {
                     color: "#FFF",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -57,7 +70,7 @@ export default function createOpt() {
         },
         series: [
             {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                data: ds,
                 type: 'line',
                 color: '#546fc5',
                 areaStyle: {normal: {

src/views/WeiboDetails/weiboContentTOPVolume/index.vue

@@ -7,15 +7,14 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
 -->
 <template>
-    <div class="wct-outter">
+  <div class="wct-outter" v-loading="load">
-        <v-label-div title="微博内容TOP声量">
+    <v-label-div title="微博内容TOP声量"> </v-label-div>
-        </v-label-div>
     <div class="wct-inner">
-            <div class="wct-d1">
+      <div class="wct-d1" v-for="(item,index) in list" :key="index">
-                <v-echarts :opt="opt1"></v-echarts>
+        <v-echarts :opt="item.opt"></v-echarts>
         <div class="wct-d1-dd1">
-                    <span>排名：<span class="ss1">01</span></span>
+          <span>排名：<span class="ss1">0{{index+1}}</span></span>
-                    <span>声量：<span class="ss1">600</span></span>
+          <span>声量：<span class="ss1">{{item.value}}</span></span>
         </div>
       </div>
       <div class="wct-d1">
@@ -72,19 +71,46 @@
 </template>
 
 <script>
+import {getDirectWeiBo0528} from "@/api/WeiboDetails"
+import {comparePig} from "@/utils/gol/dataTool"
 import createOpt from "./opt"
 export default {
     name: "weiboContentTOPVolume",
     data() {
         return {
-            opt1: createOpt('内饰', '#306cc0', 600),
+            load: false, 
-            opt2: createOpt('空间', '#5ea3c2', 500),
+             form: {
-            opt3: createOpt('操控', '#49aa82', 450),
+                sBrand: "",
-            opt4: createOpt('舒适', '#c79911', 400),
+                token: "",
-            opt5: createOpt('动力', '#316dc3', 350),
+            },
-            opt6: createOpt('配置', '#5ea3c2', 300),
+            list: [],
-            opt7: createOpt('外观', '#49aa82', 250),
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
-            opt8: createOpt('油耗', '#c79911', 200),
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getDirectWeiBo0528(obj).then(res => {
+                let data = res.data || [];
+                let arr = [];
+                data.sort(comparePig('value'));
+                data.forEach((ele,index) => {
+                    let obj = {
+                        value: ele.value,
+                        opt: createOpt(ele.key,this.colors[index],ele.value)
+                    }
+                    arr.push(obj)
+                })
+                this.list = arr;
+                // this.opt1 = createOpt(data[0].key,'#306cc0',data[0].value);
+                this.load = false;
+            });
         }
     }
 }
@@ -96,9 +122,11 @@ export default {
   height: 460px;
   border: 2px solid #0f2a4d;
   margin-left: 16px;
+  overflow: hidden;
 }
 .wct-inner {
   width: 100%;
+  margin-top: 16px;
   height: calc(100% - 48px);
   .wct-d1 {
     position: relative;
@@ -120,7 +148,7 @@ export default {
         .ss1 {
           font-family: Bebas;
           font-size: 16px;
-                   color: #FFFFFF;
+          color: #ffffff;
         }
       }
     }

src/views/WeiboDetails/weiboContentTOPVolume/opt.js

@@ -8,7 +8,7 @@
  * startAngle: 180,
  */
 import * as echarts from "echarts";
-export default function createOpt(name='内饰', color='#306cc0', num=500) {
+export default function createOpt(name, color, num) {
     return {
         tooltip: {
             backgroundColor: "#08182F",

src/views/WeiboDetails/weiboContentType/index.vue

@@ -24,14 +24,33 @@
 </template>
 
 <script>
+import {getDirectWeiBo0528} from "@/api/WeiboDetails"
 import createOpt from "./opt";
 export default {
     name: "weiboContentType",
     data() {
         return {
-            opt: createOpt(),
+            load: false, 
+             form: {
+                sBrand: "",
+                token: "",
+            },
+            opt: createOpt()
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getDirectWeiBo0528(obj);
+            console.log();
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

src/views/WeiboDetails/weiboUserActiveArea/index.vue

@@ -8,8 +8,7 @@
 -->
 <template>
   <div class="wua-outter">
-      <v-label-div title="微博用户活跃地区">
+    <v-label-div title="微博用户活跃地区"> </v-label-div>
-      </v-label-div>
     <div class="wua-inner">
       <div class="d1">
         <v-echarts :opt="opt1"></v-echarts>
@@ -22,17 +21,60 @@
 </template>
 
 <script>
-import createOptD1 from "./opt1"
+import { getRegionWeiBo } from "@/api/WeiboDetails";
-import createOptD2 from './opt2'
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
 export default {
   name: "weiboUserActiveArea",
   data() {
     return {
+      form: {
+        sBrand: "",
+        token: "",
+      },
+      arr: [],
       opt1: createOptD1(),
-            opt2: createOptD2()
+      opt2: createOptD2(),
-        }
+    };
-    }
+  },
+  created() {
+    this.form.token = this.getToken;
+    this.form.sBrand = this.getBrand.brandname || this.brand;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.load = true;
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getRegionWeiBo(obj).then((res) => {
+        let data = res.data || {};
+        this.arr = this.toArr(data);
+        let dx = []; //省份
+        let ds = []; //数据
+        this.arr.forEach((ele) => {
+          let key = ele.key;
+          let value = ele.value;
+          dx.push(key);
+          ds.push(value);
+        });
+        this.opt1 = createOptD1(dx, ds);
+      });
+      console.log();
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          key: key,
+          value: obj[key],
+        };
+        arr.push(o);
       }
+      return arr;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>

src/views/WeiboDetails/weiboUserActiveArea/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,
             },
@@ -61,7 +61,7 @@ export default function createOptD1() {
                 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'