From 36a36b779c5a2f9c5d0c4efce372ea6808885e9a Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Mon, 1 Nov 2021 16:52:19 +0800
Subject: [PATCH] cxw-010203

---
 src/api/ModelInsight/index.js                 |  39 ++-
 src/views/BrandInsight/titsopo/index.vue      |  75 +++---
 src/views/ModelInsight/index.vue              |  10 +-
 .../mlForumCommunicationTrend/index.vue       |  41 +++-
 .../mlForumCommunicationTrend/opt.js          |  14 +-
 .../mlForumHotTopicDirection/index.vue        | 118 +++++++--
 .../mlForumHotTopicDirection/opt.js           |  78 ++++++
 .../v-ranking-fhtd/index.vue                  | 230 ------------------
 .../ModelInsight/mlSpreadTOPmodels/index.vue  |  93 ++++++-
 .../ModelInsight/mlSpreadTOPmodels/opt.js     | 154 +++++-------
 10 files changed, 465 insertions(+), 387 deletions(-)
 create mode 100644 src/views/ModelInsight/mlForumHotTopicDirection/opt.js
 delete mode 100644 src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue

diff --git a/src/api/ModelInsight/index.js b/src/api/ModelInsight/index.js
index 094360b..ef833cc 100644
--- a/src/api/ModelInsight/index.js
+++ b/src/api/ModelInsight/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-28 16:40:48
- * @LastEditTime: 2021-11-01 15:49:49
+ * @LastEditTime: 2021-11-01 16:39:32
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/api/ModelInsight/index.js
@@ -109,3 +109,40 @@ export function getCountTime0528(params) {
         }
     })
 }
+
+// 车型-论坛传播态势
+export function getBbsCountTime(params) {
+    let obj =  Object.assign({action: 'getBbsCountTime', sType: 'BbsSeries'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 车型-调性占比
+export function getAffections2(params) {
+    let obj =  Object.assign({action: 'getAffections', sType: 'BbsSeries', 'iBBsType':1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 车型-阅读量占比分布
+export function getClicksDistribution(params) {
+    let obj =  Object.assign({action: 'getClicksDistribution', sType: 'BbsSeries', 'iBBsType':1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/views/BrandInsight/titsopo/index.vue b/src/views/BrandInsight/titsopo/index.vue
index 3e8fde9..ff78d75 100644
--- a/src/views/BrandInsight/titsopo/index.vue
+++ b/src/views/BrandInsight/titsopo/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 09:32:35
- * @LastEditTime: 2021-11-01 14:46:34
+ * @LastEditTime: 2021-11-01 16:04:18
  * @LastEditors: Please set LastEditors
  * @Description: 舆情传播趋势
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
@@ -16,15 +16,15 @@
             <vLabel-div title="舆情传播趋势"></vLabel-div>
             <div class="tit-bd">
                 <v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
-            </div> 
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import {getSourcetypeTime} from "@/api/BrandInsight"
+import { getSourcetypeTime } from "@/api/BrandInsight";
 import moment from "moment";
-import createOpt from "./opt"
+import createOpt from "./opt";
 export default {
     name: "titsopo",
     props: ["brand"],
@@ -32,58 +32,77 @@ export default {
         return {
             load: false,
             form: {
-               token: "",
-               sBrand: '奥迪',
+                token: "",
+                sBrand: "奥迪",
             },
-            opt: {}
-        }
+            opt: {},
+        };
     },
     created() {
         this.form.token = this.getToken;
         this.form.sBrand = this.getBrand.brandname || this.brand;
-        this.getData()
+        this.getData();
     },
     methods: {
         // 获取数据
         getData() {
-            let obj = Object.assign({},this.getCtime2, this.form);
+            let obj = Object.assign({}, this.getCtime2, this.form);
             this.load = true;
-            getSourcetypeTime(obj).then(res => {
+            getSourcetypeTime(obj).then((res) => {
                 let data = res.data || [];
                 let dx = [];
                 let ds = [];
-                data.forEach(ele => {
+                data.forEach((ele) => {
                     let time = ele.Time;
                     let value = ele.Data;
                     dx.push(time);
                     ds.push(value);
-                })
+                });
                 this.opt = createOpt(dx, ds);
                 this.load = false;
-            })
+            });
         },
         // 前往数据表格
         goIDE() {
-            this.$router.push({path: '/industryDataExport',query: {token: this.getToken, action: 'getList', sType: 'BrandData', brand: this.form.sBrand, title: "品牌-行业数据" }})
+            this.$router.push({
+                path: "/industryDataExport",
+                query: {
+                    token: this.getToken,
+                    action: "getList",
+                    sType: "BrandData",
+                    brand: this.form.sBrand,
+                    title: "品牌-行业数据",
+                },
+            });
         },
-        // 
+        //
         clickEchars(data = []) {
             let qudao = [];
             let startTime = "";
-            let endTime = moment(new Date()).format('YYYY-MM-DD hh:mm:ss');
-           data.forEach(ele => {
-               let seriesName = ele.seriesName;
-               startTime = ele.name;
-               qudao.push(seriesName);
-           })
+            let endTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
+            data.forEach((ele) => {
+                let seriesName = ele.seriesName;
+                startTime = ele.name;
+                qudao.push(seriesName);
+            });
             let sTimeType = 4;
             this.$router.push({
                 path: "/industryDataExport",
-                query: { startTime, endTime, qudao, sTimeType, token: this.getToken, action: 'getList', sType: 'BrandData', brand: this.form.sBrand, title: "品牌-行业数据" },
+                query: {
+                    startTime,
+                    endTime,
+                    qudao,
+                    sTimeType,
+                    token: this.getToken,
+                    action: "getList",
+                    sType: "BrandData",
+                    brand: this.form.sBrand,
+                    title: "品牌-行业数据",
+                },
             });
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>
@@ -94,7 +113,7 @@ export default {
     .tit-header {
         width: 100%;
         height: 48px;
-        background: linear-gradient(270deg, #07192f 0%, #010B19 100%);
+        background: linear-gradient(270deg, #07192f 0%, #010b19 100%);
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -103,7 +122,7 @@ export default {
         width: 100%;
         height: 490px;
         margin-top: 16px;
-        border: 2px solid #0F2A4D;
+        border: 2px solid #0f2a4d;
         .tit-bd {
             width: 100%;
             height: calc(100% - 48px);
diff --git a/src/views/ModelInsight/index.vue b/src/views/ModelInsight/index.vue
index 82efb99..ebe6326 100644
--- a/src/views/ModelInsight/index.vue
+++ b/src/views/ModelInsight/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 13:12:20
- * @LastEditTime: 2021-11-01 15:55:24
+ * @LastEditTime: 2021-11-01 16:39:01
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/ModelInsight/index.vue
@@ -45,8 +45,8 @@
                 </v-label-div>
                 <div class="bdl-d4-bd">
                     <mlForumCommunicationTrend :brand="brand" :model="model"></mlForumCommunicationTrend>
-                    <mlForumHotTopicDirection></mlForumHotTopicDirection>
-                    <mlSpreadTOPmodels></mlSpreadTOPmodels>
+                    <mlForumHotTopicDirection :brand="brand" :model="model"></mlForumHotTopicDirection>
+                    <mlSpreadTOPmodels :brand="brand" :model="model"></mlSpreadTOPmodels>
                 </div>
             </div>
             <div class="bdl-d5">
@@ -91,8 +91,8 @@ export default {
         mlWeiboPortraits, // 微博人物画像
         mlWeiboVolumeTrend, // 微博声量趋势
         mlForumCommunicationTrend, // 论坛传播态势
-        mlForumHotTopicDirection, // 论坛人物画像
-        mlSpreadTOPmodels, // 传播TOP车型
+        mlForumHotTopicDirection, // 调性占比分布
+        mlSpreadTOPmodels, // 阅读量占比分布
         mlKeyMedia,
         mlRearWingPropagationSituation,
         mlPopularwordCloud,
diff --git a/src/views/ModelInsight/mlForumCommunicationTrend/index.vue b/src/views/ModelInsight/mlForumCommunicationTrend/index.vue
index fa6987f..c32329a 100644
--- a/src/views/ModelInsight/mlForumCommunicationTrend/index.vue
+++ b/src/views/ModelInsight/mlForumCommunicationTrend/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 16:33:38
- * @LastEditTime: 2021-10-25 15:08:06
+ * @LastEditTime: 2021-11-01 16:05:14
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/index.vue
@@ -16,12 +16,49 @@
 </template>
 
 <script>
+import {getBbsCountTime} from "@/api/ModelInsight"
 import createOpt from "./opt"
 export default {
     name: "ml-forum-communication-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);
+            getBbsCountTime(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);
+            })
         }
     }
 }
diff --git a/src/views/ModelInsight/mlForumCommunicationTrend/opt.js b/src/views/ModelInsight/mlForumCommunicationTrend/opt.js
index 6c62c86..2eb1771 100644
--- a/src/views/ModelInsight/mlForumCommunicationTrend/opt.js
+++ b/src/views/ModelInsight/mlForumCommunicationTrend/opt.js
@@ -1,13 +1,13 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 16:40:53
- * @LastEditTime: 2021-10-12 16:44:49
+ * @LastEditTime: 2021-11-01 16:06:05
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/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: "#51bc91",
                 areaStyle: {normal: {
diff --git a/src/views/ModelInsight/mlForumHotTopicDirection/index.vue b/src/views/ModelInsight/mlForumHotTopicDirection/index.vue
index 049d38c..96eed46 100644
--- a/src/views/ModelInsight/mlForumHotTopicDirection/index.vue
+++ b/src/views/ModelInsight/mlForumHotTopicDirection/index.vue
@@ -1,40 +1,107 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 16:48:36
- * @LastEditTime: 2021-10-25 15:08:22
+ * @LastEditTime: 2021-11-01 16:25:45
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/forumHotTopicDirection/index.vue
 -->
 <template>
     <div class="fhtd-outter">
-        <v-label-div title="论坛热议话题方向" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
-        <div class="fhtd-inner">
-            <div class="d1">
-                <v-ranking-fhtd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-fhtd>
-                <v-ranking-fhtd :num="2" label="刹车" val="594614"></v-ranking-fhtd>
-                <v-ranking-fhtd :num="3" label="舒适度" val="594614"></v-ranking-fhtd>
-                <v-ranking-fhtd :num="4" label="操控" val="594614"></v-ranking-fhtd>
-                <v-ranking-fhtd  :num="5" label="油耗" val="594614"></v-ranking-fhtd>
+        <v-label-div title="调性分布" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
+        <div class="wp-inner">
+            <div class="wp-in-d1">
+                <v-echarts :opt="opt"></v-echarts>
             </div>
-            <div class="d2" style="margin-left: 16px">
-                <v-ranking-fhtd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-fhtd>
-                <v-ranking-fhtd :num="7" label="空间" val="594614"></v-ranking-fhtd>
-                <v-ranking-fhtd :num="8" label="动力" val="594614"></v-ranking-fhtd>
-                <v-ranking-fhtd :num="9" label="外观" val="594614"></v-ranking-fhtd>
-                <v-ranking-fhtd :num="10" label="内饰" val="594614"></v-ranking-fhtd>
+            <div class="wp-in-d2">
+               <vue-scroll>
+                    <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>
+                </vue-scroll>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import vRankingFhtd from "./v-ranking-fhtd"
+
+import {getAffections2} from "@/api/ModelInsight"
+import createOpt from "./opt"
 export default {
     name: "mlForumHotTopicDirection",
-    components: {
-        "v-ranking-fhtd": vRankingFhtd
+    props: ["brand", "model"],
+    data() {
+        return {
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
+            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: {
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getAffections2(obj).then(res => {
+                let data = res.data;
+                let arr = [];
+                let total = 0;
+                for(let key in data) {
+                    let obj = {
+                        key: key,
+                        value: data[key]
+                    }
+                    total += data[key] * 1;
+                    arr.push(obj)
+                }
+                this.totalData = total;
+                this.labelData = arr;
+                this.opt = createOpt(this.labelData, [
+                    "#54BF93",
+                    "#3373CC",
+                    "#CC9D12",
+                ]);
+            })
+        }
     }
+   
 };
 </script>
 
@@ -43,11 +110,20 @@ export default {
     width: 630px;
     height: 412px;
     margin-left: 16px;
-    .fhtd-inner {
-        padding: 0px 16px 16px 16px;
-        height: auto;
+    .wp-inner {
+        width: 100%;
+        height: calc(100% - 48px);
         display: flex;
         justify-content: flex-start;
+        .wp-in-d1 {
+            width: 310px;
+            height: 100%;
+        }
+        .wp-in-d2 {
+            width: 310px;
+            height: auto;
+            margin-left: 16px;
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ModelInsight/mlForumHotTopicDirection/opt.js b/src/views/ModelInsight/mlForumHotTopicDirection/opt.js
new file mode 100644
index 0000000..fe387e3
--- /dev/null
+++ b/src/views/ModelInsight/mlForumHotTopicDirection/opt.js
@@ -0,0 +1,78 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:14:58
+ * @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";
+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: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['65%', '80%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                color: "#ffff",
+                lineHeight: 30
+            },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  color: "#ffff",
+                  formatter: function (p) {
+                    return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: data
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['86%', '94%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: data
+              }
+          ]
+    }
+}
diff --git a/src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue b/src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue
deleted file mode 100644
index ef4b08b..0000000
--- a/src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2021-10-08 16:44:08
- * @LastEditTime: 2021-10-12 17:35:07
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/components/v-ranking/index.vue
--->
-<template>
-  <div class="v-r-container">
-    <div class="v-r-line" v-if="lineShow"></div>
-    <div class="v-r-inner">
-      <div :class="ls">
-        <span class="s1">{{ num|numStr }}</span>
-      </div>
-      <div :class="rs">
-          <span class="v-r-label">{{label}}</span>
-          <div class="v-r-res">
-              <span class="s1">传播量</span>
-              <span class="s2">{{val}}</span>
-          </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "v-ranking-fhtd",
-  props: {
-    num: {
-      type: [String, Number],
-      default: 1,
-    },
-    val: {
-        type: [String, Number],
-        default: 0
-    },
-    label: {
-        type: String,
-        default: ""
-    },
-    lineShow: {
-        type: Boolean,
-        default: true
-    },
-    
-  },
-  watch: {
-      num: {
-          handler(val) {
-              if(val == 1) {
-                  this.ls = "v-r-left-1"
-                  this.rs = "v-r-right-1"
-              } else if(val == 2) {
-                  this.ls = "v-r-left-2"
-                  this.rs = "v-r-right-2"
-              } else if(val == 3) {
-                  this.ls = "v-r-left-3"
-                  this.rs = "v-r-right-3"
-              } else {
-                  this.ls = "v-r-left"
-                  this.rs = "v-r-right"
-              }
-          },
-          immediate: true
-      }
-  },
-  data() {
-      return  {
-          ls: "v-r-left",
-          rs: "v-r-right"
-      }
-  },
-  filters: {
-        numStr(val) {
-            let str = ""
-            if(0<val && val<10) {
-                str = '0' + val
-            } else {
-                str = val + ''
-            }
-            return str
-        }
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.v-r-container {
-  width: 305px;
-  height: auto;
-  .v-r-line {
-    width: 100%;
-    height: 1px;
-    background:#0a1d3b;
-    margin-top: 13px;
-    margin-bottom: 13px;
-  }
-  .v-r-inner {
-    position: relative;
-    width: 100%;
-    height: 48px;
-    margin-top: 6px;
-    color: #fff;
-    background: #0a1d3b;
-    border-radius: 2px;
-  }
-  .v-r-label {
-      display: block;
-      font-size: 14px;
-      color: #FFFFFF;
-      margin-left: 40px;
-      font-weight: bold;
-  }
-  .v-r-res {
-      margin-right: 16px;
-      span {
-          display: block;
-          text-align: right;
-          font-size: 12px;
-      }
-      .s1 {
-          color: #9ba4af;
-      }
-      .s2 {
-          color: #fff;
-          font-family: Bebas;
-      }
-  }
-  .v-r-left {
-    width: 48px;
-    height: 48px;
-    text-align: center;
-    line-height: 48px;
-    .s1 {
-      color: #ffffff;
-      font-size: 16px;
-      line-height: 48px;
-      font-family: Bebas;
-    }
-  }
-  .v-r-right {
-      position: absolute;
-      width: 280px;
-      height: 48px;
-      border-top: 2px solid transparent;
-      top: 0px;
-      left: 24px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-  }
-  .v-r-left-1 {
-    width: 48px;
-    height: 48px;
-    text-align: center;
-    border: 2px solid #cc9d12;
-    border-radius: 48px;
-    .s1 {
-      color: #ffffff;
-      font-size: 16px;
-      line-height: 42px;
-      text-shadow: 0px 0px 8px #cc9d12;
-      font-family: Bebas;
-    }
-  }
-  .v-r-right-1 {
-      position: absolute;
-      width: 280px;
-      height: 48px;
-      border-top: 2px solid #CC9D12;
-      top: 0px;
-      left: 24px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-  }
-  .v-r-left-2 {
-    width: 48px;
-    height: 48px;
-    text-align: center;
-    border: 2px solid #3373CC;
-    border-radius: 48px;
-    .s1 {
-      color: #ffffff;
-      font-size: 16px;
-      line-height: 42px;
-      text-shadow: 0px 0px 8px #3373CC;
-      font-family: Bebas;
-    }
-  }
-  .v-r-right-2 {
-      position: absolute;
-      width: 280px;
-      height: 48px;
-      border-top: 2px solid #3373CC;
-      top: 0px;
-      left: 24px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-  }
-  .v-r-left-3 {
-    width: 48px;
-    height: 48px;
-    text-align: center;
-    border: 2px solid #54BF93;
-    border-radius: 48px;
-    .s1 {
-      color: #ffffff;
-      font-size: 16px;
-      line-height: 42px;
-      text-shadow: 0px 0px 8px #54BF93;
-      font-family: Bebas;
-    }
-  }
-  .v-r-right-3 {
-      position: absolute;
-      width: 280px;
-      height: 48px;
-      border-top: 2px solid #54BF93;
-      top: 0px;
-      left: 24px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-  }
-}
-</style>
diff --git a/src/views/ModelInsight/mlSpreadTOPmodels/index.vue b/src/views/ModelInsight/mlSpreadTOPmodels/index.vue
index 5428cf8..2bfb9f7 100644
--- a/src/views/ModelInsight/mlSpreadTOPmodels/index.vue
+++ b/src/views/ModelInsight/mlSpreadTOPmodels/index.vue
@@ -1,27 +1,97 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 18:18:20
- * @LastEditTime: 2021-10-25 15:09:50
+ * @LastEditTime: 2021-11-01 16:50:14
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/index.vue
 -->
 <template>
     <div class="stm-outter">
-        <v-label-div title="传播TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-        <div class="stm-inner">
-            <v-echarts :opt="opt"></v-echarts>
+        <v-label-div title="阅读量占比分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <div class="wp-inner">
+            <div class="wp-in-d1">
+                <v-echarts :opt="opt"></v-echarts>
+            </div>
+            <div class="wp-in-d2">
+               <vue-scroll>
+                    <v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.name" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" :eStyle="{ height: '7.6rem' }"></v-label-ctx>
+                </vue-scroll>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import {getClicksDistribution} from "@/api/ModelInsight"
 import createOpt from "./opt"
 export default {
     name: "mlSpreadTOPmodels",
+    props: ["brand", "model"],
     data() {
         return {
-            opt: createOpt(["奥迪A8", "奥迪A6", "奥迪Q3", "奥迪Q4", "奥迪Q5"],[2200, 1900, 1800, 1600, 1400])
+            form: {
+                sBrand: "",
+                sSeriesName: "",
+                token: "",
+            },
+            labelData: [],
+            totalData: 0,
+            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);
+            getClicksDistribution(obj).then(res => {
+                let data = res.data || [];
+                let total = 0;
+                data.forEach(ele => {
+                    total += ele.value * 1;
+                })
+                this.totalData = total;
+                this.labelData = data;
+                 this.opt = createOpt(this.labelData, [
+                    "#54BF93",
+                    "#3373CC",
+                    "#CC9D12",
+                ]);
+            })
         }
     }
 }
@@ -31,9 +101,20 @@ export default {
     width: 628px;
     height: 412px;
     margin-left: 16px;
-    .stm-inner {
+    .wp-inner {
         width: 100%;
         height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .wp-in-d1 {
+            width: 310px;
+            height: 100%;
+        }
+        .wp-in-d2 {
+            width: 310px;
+            height: auto;
+            margin-left: 16px;
+        }
     }
 }
 </style>
diff --git a/src/views/ModelInsight/mlSpreadTOPmodels/opt.js b/src/views/ModelInsight/mlSpreadTOPmodels/opt.js
index 9be7d77..9635c55 100644
--- a/src/views/ModelInsight/mlSpreadTOPmodels/opt.js
+++ b/src/views/ModelInsight/mlSpreadTOPmodels/opt.js
@@ -1,104 +1,78 @@
 /*
  * @Author: your name
- * @Date: 2021-10-12 18:23:25
- * @LastEditTime: 2021-10-12 18:31:20
+ * @Date: 2021-10-12 15:14:58
+ * @LastEditTime: 2021-11-01 16:49:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
+ * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt(dx,ds) {
+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.name, 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 {
-        grid: {
-            top: "16px",
-            left: "16px",
-            right: "28px",
-            bottom: "16px",
-            containLabel: true,
-        },
-        tooltip: {
-            trigger: "axis",
-            backgroundColor: "#08182F",
-            color: "#fff",
-            borderColor: "#3373CC",
-            textStyle: {
-                color: "#fff", //设置文字颜色
-            },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
-            formatter: function (params) {
-                var result = "";
-                var dotHtml =
-                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
-                params.forEach(function (item) {
-                    result += item.axisValue + "</br>" + dotHtml + item.data;
-                });
-                return result;
-            },
-        },
-        xAxis: {
-            type: "category",
-            axisTick: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            data: dx,
-        },
-        yAxis: {
-            type: "value",
-            axisLine: {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['65%', '80%'],
+              avoidLabelOverlap: false,
+              label: {
                 show: false,
-                lineStyle: {
-                    color: "#FFF",
-                },
+                position: 'center',
+                color: "#ffff",
+                lineHeight: 30
             },
-            splitLine: {
-                lineStyle: {
-                    type: "dashed", // y轴分割线类型
-                    color: "#012b4b",
-                },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  color: "#ffff",
+                  formatter: function (p) {
+                    return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: data
             },
-        },
-        series: [
             {
-                name: "2001",
-                data: ds,
-                type: "bar",
-                barWidth: 24,
-                itemStyle: {
-                    normal: {
-                        label: {
-                            show: true, //开启显示
-                            position: 'top', //在上方显示
-                            textStyle: { //数值样式
-                                color: '#fff',
-                                fontSize: 14
-                            }
-                        },
-                        color: new echarts.graphic.LinearGradient(
-                            0,
-                            1,
-                            0,
-                            0,
-                            [
-                                {
-                                    offset: 0,
-                                    color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
-                                },
-                                {
-                                    offset: 1,
-                                    color: "#51bc8f", // 100% 处的颜色#3373CC
-                                },
-                            ],
-                            false
-                        ),
-                    },
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['86%', '94%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
                 },
-            },
-        ],
+                center: ['50%', '50%'],//边框位置
+                data: data
+              }
+          ]
     }
 }