cxw-010203

src/api/ModelInsight/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-28 16:40:48
- * @LastEditTime: 2021-11-01 14:15:10
+ * @LastEditTime: 2021-11-01 15:49:49
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/ModelInsight/index.js
@@ -47,3 +47,65 @@ export function getSourcetypeTime(params) {
         }
     })
 }
+
+// 车型热门事件列表
+export function getHotEventsList0528(params) {
+    let obj =  Object.assign({action: 'getHotEventsList0528', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 车型热点事件
+export function getHotEventsType(params) {
+    let obj =  Object.assign({action: 'getHotEventsType', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 车型-微博KOL
+export function getBoauthenCount0528(params) {
+    let obj =  Object.assign({action: 'getBoauthenCount0528', 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 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'
+        }
+    })
+}

src/views/BrandInsight/popularEvents/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 11:06:58
- * @LastEditTime: 2021-11-01 09:58:44
+ * @LastEditTime: 2021-11-01 15:13:45
  * @LastEditors: Please set LastEditors
  * @Description: 热门事件
  * @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
@@ -66,7 +66,6 @@ export default {
                     ];
                     obj[ele.events_type].push(a);
                 });
-                console.log(obj)
                 this.opt = createOpt(obj);
                 this.load = false;
             });

src/views/ModelInsight/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 13:12:20
- * @LastEditTime: 2021-11-01 14:00:36
+ * @LastEditTime: 2021-11-01 15:55:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/ModelInsight/index.vue
@@ -25,8 +25,8 @@
                     <v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
                 </v-label-div>
                 <div class="bdl-d2-bd">
-                    <ml-popular-events-list></ml-popular-events-list>
+                    <ml-popular-events-list :brand="brand" :model="model"></ml-popular-events-list>
-                    <ml-popular-events></ml-popular-events>
+                    <ml-popular-events :brand="brand" :model="model"></ml-popular-events>
                 </div>
             </div>
             <div class="bdl-d3">
@@ -34,9 +34,9 @@
                     <v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
                 </v-label-div>
                 <div class="bdl-d3-bd">
-                    <ml-weibo-Kol></ml-weibo-Kol>
+                    <ml-weibo-Kol :brand="brand" :model="model"></ml-weibo-Kol>
-                    <ml-weibo-portraits></ml-weibo-portraits>
+                    <ml-weibo-portraits :brand="brand" :model="model"></ml-weibo-portraits>
-                    <ml-weibo-volume-trend></ml-weibo-volume-trend>
+                    <ml-weibo-volume-trend :brand="brand" :model="model"></ml-weibo-volume-trend>
                 </div>
             </div>
             <div class="bdl-d4">
@@ -44,7 +44,7 @@
                     <v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
                 </v-label-div>
                 <div class="bdl-d4-bd">
-                    <mlForumCommunicationTrend></mlForumCommunicationTrend>
+                    <mlForumCommunicationTrend :brand="brand" :model="model"></mlForumCommunicationTrend>
                     <mlForumHotTopicDirection></mlForumHotTopicDirection>
                     <mlSpreadTOPmodels></mlSpreadTOPmodels>
                 </div>

src/views/ModelInsight/mlPopularEvents/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 11:06:58
- * @LastEditTime: 2021-10-25 14:51:32
+ * @LastEditTime: 2021-11-01 15:15:10
  * @LastEditors: Please set LastEditors
  * @Description: 热门事件
  * @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
@@ -16,12 +16,64 @@
 </template>
 
 <script>
+import {getHotEventsType} from "@/api/ModelInsight"
 import createOpt from "./opt"
 export default {
     name: "mlPopularEvents",
+    props: ["brand", "model"],
     data() {
         return {
-           opt: createOpt()
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
+           opt: {}
+        }
+    },
+     watch: {
+        model: {
+            handler(val) {
+                if (val) {
+                    this.form.token = this.getToken;
+                    this.form.sBrand = this.brand;
+                    this.form.sSeriesName = this.model;
+                    this.getData();
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getHotEventsType(obj).then(res => {
+                let data = res.data;
+                let arr = data.Data || [];
+                let type = data.Type || {};
+                let obj = {};
+                Object.keys(type).forEach((ele) => {
+                    obj[ele] = [];
+                });
+                arr.forEach((ele) => {
+                    // let m1 = moment(ele.minSourcetime);
+                    // let m2 = moment(ele.maxSourcetime);
+                    // let duration = m2.diff(m1, "hours");
+                    // let str= moment.utc(time).format('HH:mm')
+                    let a = [
+                        ele.maxSourcetime,
+                        ele.events_count * 1,
+                        ele.events_influence,
+                        ele.events_brand,
+                        ele.events_title,
+                        ele.events_type,
+                        ele.maxSourcetime,
+                        ele.summary,
+                    ];
+                    obj[ele.events_type].push(a);
+                });
+                this.opt = createOpt(obj);
+            })
         }
     }
 }

src/views/ModelInsight/mlPopularEvents/opt.js

@@ -1,25 +1,36 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 11:16:44
- * @LastEditTime: 2021-10-12 13:19:28
+ * @LastEditTime: 2021-11-01 15:14:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/popularEvents/opt.js
  */
-import * as echarts from "echarts";
+// import * as echarts from "echarts";
-const data = [
+
-    [['10000人以上',37.5,100000000,'A7','无工作经验'],['1000-5000人',11.46,100000000,'A5','无工作经验'],['500-1000人',16,100000000,'A4','无工作经验'],['150-500人',16.92,100000000,'A3','无工作经验'],['50-150人',22.5,100000000,'A2','无工作经验'],['少于50人',11.11,100000000,'A1','无工作经验']],
+// import moment from "moment";
-    [['10000人以上',48.21,150000000,'B7','1-3年经验'],['5000-10000人',50,150000000,'B6','1-3年经验'],['1000-5000人',67.7,150000000,'B5','1-3年经验'],['500-1000人',31,150000000,'B4','1-3年经验'],['150-500人',43.85,150000000,'B3','1-3年经验'],['50-150人',39.17,150000000,'B2','1-3年经验'],['少于50人',46.67,150000000,'B1','1-3年经验']],
+import { bigNumberTransform } from "@/utils/gol/dataTool"
-    [['10000人以上',10.71,200000000,'C7','3-5年经验'],['5000-10000人',50,200000000,'C6','3-5年经验'],['1000-5000人',14.58,200000000,'C5','3-5年经验'],['500-1000人',37,200000000,'C4','3-5年经验'],['150-500人',24.62,200000000,'C3','3-5年经验'],['50-150人',28.33,200000000,'C2','3-5年经验'],['少于50人',31.11,200000000,'C1','3-5年经验']],
+function createData(obj = {}) {
-    [['10000人以上',3.57,250000000,'D7','5-7年经验'],['1000-5000人',5.21,250000000,'D5','5-7年经验'],['500-1000人',12,250000000,'D4','5-7年经验'],['150-500人',12.31,250000000,'D3','5-7年经验'],['50-150人',6.67,250000000,'D2','5-7年经验'],['少于50人',11.11,250000000,'D1','5-7年经验']],
+    let arr = [];
-    [['500-1000人',4,300000000,'E4','7-10年经验'],['150-500人',0.77,300000000,'E3','7-10年经验'],['50-150人',0.83,300000000,'E2','7-10年经验']],
+    for (let key in obj) {
-    [['1000-5000人',1.04,350000000,'F5','10年以上经验'],['150-500人',1.54,350000000,'F3','10年以上经验'],['50-150人',2.5,350000000,'F2','10年以上经验']],
+        let o = {
-];
+            name: key,
-export default function createOpt() {
+            data: obj[key],
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            }
+        }
+        arr.push(o)
+    }
+    return arr
+}
+export default function createOpt(ds = {}) {
+    const data = createData(ds)
     return {
         title: {
             show: false,
-            text: '湘西自治州不同规模企业对岗位工作经验要求情况'
+            text: '12345'
         },
         legend: {
             y: 'top',
@@ -27,14 +38,13 @@ export default function createOpt() {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
                 color: '#fff'
-            },
+            }
-            data: ['无工作经验', '1-3年经验','3-5年经验','5-7年经验','7-10年经验','10年以上经验']
         },
         grid: {
-            left: '3%',
+            left: 16,
-            right: '2%',
+            right: '5%',
-            bottom: '4%',
+            bottom: 10,
-            top: '15%',
+            top: 42,
             containLabel: true
         },
         tooltip: {
@@ -45,15 +55,15 @@ export default function createOpt() {
             textStyle: {
                 color: "#fff", //设置文字颜色
             },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: (p) => {
+                let data = p.data;
+                return `<span>${data[5]}-${data[3]}</span><br><span>${data[4]}</span><br><span>${data[0]}</span><br><span>影响力：${data[2]}</span>`;
+            }
         },
         xAxis: {
-            data:['少于50人','50-150人','150-500人','500-1000人','1000-5000人','5000-10000人','10000人以上'],
+            type: 'time',
-            splitLine: {
+            boundaryGap: false,
-                lineStyle: {
-                    type: 'dashed'
-                }
-            },
             axisTick: {
                 show: false,
             },
@@ -63,168 +73,44 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            splitLine: {
+                show: false
+            },
+            // data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
+            axisLabel : {
+                // formatter: (value) => {
+                    
+
+                //     var str= moment.utc(value).format('HH:mm');
                     
 
+                //     // let str = value.substring(10,16)
+                //     return str;
+                // }
+            },
         },
         yAxis: {
+            type: 'value',
             axisLine: {
                 show: false,
                 lineStyle: {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
             splitLine: {
                 lineStyle: {
-                    type: 'dashed',
+                    type: "dashed", // y轴分割线类型
                     color: "#012b4b",
-                }
-            },
-            scale: true,
-            axisLabel : {
-                    formatter: '{value} %'
                 },
-        },
-        series: [
-             
-        {
-            name: '无工作经验',
-            data: data[0],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
             },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(251, 118, 123, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(251, 118, 123)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(251, 118, 123)'
-                    }])
-                }
-            }
         },
-         
+        series: data
-        {
-            name: '1-3年经验',
-            data: data[1],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(237, 125, 49, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(237, 125, 49)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(237, 125, 49)'
-                    }])
-                }
-            }
-        },
-         
-        {
-            name: '3-5年经验',
-            data: data[2],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(255, 192, 0, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(255, 192, 0)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(255, 192, 0)'
-                    }])
-                }
-            }
-        },
-        
-        {
-            name: '5-7年经验',
-            data: data[3],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(91, 155, 213, 0.)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(91, 155, 213)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(91, 155, 213)'
-                    }])
-                }
-            }
-        },
-         
-        {
-            name: '7-10年经验',
-            data: data[4],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(112, 173, 71, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(112, 173, 71)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(112, 173, 71)'
-                    }])
-                }
-            }
-        },
-         
-        {
-            name: '10年以上经验',
-            data: data[5],
-            type: 'scatter',
-            symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2;
-            },
-            itemStyle: {
-                normal: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(129, 227, 238, 0.5)',
-                    shadowOffsetY: 5,
-                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
-                        offset: 0,
-                        color: 'rgb(129, 227, 238)'
-                    }, {
-                        offset: 1,
-                        color: 'rgb(25, 183, 207)'
-                    }])
-                }
-            }
-        },
-         
-        ]
     };
 
 

src/views/ModelInsight/mlPopularEventsList/index.vue

@@ -1,60 +1,88 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 10:50:44
- * @LastEditTime: 2021-10-25 14:52:13
+ * @LastEditTime: 2021-11-01 15:07:45
  * @LastEditors: Please set LastEditors
  * @Description: 热门事件列表
  * @FilePath: /data-show/src/views/BrandInsight/popularEventsList/index.vue
 -->
 
 <template>
-  <div class="pe-ouuter">
+    <div class="pe-ouuter">
-    <v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-    <div class="pe-inner">
+        <div class="pe-inner">
-      <dv-scroll-board
+            <dv-scroll-board :config="config" :style="{ width: '100%', height: '20rem' }" />
-        :config="config"
+        </div>
-        :style="{ width: '100%', height: '346px' }"
-      />
     </div>
-  </div>
 </template>
 
 <script>
+import { getHotEventsList0528 } from "@/api/ModelInsight";
 export default {
-  name: "mlPopularEventsList",
+    name: "mlPopularEventsList",
-  data() {
+    props: ["brand", "model"],
-    return {
+    data() {
-      config: {
+        return {
-        headerBGC: "#0F2A4D",
+            form: {
-        oddRowBGC: "rgba(69, 149, 244, 0);",
+                sBrand: "",
-        evenRowBGC: "#0F2A4D;",
+                sSeriesName: "",
-        columnWidth: [400],
+                token: "",
-        header: ["事件列表", "影响力", "时间", "关联车型"],
+            },
-        data: [
+            config: {
-          ["2021广州车展，现场更多你没…", "40.90", "2021-08-17 12:00:00", "A3"],
+               
-          ["丰田威兰达高性能版配置曝光...", "39.90", "2021-08-17 12:00:00","Q3"],
+            },
-          ["广州车展，15分钟抢空的限定…", "38.20", "2021-08-17 12:00:00","A4"],
+        };
-          ["2021广州车展，现场更多你没…", "37.50", "2021-08-17 12:00:00","Q4"],
+    },
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A5"],
+    watch: {
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q5"],
+        model: {
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A6"],
+            handler(val) {
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q6"],
+                if (val) {
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q7"],
+                    this.form.token = this.getToken;
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A7"],
+                    this.form.sBrand = this.brand;
-        ],
+                    this.form.sSeriesName = this.model;
-      },
+                    this.getData();
-    };
+                }
-  },
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getHotEventsList0528(obj).then((res) => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele) => {
+                    let a = [
+                        ele.events_title,
+                        ele.count,
+                        ele.ctime,
+                        ele.events_series,
+                    ];
+                    arr.push(a);
+                });
+                this.config = {
+                    headerBGC: "#1b4062",
+                    oddRowBGC: "#173b6d",
+                    evenRowBGC: "rgba(69, 149, 244, 0)",
+                    columnWidth: [400],
+                    rowNum: 6,
+                    header: ["事件列表", "影响力", "时间", "关联车型"],
+                    data: arr,
+                };
+            });
+        },
+    },
 };
 </script>
 
 <style lang="less" scoped>
 .pe-ouuter {
-  width: 912px;
+    width: 912px;
-  height: 412px;
+    height: 412px;
-  .pe-inner {
+    .pe-inner {
-    width: 100%;
+        width: 100%;
-    height: calc(100% - 50px);
+        height: calc(100% - 50px);
-  }
+    }
 }
 </style>

src/views/ModelInsight/mlWeiboKol/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 14:19:53
- * @LastEditTime: 2021-10-25 14:57:49
+ * @LastEditTime: 2021-11-01 15:30:06
  * @LastEditors: Please set LastEditors
  * @Description: 微博KOL
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
@@ -17,25 +17,82 @@
                 </div>
             </div>
             <div class="wk-in-d2">
-                <v-label-ctx label="名人" cont="2000" percentage="25%" color="#3373CC" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
+                <vue-scroll>
-                <v-label-ctx label="政府" cont="2000" percentage="25%" color="#518ea9" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
+                    <v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/total*100).toFixed(2) +'%'" :color="colors[index]" contLabel="数量" :eStyle="{ height: '5rem' }"></v-label-ctx>
-                <v-label-ctx label="大V" cont="1000" percentage="25%" color="#54BF93" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
+                </vue-scroll>
-                <v-label-ctx label="企业" cont="1000" percentage="25%" color="#b38b14" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
-                <v-label-ctx label="其他" cont="2000" percentage="25%" color="#b56a2f" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import { getBoauthenCount0528 } from "@/api/ModelInsight";
 import createOpt from "./opt";
 export default {
     name: "mlWeiboKol",
+    props: ["brand", "model"],
     data() {
         return {
-            opt: createOpt(),
+            total: 0,
+            labelData: [],
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
+            opt: {},
+            colors: [
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+            ],
         };
     },
+    watch: {
+        model: {
+            handler(val) {
+                if (val) {
+                    this.form.token = this.getToken;
+                    this.form.sBrand = this.brand;
+                    this.form.sSeriesName = this.model;
+                    this.getData();
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getBoauthenCount0528(obj).then((res) => {
+                let data = res.data || [];
+                let total = 0;
+                data.forEach((ele) => {
+                    total += ele.value * 1;
+                });
+                this.total = total;
+                this.labelData = data;
+                this.opt = createOpt(data, this.colors);
+            });
+        },
+    },
 };
 </script>
 

src/views/ModelInsight/mlWeiboKol/opt.js

@@ -1,13 +1,35 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 14:33:51
- * @LastEditTime: 2021-10-12 14:39:58
+ * @LastEditTime: 2021-11-01 15:30:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+function createData(ds=[], colors=[]) {
+   let arr = [];
+   for(let i = 0; i < ds.length; i++) {
+      let ele = ds[i];
+      if(ele.value*1 > 0) {
+         let obj = { value: ele.value*1, 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[i]
+            }])
+          }};
+         arr.push(obj)
+      }
+   }
+   return arr;
+}
+export default function createOpt(ds = [], colors= []) {
+   const data = createData(ds, colors) 
     return {
         series: [
             {
@@ -17,66 +39,24 @@ export default function createOpt() {
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                lineHeight: 30
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '20',
                   color: "#ffff",
-                  fontWeight: 'bold'
+                  fontWeight: 'bold',
+                  formatter: function (p) {
+                     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: 2000, name: '政府', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#518ea9'
-                 }])} },
-                { value: 1000, name: '大V', 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'
-                 }])} },
-                 { 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: '#b56a2f'
-                 }])} },
-              ],
 
             },
             {
@@ -92,53 +72,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: 2000, name: '政府', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#518ea9'
-                 }])} },
-                  { value: 1000, name: '大V', 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'
-                 }])} },
-                 { 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: '#b56a2f'
-                 }])} },
-                ],
   
               }
           ]

src/views/ModelInsight/mlWeiboPortraits/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 15:06:47
- * @LastEditTime: 2021-10-25 14:58:03
+ * @LastEditTime: 2021-11-01 15:39:09
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
@@ -9,31 +9,158 @@
 <template>
     <div class="wp-outter">
         <v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
-            <v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
+            <v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
         </v-label-div>
         <div class="wp-inner">
             <div class="wp-in-d1">
-                 <v-echarts :opt="opt"></v-echarts>
+                <v-echarts :opt="opt"></v-echarts>
             </div>
             <div class="wp-in-d2">
-                <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '121px' }"></v-label-ctx>
+               <vue-scroll>
-                <v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12" :eStyle="{ height: '121px' }"></v-label-ctx>
+                    <v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" :eStyle="{ height: '7.6rem' }"></v-label-ctx>
-                <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93" :eStyle="{ height: '121px' }"></v-label-ctx>
+                </vue-scroll>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getSexMergeWeiBo } from "@/api/ModelInsight";
+import createOpt from "./opt";
 export default {
     name: "mlWeiboPortraits",
+    props: ["brand", "model"],
     data() {
         return {
-           opt: createOpt()
+            form: {
-        }
+                sBrand: "",
-    }
+                sSeriesName: "",
-}
+                token: "",
+            },
+            attestation: [], // 认证
+            sex: [], // 性别
+            region: [], // 地区
+            opt: {},
+            labelData: [],
+            totalData: 0,
+             colors: [
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+                "#90ed7d",
+            ],
+        };
+    },
+     watch: {
+        model: {
+            handler(val) {
+                if (val) {
+                    this.form.token = this.getToken;
+                    this.form.sBrand = this.brand;
+                    this.form.sSeriesName = this.model;
+                    this.getData();
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // 切换数据
+        handlerTab(n) {
+            if (n === 0) {
+                this.labelData = this.sex;
+                let total = 0;
+                this.sex.forEach((ele) => {
+                    total += ele.value * 1;
+                });
+                this.totalData = total;
+                this.opt = createOpt(this.sex, [
+                    "#54BF93",
+                    "#3373CC",
+                    "#CC9D12",
+                ]);
+            } else if (n === 1) {
+                this.labelData = this.attestation;
+                let total = 0;
+                this.attestation.forEach((ele) => {
+                    total += ele.value  * 1;
+                });
+                this.totalData = total;
+                this.opt = createOpt(this.attestation, this.colors);
+            } else {
+                this.labelData = this.region;
+                let total = 0;
+                this.region.forEach((ele) => {
+                    total += ele.value * 1;
+                });
+                this.totalData = total;
+                this.opt = createOpt(this.region, this.colors);
+            }
+        },
+        // 获取后台数据
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getSexMergeWeiBo(obj).then((res) => {
+                let data = res.data;
+                let attestation = data.attestation || {};
+                let sex = data.sex || {};
+                let region = data.RegionWeiBo || {};
+                let total = 0;
+                let wSex = [];
+                for (let key in sex) {
+                    let obj = {
+                        key: key,
+                        value: sex[key],
+                    };
+                    total += sex[key] * 1;
+                    wSex.push(obj);
+                }
+                let wAttestation = [];
+                for (let key in attestation) {
+                    let obj = {
+                        key: key,
+                        value: attestation[key],
+                    };
+                    wAttestation.push(obj);
+                }
+                let wRegion = [];
+                for (let key in region) {
+                    let obj = {
+                        key: key,
+                        value: region[key],
+                    };
+                    wRegion.push(obj);
+                }
+                this.sex = wSex;
+                this.attestation = wAttestation;
+                this.region = wRegion;
+                this.totalData = total;
+                this.labelData = this.sex;
+                this.opt = createOpt(this.sex, [
+                    "#54BF93",
+                    "#3373CC",
+                    "#CC9D12",
+                ]);
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>

src/views/ModelInsight/mlWeiboPortraits/opt.js

@@ -1,13 +1,35 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 15:14:58
- * @LastEditTime: 2021-10-12 16:03:56
+ * @LastEditTime: 2021-11-01 15:36:27
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+function createData(ds=[], colors=[]) {
+  let arr = [];
+  for(let i = 0; i < ds.length; i++) {
+     let ele = ds[i];
+     if(ele.value*1 > 0) {
+        let obj = { value: ele.value*1, 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[i]
+           }])
+         }};
+        arr.push(obj)
+     }
+  }
+  return arr;
+}
+export default function createOpt(ds=[], colors=[]) {
+    const data = createData(ds,colors)
     return {
         series: [
             {
@@ -18,52 +40,23 @@ export default function createOpt() {
               label: {
                 show: false,
                 position: 'center',
-                fontSize: '40',
                 color: "#ffff",
+                lineHeight: 30
             },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '20',
                   color: "#ffff",
-                  formatter: (p)=>{
+                  formatter: function (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,36 +71,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/ModelInsight/mlWeiboVolumeTrend/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 15:24:48
- * @LastEditTime: 2021-10-25 14:58:22
+ * @LastEditTime: 2021-11-01 15:52:11
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/index.vue
@@ -11,21 +11,58 @@
         <v-label-div title="微博声量趋势" :showLine="false" :eStyle="{ 'border-style': 'none' }">
         </v-label-div>
         <div class="wvt-inner">
-             <v-echarts :opt="opt"></v-echarts>
+            <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getCountTime0528 } from "@/api/ModelInsight";
+import createOpt from "./opt";
 export default {
     name: "ml-weibo-volume-trend",
+    props: ["brand", "model"],
     data() {
         return {
-          opt: createOpt() 
+            form: {
-        }
+                sBrand: "",
-    }
+                sSeriesName: "",
-}
+                token: "",
+            },
+            opt: {},
+        };
+    },
+     watch: {
+        model: {
+            handler(val) {
+                if (val) {
+                    this.form.token = this.getToken;
+                    this.form.sBrand = this.brand;
+                    this.form.sSeriesName = this.model;
+                    this.getData();
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getCountTime0528(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>

src/views/ModelInsight/mlWeiboVolumeTrend/opt.js

@@ -1,13 +1,13 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 15:32:24
- * @LastEditTime: 2021-10-12 16:47:07
+ * @LastEditTime: 2021-11-01 15:52:36
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+export default function createOpt(dx = [], ds = []) {
     return {
         grid: {
             top: "16px",
@@ -38,7 +38,13 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+            axisLabel : {
+                formatter: (value) => {
+                    let str = value.substring(10,16)
+                    return str;
+                }
+            },
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -57,7 +63,7 @@ export default function createOpt() {
         },
         series: [
             {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                data: ds,
                 type: 'line',
                 color: '#546fc5',
                 areaStyle: {normal: {