zx-微博内容类型

src/api/WeiboDetails/index.js

@@ -47,6 +47,19 @@ export function getDirectWeiBo0528(params) {
     })
 }
 
+//微博内容类型
+export function getWtypeWeiBo0528(params) {
+    let obj =  Object.assign({action: 'getWtypeWeiBo0528', 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)

src/views/WeiboDetails/weiboContentType/index.vue

@@ -8,23 +8,28 @@
 -->
 <template>
   <div class="wct-outter">
-        <v-label-div title="微博内容类型">
+    <v-label-div title="微博内容类型"> </v-label-div>
-        </v-label-div>
     <div class="wct-inner">
       <div class="d1">
         <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>
+        <v-label-ctx
-                <v-label-ctx label="评论" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '137px' }"></v-label-ctx>
+          v-for="(item, index) in labelArr"
-                <v-label-ctx label="转发" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
+          :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>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {getDirectWeiBo0528} from "@/api/WeiboDetails"
+import { getWtypeWeiBo0528 } from "@/api/WeiboDetails";
 import createOpt from "./opt";
 export default {
   name: "weiboContentType",
@@ -35,7 +40,31 @@ export default {
         sBrand: "",
         token: "",
       },
-            opt: createOpt()
+      labelArr: [],
+      total: 0,
+      opt: createOpt(),
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
     };
   },
   created() {
@@ -47,10 +76,22 @@ export default {
     getData() {
       this.load = true;
       let obj = Object.assign({}, this.getCtime2, this.form);
-            getDirectWeiBo0528(obj);
+      getWtypeWeiBo0528(obj).then((res) => {
+        let data = res.data || [];
+        this.doVal(data);
+      });
       console.log();
-        }
+    },
-    }
+    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);
+    },
+  },
 };
 </script>
 <style lang="less" scoped>

src/views/WeiboDetails/weiboContentType/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/weiboUserActiveArea/index.vue

@@ -32,7 +32,6 @@ export default {
         sBrand: "",
         token: "",
       },
-      arr: [],
       opt1: createOptD1(),
       opt2: createOptD2(),
     };
@@ -48,20 +47,22 @@ export default {
       let obj = Object.assign({}, this.getCtime2, this.form);
       getRegionWeiBo(obj).then((res) => {
         let data = res.data || {};
-        this.arr = this.toArr(data);
+        let arr = this.toArr(data);
         let dx = []; //省份
         let ds = []; //数据
-        let dm = this.arr //省份和数据
+        arr.forEach((ele) => {
-        this.arr.forEach((ele) => {
+          let name = ele.name || "";
-          let name = ele.name;
+          if(name.indexOf('省') === -1) {
+              ele.name = ele.name + '市'
+          }
           let value = ele.value;
-          dx.push(name);
+          dx.push(ele.name);
           ds.push(value);
         });
+        let dm = arr //省份和数据
         this.opt1 = createOptD1(dx, ds);
         this.opt2 = createOptD2(dm);
       });
-      console.log();
     },
     // 将对象变成数组
     toArr(obj) {