diff --git a/src/api/BrandInsight/index.js b/src/api/BrandInsight/index.js
new file mode 100644
index 0000000..ffaf227
--- /dev/null
+++ b/src/api/BrandInsight/index.js
@@ -0,0 +1,56 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-25 15:38:59
+ * @LastEditTime: 2021-10-25 18:58:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/api/BrandInsight/index.js
+ */
+import httpService from "@/request"
+
+// 获取顶部选择项 无自选
+export function getCartypeTop10(params) {
+    let obj =  Object.assign({action: 'getCartypeTop10', sType: 'BrandOverview', iBBsType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+// 品牌数据-数据传播总量
+export function getBrandOverviewCount0528(params) {
+    let obj =  Object.assign({action: 'getBrandOverviewCount0528', sType: 'BrandOverview'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+// 舆情传播趋势
+export function getSourcetypeTime(params) {
+    let obj =  Object.assign({action: 'getSourcetypeTime', sType: 'BrandOverview'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+
+// 舆情调性
+export function getAffections(params) {
+    let obj =  Object.assign({action: 'getAffections', sType: 'BrandOverview'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
+// 热门事件列表
+export function getHotEventsList0528(params) {
+    let obj =  Object.assign({action: 'getHotEventsList0528', sType: 'BrandOverview'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'get',
+        params: obj
+    })
+}
diff --git a/src/assets/images/ModelInsight/ic_cbsj.png b/src/assets/images/ModelInsight/ic_cbsj.png
new file mode 100644
index 0000000..20f0d8f
Binary files /dev/null and b/src/assets/images/ModelInsight/ic_cbsj.png differ
diff --git a/src/assets/images/ModelInsight/ic_ppzb.png b/src/assets/images/ModelInsight/ic_ppzb.png
new file mode 100644
index 0000000..8c20972
Binary files /dev/null and b/src/assets/images/ModelInsight/ic_ppzb.png differ
diff --git a/src/assets/images/ModelInsight/ic_ztdx.png b/src/assets/images/ModelInsight/ic_ztdx.png
new file mode 100644
index 0000000..dc0f1d9
Binary files /dev/null and b/src/assets/images/ModelInsight/ic_ztdx.png differ
diff --git a/src/assets/images/ModelInsight/img_cxdb.png b/src/assets/images/ModelInsight/img_cxdb.png
new file mode 100644
index 0000000..869f431
Binary files /dev/null and b/src/assets/images/ModelInsight/img_cxdb.png differ
diff --git a/src/assets/images/ModelInsight/img_qhcx.png b/src/assets/images/ModelInsight/img_qhcx.png
new file mode 100644
index 0000000..c1875fa
Binary files /dev/null and b/src/assets/images/ModelInsight/img_qhcx.png differ
diff --git a/src/components/v-echars/index.vue b/src/components/v-echars/index.vue
index d9a081c..31ec44d 100644
--- a/src/components/v-echars/index.vue
+++ b/src/components/v-echars/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 19:12:07
- * @LastEditTime: 2021-10-22 18:23:49
+ * @LastEditTime: 2021-10-25 16:51:44
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edi
  * @FilePath: /data-show/src/components/v-echars/index.vue
diff --git a/src/lycomponents/iHeader/index.vue b/src/lycomponents/iHeader/index.vue
index 28211f2..ce5bac5 100644
--- a/src/lycomponents/iHeader/index.vue
+++ b/src/lycomponents/iHeader/index.vue
@@ -11,7 +11,7 @@
                     <a-menu-item key="brandInsight">
                         <span>品牌洞察</span>
                     </a-menu-item>
-                    <a-menu-item key="a">
+                    <a-menu-item key="modelInsight">
                         <span>车型洞察</span>
                     </a-menu-item>
                     <a-menu-item key="eventInsight">
diff --git a/src/router/index.js b/src/router/index.js
index d5e549e..96a7cd5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-10-25 10:59:54
+ * @LastEditTime: 2021-10-25 13:15:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -30,7 +30,7 @@ import EventComparison from "@/views/EventComparison"
 import Login from "@/views/Login"
 import EventDEC from "@/views/EventDEC"
 import MarketingAnalysis from "@/views/MarketingAnalysis"
-
+import ModelInsight from "@/views/ModelInsight"
 const router = [
     {
         path: '/login',
@@ -121,6 +121,12 @@ const router = [
                 desc: "营销分析",
                 component: MarketingAnalysis
             },
+            {
+                path: '/modelInsight',
+                name: "modelInsight",
+                desc: "车型洞察",
+                component: ModelInsight
+            },
         ]
     },
    
diff --git a/src/views/BrandInsight/brandData/index.vue b/src/views/BrandInsight/brandData/index.vue
index edd311b..bcbc4fc 100644
--- a/src/views/BrandInsight/brandData/index.vue
+++ b/src/views/BrandInsight/brandData/index.vue
@@ -1,99 +1,147 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-11 18:42:58
- * @LastEditTime: 2021-10-12 10:38:41
+ * @LastEditTime: 2021-10-25 18:13:46
  * @LastEditors: Please set LastEditors
  * @Description: 品牌数据
  * @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
 -->
 
 <template>
-  <div class="bd-outter">
-    <v-label-div title="品牌数据"></v-label-div>
-    <div class="bd-inner">
-         <div class="bd-o-d1">
-             <div class="d1">
-                 <img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png"/>
-                 <span class="s1">传播数据总量</span>
-             </div>
-             <span class="s2">74,073,195</span>
-         </div>
-         <div class="bd-o-d1" style="margin-top: 16px">
-            <div class="d1">
-                 <img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png"/>
-                 <span class="s1">舆情整体调性</span>
-             </div>
-             <span class="s2">
-                <span class="s2-s1"></span>
-                <span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
-                <span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
-             </span> 
-         </div>
+    <div class="bd-outter">
+        <v-label-div title="品牌数据"></v-label-div>
+        <div class="bd-inner">
+            <div class="bd-o-d1">
+                <div class="d1">
+                    <img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png" />
+                    <span class="s1">传播数据总量</span>
+                </div>
+                <span class="s2">{{count}}</span>
+            </div>
+            <div class="bd-o-d1" style="margin-top: 16px">
+                <div class="d1">
+                    <img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png" />
+                    <span class="s1">舆情整体调性</span>
+                </div>
+                <span class="s2">
+                    <a-tooltip placement="top" :title="'正面：'+ affObj.a">
+                        <span class="s2-s1" :style="{width: affObj.a/affObj.z * width +'px'}"></span>
+                    </a-tooltip>
+                    <a-tooltip placement="top" :title="'中性：'+ affObj.b">
+                        <span class="s2-s1" :style="{width: affObj.b/affObj.z * width + 'px', background: '#54BF93'}"></span>
+                    </a-tooltip>
+                    <a-tooltip placement="top" :title="'负面：'+ affObj.c">
+                        <span class="s2-s1" :style="{width: affObj.c/affObj.z *  width + 'px',background: '#CC9D12'}"></span>
+                    </a-tooltip>
+                </span>
+            </div>
+        </div>
+
     </div>
-   
-  </div>
 </template>
 
 <script>
+import { getBrandOverviewCount0528, getAffections } from "@/api/BrandInsight";
 export default {
-  name: "brandData",
- 
+    name: "brandData",
+    props: ["brand"],
+    data() {
+        return {
+            width: 274,
+            count: 0,
+            form: {
+                token: "",
+                sBrand: "",
+            },
+            affObj: {
+                a: 0,
+                b: 0,
+                c: 0,
+                z: 0,
+            },
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.brand;
+        this.getBrandOverviewCount0528();
+        this.getAffections();
+    },
+    methods: {
+        getBrandOverviewCount0528() {
+            let obj = Object.assign({}, this.getCommTime, this.form);
+            getBrandOverviewCount0528(obj).then((res) => {
+                this.count = res.data.count;
+            });
+        },
+        getAffections() {
+            let obj = Object.assign({}, this.getCommTime, this.form);
+            getAffections(obj).then((res) => {
+                let data = res.data || {};
+                this.affObj.a = data["正面"] || 0;
+                this.affObj.b = data["中性"] || 0;
+                this.affObj.c = data["负面"] || 0;
+                this.affObj.z =
+                    this.affObj.a * 1 + this.affObj.b * 1 + this.affObj.c * 1;
+            });
+        },
+    },
 };
 </script>
 
 <style lang="less" scoped>
 .bd-outter {
-  width: 620px;
-  height: 272px;
-  border: 2px solid #0f2a4d;
-  border-radius: 2px;
+    width: 620px;
+    height: 272px;
+    border: 2px solid #0f2a4d;
+    border-radius: 2px;
 }
 .bd-inner {
-  padding: 16px;
-  .bd-o-d1 {
-      width: 588px;
-      height: 88px;
-      border: 1px solid #0f2a4d;
-      border-radius: 2px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .d1 {
-          display: flex;
-          height: 100%;
-          justify-content: flex-start;
-          align-items: center;
-          .m1 {
-              display: block;
-              width: 64px;
-              height: 64px;
-              margin-left: 16px;
-          }
-          .s1 {
-              display: block;
-              color: #fff;
-              font-size: 20px;
-              margin-left: 12px;
-          }
-      }
-      .s2 {
-          display: block;
-          color: #fff;
-          font-size: 44px;
-          font-family: Bebas;
-          margin-right: 16px;
-          display: flex;
-          justify-content: flex-start;
-          width: 276px;
-          .s2-s1 {
-              display: block;
-              width: 102px;
-              height: 36px;
-              background: #3373CC;
-              margin-right: 2px;
-          }
-      }
-  }
+    padding: 16px;
+    .bd-o-d1 {
+        width: 588px;
+        height: 88px;
+        border: 1px solid #0f2a4d;
+        border-radius: 2px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .d1 {
+            display: flex;
+            height: 100%;
+            justify-content: flex-start;
+            align-items: center;
+            .m1 {
+                display: block;
+                width: 64px;
+                height: 64px;
+                margin-left: 16px;
+            }
+            .s1 {
+                display: block;
+                color: #fff;
+                font-size: 20px;
+                margin-left: 12px;
+            }
+        }
+        .s2 {
+            display: block;
+            color: #fff;
+            font-size: 44px;
+            font-family: Bebas;
+            margin-right: 16px;
+            display: flex;
+            justify-content: flex-start;
+            width: 276px;
+            .s2-s1 {
+                display: block;
+                width: 102px;
+                height: 36px;
+                background: #3373cc;
+                margin-right: 2px;
+            }
+        }
+    }
 }
 </style>
 
diff --git a/src/views/BrandInsight/brandTop/index.vue b/src/views/BrandInsight/brandTop/index.vue
index 833b9d8..19f6430 100644
--- a/src/views/BrandInsight/brandTop/index.vue
+++ b/src/views/BrandInsight/brandTop/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 09:03:51
- * @LastEditTime: 2021-10-12 10:38:52
+ * @LastEditTime: 2021-10-25 17:12:56
  * @LastEditors: Please set LastEditors
  * @Description: 品牌TOP车型
  * @FilePath: /data-show/src/views/BrandInsight/brandTop/index.vue
@@ -16,12 +16,38 @@
 </template>
 
 <script>
+import {getCartypeTop10} from "@/api/BrandInsight"
 import createOpt from "./opt"
 export default {
     name: "brand-top",
+    props: ["brand"],
     data() {
         return {
-            opt: createOpt(["奥迪", "宝马", "奔驰", "吉利", "江淮"],[2200, 1900, 1800, 1600, 1400])
+            form: {
+               token: "",
+               sBrand: '奥迪',
+            },
+            opt: {}
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.brand;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({},this.getCommTime, this.form);
+            getCartypeTop10(obj).then(res => {
+                let data = res.data || {};
+                let dx = [];
+                let ds = [];
+                for(let key in data) {
+                    dx.push(key);
+                    ds.push(data[key])
+                }
+               this.opt = createOpt(dx,ds);
+            })
         }
     }
 }
diff --git a/src/views/BrandInsight/index.vue b/src/views/BrandInsight/index.vue
index 24a46d3..7b109e1 100644
--- a/src/views/BrandInsight/index.vue
+++ b/src/views/BrandInsight/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-11 17:59:49
- * @LastEditTime: 2021-10-15 17:22:49
+ * @LastEditTime: 2021-10-25 18:52:45
  * @LastEditors: Please set LastEditors
  * @Description: 品牌洞察
  * @FilePath: /data-show/src/views/BrandInsight/index.vue
@@ -11,8 +11,8 @@
         <div class="bdl-ouuter">
             <div class="bdl-d1">
                 <div class="bdl-d1-dd1">
-                    <brand-data></brand-data>
-                    <brand-top></brand-top>
+                    <brand-data :brand="brand"></brand-data>
+                    <brand-top :brand="brand"></brand-top>
                 </div>
                 <div class="bdl-d1-dd2">
                     <img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparison')"/>
@@ -22,7 +22,7 @@
                     <img class="m2" src="../../assets/images/BrandInsight/img_qhpp.png" @click="openBrand"/>
                 </div>
                 <div class="bdl-d1-dd3">
-                    <titsopo></titsopo>
+                    <titsopo :brand="brand"></titsopo>
                 </div>
             </div>
             <div class="bdl-d2">
@@ -30,7 +30,7 @@
                     <v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
                 </v-label-div>
                 <div class="bdl-d2-bd">
-                    <popular-events-list></popular-events-list>
+                    <popular-events-list :brand="brand"></popular-events-list>
                     <popular-events></popular-events>
                 </div>
             </div>
@@ -104,8 +104,12 @@ export default {
     },
     data() {
       return {
-        brandShow: false
+        brandShow: false,
+        brand: "奥迪"
       }
+    },
+    created() {
+      
     },
     methods: {
       goRouter(path, query = {}) {
diff --git a/src/views/BrandInsight/popularEventsList/index.vue b/src/views/BrandInsight/popularEventsList/index.vue
index ddfc153..1f8cdf0 100644
--- a/src/views/BrandInsight/popularEventsList/index.vue
+++ b/src/views/BrandInsight/popularEventsList/index.vue
@@ -1,60 +1,86 @@
 <!--
  * @Author: xw
  * @Date: 2021-10-12 10:50:44
- * @LastEditTime: 2021-10-12 11:14:26
+ * @LastEditTime: 2021-10-25 18:59:42
  * @LastEditors: Please set LastEditors
  * @Description: 热门事件列表
  * @FilePath: /data-show/src/views/BrandInsight/popularEventsList/index.vue
 -->
 
 <template>
-  <div class="pe-ouuter">
-    <v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-    <div class="pe-inner">
-      <dv-scroll-board
-        :config="config"
-        :style="{ width: '100%', height: '346px' }"
-      />
+    <div class="pe-ouuter">
+        <v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <div class="pe-inner">
+            <dv-scroll-board :config="config" :style="{ width: '100%', height: '346px' }" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import { getHotEventsList0528 } from "@/api/BrandInsight";
 export default {
-  name: "popularEventsList",
-  data() {
-    return {
-      config: {
-        headerBGC: "#0F2A4D",
-        oddRowBGC: "rgba(69, 149, 244, 0);",
-        evenRowBGC: "#0F2A4D;",
-        columnWidth: [400],
-        header: ["事件列表", "影响力", "时间", "关联车型"],
-        data: [
-          ["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"],
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q5"],
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A6"],
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q6"],
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q7"],
-          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A7"],
-        ],
-      },
-    };
-  },
+    name: "popularEventsList",
+    props: ["brand"],
+    data() {
+        return {
+            form: {
+                sBrand: "",
+                token: "",
+                iPageIndex: 1,
+                iPageSize: 100,
+            },
+            config: {
+                headerBGC: "#0F2A4D",
+                oddRowBGC: "rgba(69, 149, 244, 0);",
+                evenRowBGC: "#0F2A4D;",
+                columnWidth: [400],
+                header: ["事件列表", "影响力", "时间", "关联车型"],
+                data: [],
+            },
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.brand;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.getCommTime, 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: "#0F2A4D",
+                    oddRowBGC: "rgba(69, 149, 244, 0);",
+                    evenRowBGC: "#0F2A4D;",
+                    columnWidth: [400],
+                    header: ["事件列表", "影响力", "时间", "关联车型"],
+                    data: arr,
+                };
+                    console.log(res);
+            });
+        },
+    },
 };
 </script>
 
 <style lang="less" scoped>
 .pe-ouuter {
-  width: 912px;
-  height: 412px;
-  .pe-inner {
-    width: 100%;
-    height: calc(100% - 50px);
-  }
+    width: 912px;
+    height: 412px;
+    .pe-inner {
+        width: 100%;
+        height: calc(100% - 50px);
+    }
 }
 </style>
diff --git a/src/views/BrandInsight/titsopo/index.vue b/src/views/BrandInsight/titsopo/index.vue
index 2077fdd..c6ed79d 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-10-12 10:39:10
+ * @LastEditTime: 2021-10-25 17:40:52
  * @LastEditors: Please set LastEditors
  * @Description: 舆情传播趋势
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
@@ -22,12 +22,40 @@
 </template>
 
 <script>
+import {getSourcetypeTime} from "@/api/BrandInsight"
 import createOpt from "./opt"
 export default {
     name: "titsopo",
+    props: ["brand"],
     data() {
         return {
-            opt: createOpt()
+            form: {
+               token: "",
+               sBrand: '奥迪',
+            },
+            opt: {}
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.brand;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({},this.getCommTime, this.form);
+            getSourcetypeTime(obj).then(res => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    let time = ele.Time;
+                    let value = ele.Data;
+                    dx.push(time);
+                    ds.push(value);
+                })
+                this.opt = createOpt(dx, ds);
+            })
         }
     }
 }
diff --git a/src/views/BrandInsight/titsopo/opt.js b/src/views/BrandInsight/titsopo/opt.js
index 99d975a..ef3fed8 100644
--- a/src/views/BrandInsight/titsopo/opt.js
+++ b/src/views/BrandInsight/titsopo/opt.js
@@ -1,12 +1,43 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:11:24
- * @LastEditTime: 2021-10-13 16:04:39
+ * @LastEditTime: 2021-10-25 17:28:36
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
  */
-export default function createOpt() {
+function createData(ds = []) {
+    let arr = [];
+    for (let i = 0; i < ds.length; i++) {
+        let arr1 = ds[i];
+        for (let j = 0; j < arr1.length; j++) {
+            let n = arr.findIndex(ele => {
+                return ele.name === arr1[j].key;
+            })
+            if (n === -1) {
+                let obj =
+                {
+                    name: arr1[j].key,
+                    type: 'line',
+                    symbol: 'none',
+                    areaStyle: {
+                        opacity: 0.4
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [arr1[j].value]
+                }
+                arr.push(obj)
+            } else {
+                arr[n].data.push(arr1[j].value)
+            }
+        }
+    }
+    return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+    let data = createData(ds)
     return {
         grid: {
             left: '3%',
@@ -45,7 +76,7 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -62,73 +93,6 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
-            {
-                name: '新闻',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
-            },
-            {
-                name: '论坛',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
-            },
-            {
-                name: '微信',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
-            },
-            {
-                name: '微博',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
-            },
-            {
-                name: 'APP',
-                type: 'line',
-                stack: 'Total',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-
-        ]
+        series: data
     }
 }
diff --git a/src/views/ModelInsight/index.vue b/src/views/ModelInsight/index.vue
new file mode 100644
index 0000000..3fb1740
--- /dev/null
+++ b/src/views/ModelInsight/index.vue
@@ -0,0 +1,194 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 13:12:20
+ * @LastEditTime: 2021-10-25 15:18:01
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/ModelInsight/index.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="ml-outter">
+            <div class="ml-d1">
+                <ml-brand-data></ml-brand-data>
+                <div class="bdl-d1-dd2">
+                    <img class="m1" src="../../assets/images/ModelInsight/img_cxdb.png" @click="goRouter('/brandComparison')" />
+                    <div class="bdl-d1-dd2-d1">
+                        <span class="bdl-d1-dd2-d1-s1">奥迪</span>
+                    </div>
+                    <img class="m2" src="../../assets/images/ModelInsight/img_qhcx.png" @click="openBrand" />
+                </div>
+                <mlTts></mlTts>
+            </div>
+            <div class="bdl-d2">
+                <v-label-div title="事件洞察">
+                    <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></ml-popular-events>
+                </div>
+            </div>
+            <div class="bdl-d3">
+                <v-label-div title="微博洞察">
+                    <v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
+                </v-label-div>
+                <div class="bdl-d3-bd">
+                    <ml-weibo-Kol></ml-weibo-Kol>
+                    <ml-weibo-portraits></ml-weibo-portraits>
+                    <ml-weibo-volume-trend></ml-weibo-volume-trend>
+                </div>
+            </div>
+            <div class="bdl-d4">
+                <v-label-div title="论坛洞察">
+                    <v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
+                </v-label-div>
+                <div class="bdl-d4-bd">
+                    <mlForumCommunicationTrend></mlForumCommunicationTrend>
+                    <mlForumHotTopicDirection></mlForumHotTopicDirection>
+                    <mlSpreadTOPmodels></mlSpreadTOPmodels>
+                </div>
+            </div>
+            <div class="bdl-d5">
+                <v-label-div title="尾翼洞察">
+                    <v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
+                </v-label-div>
+                <div class="bdl-d5-bd">
+                  <mlRearWingPropagationSituation></mlRearWingPropagationSituation>
+                  <mlKeyMedia></mlKeyMedia>
+                  <mlPopularwordCloud></mlPopularwordCloud>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import mlBrandData from "./ml-brand-data";
+import mlTts from "./ml-tts"
+import mlPopularEvents from "./mlPopularEvents"
+import mlPopularEventsList from "./mlPopularEventsList"
+import mlWeiboKol from "./mlWeiboKol";
+import mlWeiboPortraits from "./mlWeiboPortraits";
+import mlWeiboVolumeTrend from "./mlWeiboVolumeTrend"
+import mlForumCommunicationTrend from "./mlForumCommunicationTrend"
+import mlForumHotTopicDirection from "./mlForumHotTopicDirection"
+import mlSpreadTOPmodels from "./mlSpreadTOPmodels"
+import mlKeyMedia from "./mlKeyMedia"
+import mlRearWingPropagationSituation from "./mlRearWingPropagationSituation"
+import mlPopularwordCloud from "./mlPopularwordCloud"
+export default {
+    name: "ModelInsight",
+    components: {
+        mlBrandData, // 品牌数据
+        mlTts, // 舆情传播趋势
+        mlPopularEvents, // 热门事件列表
+        mlPopularEventsList, // 热点事件
+        mlWeiboKol, // 微博KOL
+        mlWeiboPortraits, // 微博人物画像
+        mlWeiboVolumeTrend, // 微博声量趋势
+        mlForumCommunicationTrend, // 论坛传播态势
+        mlForumHotTopicDirection, // 论坛人物画像
+        mlSpreadTOPmodels, // 传播TOP车型
+        mlKeyMedia,
+        mlRearWingPropagationSituation,
+        mlPopularwordCloud
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.ml-outter {
+    padding: 0px 16px 16px 16px;
+    .ml-d1 {
+        display: flex;
+        justify-content: flex-start;
+        .bdl-d1-dd2 {
+            position: relative;
+            width: 620px;
+            height: 560px;
+            margin-left: 16px;
+            display: flex;
+            justify-content: center;
+            overflow: hidden;
+            .m1 {
+                position: absolute;
+                width: 274px;
+                height: 64px;
+                top: 0px;
+                transform: translate(0px);
+                cursor: pointer;
+            }
+            .m2 {
+                position: absolute;
+                width: 274px;
+                height: 64px;
+                bottom: 0px;
+                transform: translate(0px);
+                cursor: pointer;
+            }
+            .bdl-d1-dd2-d1 {
+                width: 470px;
+                height: 520px;
+                background-image: url("../../assets/images/BrandInsight/img_tz.png");
+                background-repeat: no-repeat;
+                background-size: cover;
+                background-position: 0 40px;
+                .bdl-d1-dd2-d1-s1 {
+                    display: block;
+                    font-size: 40px;
+                    color: #b2daf7;
+                    width: 100%;
+                    text-align: center;
+                    margin-top: 150px;
+                }
+            }
+        }
+    }
+}
+.bdl-d2 {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bdl-d2-bd {
+        display: flex;
+        justify-content: flex-start;
+        padding: 0px 16px 16px 16px;
+    }
+}
+.bdl-d3 {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    overflow: hidden;
+    .bdl-d3-bd {
+        display: flex;
+        justify-content: flex-start;
+        padding: 0px 16px 16px 16px;
+    }
+}
+.bdl-d4 {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bdl-d4-bd {
+        display: flex;
+        justify-content: flex-start;
+        padding: 0px 16px 16px 16px;
+    }
+}
+.bdl-d5 {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bdl-d5-bd {
+        display: flex;
+        justify-content: flex-start;
+        padding: 0px 16px 16px 16px;
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/ml-brand-data/index.vue b/src/views/ModelInsight/ml-brand-data/index.vue
new file mode 100644
index 0000000..544dcb7
--- /dev/null
+++ b/src/views/ModelInsight/ml-brand-data/index.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-25 13:20:36
+ * @LastEditTime: 2021-10-25 13:42:52
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/ModelInsight/ml-brand-data/index.vue
+-->
+
+<template>
+    <div class="mbd-outter">
+        <v-label-div title="品牌数据"></v-label-div>
+        <div class="mbd-inner">
+            <div class="mbd-d1">
+                <div class="d1">
+                    <img class="m1" src="../../../assets/images/ModelInsight/ic_cbsj.png">
+                    <span class="s1">传播数据总量</span>
+                </div>
+                <div class="d2">
+                    74,073,195
+                </div>
+            </div>
+            <div class="mbd-d1" style="margin-top: 16px">
+                <div class="d1">
+                    <img class="m1" src="../../../assets/images/ModelInsight/ic_ppzb.png">
+                    <span class="s1">占品牌传播比例</span>
+                </div>
+                <div class="d2">
+                    30.50%
+                </div>
+            </div>
+            <div class="mbd-d1" style="margin-top: 16px">
+                <div class="d1">
+                    <img class="m1" src="../../../assets/images/ModelInsight/ic_ztdx.png">
+                    <span class="s1">舆情整体调性</span>
+                </div>
+                <div class="d2">
+                    <span class="s2-s1"></span>
+                    <span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
+                    <span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ml-brand-data",
+};
+</script>
+
+<style lang="less" scoped>
+.mbd-outter {
+    width: 620px;
+    height: 580px;
+    border: 2px solid #0f2a4d;
+    .mbd-inner {
+        padding: 16px;
+        .mbd-d1 {
+            width: 100%;
+            height: 150px;
+            border: 1px solid #0f2a4d;
+            border-radius: 2px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .d1 {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                .m1 {
+                    display: inline-block;
+                    width: 64px;
+                    height: 64px;
+                    margin-left: 16px;
+                }
+                .s1 {
+                    display: inline-block;
+                    font-size: 20px;
+                    color: #fcfdfe;
+                    margin-left: 12px;
+                }
+            }
+            .d2 {
+                font-size: 44px;
+                font-family: Bebas;
+                color: #ffffff;
+                margin-right: 16px;
+                display: flex;
+                justify-content: flex-start;
+                .s2-s1 {
+                    display: block;
+                    width: 102px;
+                    height: 36px;
+                    background: #3373cc;
+                    margin-right: 2px;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/ml-tts/index.vue b/src/views/ModelInsight/ml-tts/index.vue
new file mode 100644
index 0000000..e529459
--- /dev/null
+++ b/src/views/ModelInsight/ml-tts/index.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Author: xw
+ * @Date: 2021-10-12 09:32:35
+ * @LastEditTime: 2021-10-25 14:47:23
+ * @LastEditors: Please set LastEditors
+ * @Description: 舆情传播趋势
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
+-->
+<template>
+    <div class="tit-outter">
+        <div class="tit-header">
+            <a-button type="primary" size="small">进入数据列表页</a-button>
+            <a-button type="primary" style="margin-left: 16px;margin-right: 16px;" size="small">导出报告</a-button>
+        </div>
+        <div class="tit-inner">
+            <vLabel-div title="舆情传播趋势"></vLabel-div>
+            <div class="tit-bd">
+                <v-echarts :opt="opt"></v-echarts>
+            </div> 
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "ml-tts",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.tit-outter {
+    width: 618px;
+    height: 560px;
+    margin-left: 16px;
+    .tit-header {
+        width: 100%;
+        height: 48px;
+        background: linear-gradient(270deg, #07192f 0%, #010B19 100%);
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    .tit-inner {
+        width: 100%;
+        height: 490px;
+        margin-top: 16px;
+        border: 2px solid #0F2A4D;
+        .tit-bd {
+            width: 100%;
+            height: calc(100% - 48px);
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/ml-tts/opt.js b/src/views/ModelInsight/ml-tts/opt.js
new file mode 100644
index 0000000..99d975a
--- /dev/null
+++ b/src/views/ModelInsight/ml-tts/opt.js
@@ -0,0 +1,134 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-13 16:04:39
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            left: '3%',
+            right: '2%',
+            bottom: '3%',
+            top: '15%',
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: '新闻',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
+            },
+            {
+                name: '论坛',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
+            },
+            {
+                name: '微信',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
+            },
+            {
+                name: '微博',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
+            },
+            {
+                name: 'APP',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+
+        ]
+    }
+}
diff --git a/src/views/ModelInsight/mlForumCommunicationTrend/index.vue b/src/views/ModelInsight/mlForumCommunicationTrend/index.vue
new file mode 100644
index 0000000..fa6987f
--- /dev/null
+++ b/src/views/ModelInsight/mlForumCommunicationTrend/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 16:33:38
+ * @LastEditTime: 2021-10-25 15:08:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/index.vue
+-->
+<template>
+    <div class="fct-outter">
+       <v-label-div title="论坛传播态势" :showLine="false" :eStyle="{ 'border-style': 'none' }"/> 
+       <div class="fct-inner">
+           <v-echarts :opt="opt"></v-echarts>
+       </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "ml-forum-communication-trend",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.fct-outter {
+    width: 630px;
+    height: 412px;
+    .fct-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlForumCommunicationTrend/opt.js b/src/views/ModelInsight/mlForumCommunicationTrend/opt.js
new file mode 100644
index 0000000..6c62c86
--- /dev/null
+++ b/src/views/ModelInsight/mlForumCommunicationTrend/opt.js
@@ -0,0 +1,75 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 16:40:53
+ * @LastEditTime: 2021-10-12 16:44:49
+ * @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() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                color: "#51bc91",
+                areaStyle: {normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: '#51bc91'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(0,0,0,0)'
+                        }]),
+                }}
+            }
+        ]
+    };
+}
diff --git a/src/views/ModelInsight/mlForumHotTopicDirection/index.vue b/src/views/ModelInsight/mlForumHotTopicDirection/index.vue
new file mode 100644
index 0000000..049d38c
--- /dev/null
+++ b/src/views/ModelInsight/mlForumHotTopicDirection/index.vue
@@ -0,0 +1,53 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 16:48:36
+ * @LastEditTime: 2021-10-25 15:08:22
+ * @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>
+            </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>
+        </div>
+    </div>
+</template>
+
+<script>
+import vRankingFhtd from "./v-ranking-fhtd"
+export default {
+    name: "mlForumHotTopicDirection",
+    components: {
+        "v-ranking-fhtd": vRankingFhtd
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.fhtd-outter {
+    width: 630px;
+    height: 412px;
+    margin-left: 16px;
+    .fhtd-inner {
+        padding: 0px 16px 16px 16px;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue b/src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue
new file mode 100644
index 0000000..ef4b08b
--- /dev/null
+++ b/src/views/ModelInsight/mlForumHotTopicDirection/v-ranking-fhtd/index.vue
@@ -0,0 +1,230 @@
+<!--
+ * @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/mlKeyMedia/index.vue b/src/views/ModelInsight/mlKeyMedia/index.vue
new file mode 100644
index 0000000..c5894a3
--- /dev/null
+++ b/src/views/ModelInsight/mlKeyMedia/index.vue
@@ -0,0 +1,43 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 18:43:22
+ * @LastEditTime: 2021-10-25 15:15:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/keyMedia/index.vue
+-->
+
+<template>
+    <div class="km-outter">
+        <v-label-div title="重点媒体" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <div class="km-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+         <v-pagination :style="{position: 'absolute', left: '16px', bottom: '12px'}"></v-pagination>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt";
+export default {
+    name: "mlKeyMedia",
+    data() {
+        return {
+            opt: createOpt(),
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.km-outter {
+    position: relative;
+    width: 630px;
+    height: 412px;
+    margin-left: 16px;
+    .km-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlKeyMedia/opt.js b/src/views/ModelInsight/mlKeyMedia/opt.js
new file mode 100644
index 0000000..4712959
--- /dev/null
+++ b/src/views/ModelInsight/mlKeyMedia/opt.js
@@ -0,0 +1,75 @@
+
+
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 12:38:34
+ * @LastEditTime: 2021-10-12 19:13:40
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '4%',
+            top: "1%",
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['懂车帝',  '天眼查', '新浪网', '微信', '今日头条'],
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+        },
+        series: [
+            {
+                name: '2011',
+                type: 'bar',
+                barWidth: 24,
+                data: [500, 1000, 2220, 3000, 4000],
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                    offset: 0,
+                    color: '#010B19'
+                }, {
+                    offset: 1,
+                    color: '#51bc91'
+                }]),
+            }
+        ]
+    }
+}
diff --git a/src/views/ModelInsight/mlPopularEvents/index.vue b/src/views/ModelInsight/mlPopularEvents/index.vue
new file mode 100644
index 0000000..fbe005d
--- /dev/null
+++ b/src/views/ModelInsight/mlPopularEvents/index.vue
@@ -0,0 +1,40 @@
+<!--
+ * @Author: xw
+ * @Date: 2021-10-12 11:06:58
+ * @LastEditTime: 2021-10-25 14:51:32
+ * @LastEditors: Please set LastEditors
+ * @Description: 热门事件
+ * @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
+-->
+<template>
+    <div class="pe-outter">
+        <v-label-div title="热点事件" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <div class="pe-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mlPopularEvents",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pe-outter {
+    width: 928px;
+    height: 412px;
+    margin-left: 16px;
+    .pe-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlPopularEvents/opt.js b/src/views/ModelInsight/mlPopularEvents/opt.js
new file mode 100644
index 0000000..128167a
--- /dev/null
+++ b/src/views/ModelInsight/mlPopularEvents/opt.js
@@ -0,0 +1,231 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 11:16:44
+ * @LastEditTime: 2021-10-12 13:19:28
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/popularEvents/opt.js
+ */
+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','无工作经验']],
+    [['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年经验']],
+    [['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年经验']],
+    [['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年经验']],
+    [['500-1000人',4,300000000,'E4','7-10年经验'],['150-500人',0.77,300000000,'E3','7-10年经验'],['50-150人',0.83,300000000,'E2','7-10年经验']],
+    [['1000-5000人',1.04,350000000,'F5','10年以上经验'],['150-500人',1.54,350000000,'F3','10年以上经验'],['50-150人',2.5,350000000,'F2','10年以上经验']],
+];
+export default function createOpt() {
+    return {
+        title: {
+            show: false,
+            text: '湘西自治州不同规模企业对岗位工作经验要求情况'
+        },
+        legend: {
+            y: 'top',
+            x: 16,
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            data: ['无工作经验', '1-3年经验','3-5年经验','5-7年经验','7-10年经验','10年以上经验']
+        },
+        grid: {
+            left: '3%',
+            right: '2%',
+            bottom: '4%',
+            top: '15%',
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "item",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            data:['少于50人','50-150人','150-500人','500-1000人','1000-5000人','5000-10000人','10000人以上'],
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+     
+             
+        },
+        yAxis: {
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    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)'
+                    }])
+                }
+            }
+        }, 
+         
+        {
+            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)'
+                    }])
+                }
+            }
+        },
+         
+        ]
+    };
+
+
+}
diff --git a/src/views/ModelInsight/mlPopularEventsList/index.vue b/src/views/ModelInsight/mlPopularEventsList/index.vue
new file mode 100644
index 0000000..21d0d75
--- /dev/null
+++ b/src/views/ModelInsight/mlPopularEventsList/index.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Author: xw
+ * @Date: 2021-10-12 10:50:44
+ * @LastEditTime: 2021-10-25 14:52:13
+ * @LastEditors: Please set LastEditors
+ * @Description: 热门事件列表
+ * @FilePath: /data-show/src/views/BrandInsight/popularEventsList/index.vue
+-->
+
+<template>
+  <div class="pe-ouuter">
+    <v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+    <div class="pe-inner">
+      <dv-scroll-board
+        :config="config"
+        :style="{ width: '100%', height: '346px' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mlPopularEventsList",
+  data() {
+    return {
+      config: {
+        headerBGC: "#0F2A4D",
+        oddRowBGC: "rgba(69, 149, 244, 0);",
+        evenRowBGC: "#0F2A4D;",
+        columnWidth: [400],
+        header: ["事件列表", "影响力", "时间", "关联车型"],
+        data: [
+          ["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"],
+          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q5"],
+          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A6"],
+          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q6"],
+          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q7"],
+          ["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A7"],
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.pe-ouuter {
+  width: 912px;
+  height: 412px;
+  .pe-inner {
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+}
+</style>
diff --git a/src/views/ModelInsight/mlPopularwordCloud/index.vue b/src/views/ModelInsight/mlPopularwordCloud/index.vue
new file mode 100644
index 0000000..9e5ec16
--- /dev/null
+++ b/src/views/ModelInsight/mlPopularwordCloud/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 19:16:46
+ * @LastEditTime: 2021-10-25 15:17:49
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/popularwordCloud/index.vue
+-->
+<template>
+    <div class="pwc-outter">
+       <v-label-div title="热门词云" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+       <div class="pwd-inner">
+           <v-echarts :opt="opt"></v-echarts>
+       </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mlPopularwordCloud",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pwc-outter {
+    width: 628px;
+    height: 412px;
+    .pwd-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlPopularwordCloud/opt.js b/src/views/ModelInsight/mlPopularwordCloud/opt.js
new file mode 100644
index 0000000..6d78372
--- /dev/null
+++ b/src/views/ModelInsight/mlPopularwordCloud/opt.js
@@ -0,0 +1,215 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 13:35:13
+ * @LastEditTime: 2021-10-12 19:22:21
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ */
+// import * as echarts from "echarts";
+const dataBJ = [
+    [1, 55, 9, 56, 0.46, 18, 6, '良'],
+    [2, 25, 11, 21, 0.65, 34, 9, '优'],
+    [3, 56, 7, 63, 0.3, 14, 5, '良'],
+    [4, 33, 7, 29, 0.33, 16, 6, '优'],
+    [5, 42, 24, 44, 0.76, 40, 16, '优'],
+    [6, 82, 58, 90, 1.77, 68, 33, '良'],
+    [7, 74, 49, 77, 1.46, 48, 27, '良'],
+    [8, 78, 55, 80, 1.29, 59, 29, '良'],
+    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
+    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
+    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
+    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
+    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
+    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
+    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
+    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
+    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
+    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
+    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
+    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
+    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
+    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
+    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
+    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
+    // [25, 42, 27, 43, 1, 53, 22, '优'],
+    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
+    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
+    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
+    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
+    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
+    // [31, 46, 5, 49, 0.28, 10, 6, '优']
+  ];
+  const dataGZ = [
+    [1, 26, 37, 27, 1.163, 27, 13, '优'],
+    [2, 85, 62, 71, 1.195, 60, 8, '良'],
+    [3, 78, 38, 74, 1.363, 37, 7, '良'],
+    [4, 21, 21, 36, 0.634, 40, 9, '优'],
+    [5, 41, 42, 46, 0.915, 81, 13, '优'],
+    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
+    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
+    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
+    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
+    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
+    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
+    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
+    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
+    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
+    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
+    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
+    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
+    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
+    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
+    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
+    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
+    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
+    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
+    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
+    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
+    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
+    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
+    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
+    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
+    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
+    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
+  ];
+  const dataSH = [
+    [1, 91, 45, 125, 0.82, 34, 23, '良'],
+    [2, 65, 27, 78, 0.86, 45, 29, '良'],
+    [3, 83, 60, 84, 1.09, 73, 27, '良'],
+    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+    // [8, 89, 65, 78, 0.86, 51, 26, '良'],
+    // [9, 53, 33, 47, 0.64, 50, 17, '良'],
+    // [10, 80, 55, 80, 1.01, 75, 24, '良'],
+    // [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
+    // [12, 99, 71, 142, 1.1, 62, 42, '良'],
+    // [13, 95, 69, 130, 1.28, 74, 50, '良'],
+    // [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
+    // [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
+    // [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
+    // [17, 79, 43, 107, 1.05, 59, 37, '良'],
+    // [18, 71, 46, 89, 0.86, 64, 25, '良'],
+    // [19, 97, 71, 113, 1.17, 88, 31, '良'],
+    // [20, 84, 57, 91, 0.85, 55, 31, '良'],
+    // [21, 87, 63, 101, 0.9, 56, 41, '良'],
+    // [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
+    // [23, 87, 62, 100, 1, 72, 28, '良'],
+    // [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
+    // [25, 65, 45, 51, 0.74, 39, 17, '良'],
+    // [26, 39, 24, 38, 0.61, 47, 17, '优'],
+    // [27, 39, 24, 39, 0.59, 50, 19, '优'],
+    // [28, 93, 68, 96, 1.05, 79, 29, '良'],
+    // [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
+    // [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
+    // [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
+  ];
+//   const schema = [
+//     { name: 'date', index: 0, text: '日' },
+//     { name: 'AQIindex', index: 1, text: 'AQI指数' },
+//     { name: 'PM25', index: 2, text: 'PM2.5' },
+//     { name: 'PM10', index: 3, text: 'PM10' },
+//     { name: 'CO', index: 4, text: '一氧化碳（CO）' },
+//     { name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
+//     { name: 'SO2', index: 6, text: '二氧化硫（SO2）' }
+//   ];
+  const itemStyle = {
+    opacity: 0.8,
+    shadowBlur: 10,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    shadowColor: 'rgba(0,0,0,0.3)'
+  };
+export default function createOpt() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: { 
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function(param) {
+                let value = param.value;
+                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+            }
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            }
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            },
+            scale: true
+        },
+        series: [{
+            name: '北京',
+            data: dataBJ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }, {
+            name: '上海',
+            data: dataSH,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF",
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        },
+        {
+            name: '广州',
+            data: dataGZ,
+            type: 'scatter',
+            symbolSize: function (data) {
+                return data[2]
+            },
+            label: {
+                show: true,
+                color: "#FFF", 
+                formatter: function (param) {
+                    return param.data[param.data.length - 1];
+                },
+            },
+            itemStyle: itemStyle
+        }
+        ]
+    }
+}
diff --git a/src/views/ModelInsight/mlRearWingPropagationSituation/index.vue b/src/views/ModelInsight/mlRearWingPropagationSituation/index.vue
new file mode 100644
index 0000000..94dca27
--- /dev/null
+++ b/src/views/ModelInsight/mlRearWingPropagationSituation/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 18:35:53
+ * @LastEditTime: 2021-10-25 15:16:34
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/rearWingPropagationSituation/index.vue
+-->
+<template>
+    <div class="rwps-outter">
+        <v-label-div title="尾翼传播态势" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <div class="rwps-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mlRearWingPropagationSituation",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.rwps-outter {
+    width: 630px;
+    height: 412px;
+    .rwps-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ModelInsight/mlRearWingPropagationSituation/opt.js b/src/views/ModelInsight/mlRearWingPropagationSituation/opt.js
new file mode 100644
index 0000000..6c62c86
--- /dev/null
+++ b/src/views/ModelInsight/mlRearWingPropagationSituation/opt.js
@@ -0,0 +1,75 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 16:40:53
+ * @LastEditTime: 2021-10-12 16:44:49
+ * @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() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                color: "#51bc91",
+                areaStyle: {normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: '#51bc91'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(0,0,0,0)'
+                        }]),
+                }}
+            }
+        ]
+    };
+}
diff --git a/src/views/ModelInsight/mlSpreadTOPmodels/index.vue b/src/views/ModelInsight/mlSpreadTOPmodels/index.vue
new file mode 100644
index 0000000..5428cf8
--- /dev/null
+++ b/src/views/ModelInsight/mlSpreadTOPmodels/index.vue
@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 18:18:20
+ * @LastEditTime: 2021-10-25 15:09:50
+ * @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>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mlSpreadTOPmodels",
+    data() {
+        return {
+            opt: createOpt(["奥迪A8", "奥迪A6", "奥迪Q3", "奥迪Q4", "奥迪Q5"],[2200, 1900, 1800, 1600, 1400])
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.stm-outter {
+    width: 628px;
+    height: 412px;
+    margin-left: 16px;
+    .stm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlSpreadTOPmodels/opt.js b/src/views/ModelInsight/mlSpreadTOPmodels/opt.js
new file mode 100644
index 0000000..9be7d77
--- /dev/null
+++ b/src/views/ModelInsight/mlSpreadTOPmodels/opt.js
@@ -0,0 +1,104 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 18:23:25
+ * @LastEditTime: 2021-10-12 18:31:20
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt(dx,ds) {
+    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: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        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
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}
diff --git a/src/views/ModelInsight/mlWeiboKol/index.vue b/src/views/ModelInsight/mlWeiboKol/index.vue
new file mode 100644
index 0000000..a31c985
--- /dev/null
+++ b/src/views/ModelInsight/mlWeiboKol/index.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 14:19:53
+ * @LastEditTime: 2021-10-25 14:57:49
+ * @LastEditors: Please set LastEditors
+ * @Description: 微博KOL
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
+-->
+
+<template>
+    <div class="wk-outter">
+        <div class="wk-inner">
+            <div class="wk-in-d1">
+                <v-label-div title="微博KOL" :showLine="false" :eStyle="{ 'border-style': 'none' }"></v-label-div>
+                <div class="wk-in-d1-dd1">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+            </div>
+            <div class="wk-in-d2">
+                <v-label-ctx label="名人" cont="2000" percentage="25%" color="#3373CC" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
+                <v-label-ctx label="政府" cont="2000" percentage="25%" color="#518ea9" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
+                <v-label-ctx label="大V" cont="1000" percentage="25%" color="#54BF93" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
+                <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 createOpt from "./opt";
+export default {
+    name: "mlWeiboKol",
+    data() {
+        return {
+            opt: createOpt(),
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.wk-outter {
+    width: 630px;
+    height: 412px;
+    .wk-inner {
+        display: flex;
+        justify-content: flex-start;
+        width: 100%;
+        height: 100%;
+        .wk-in-d1 {
+            width: 310px;
+            height: 100%;
+            .wk-in-d1-dd1 {
+                width: 100%;
+                height: calc(100% - 48px);
+            }
+        }
+        .wk-in-d2 {
+            width: 310px;
+            height: auto;
+            margin-left: 16px;
+        }
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlWeiboKol/opt.js b/src/views/ModelInsight/mlWeiboKol/opt.js
new file mode 100644
index 0000000..3490a3e
--- /dev/null
+++ b/src/views/ModelInsight/mlWeiboKol/opt.js
@@ -0,0 +1,146 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-12 14:39:58
+ * @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() {
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['65%', '80%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              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'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['86%', '94%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                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'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}
diff --git a/src/views/ModelInsight/mlWeiboPortraits/index.vue b/src/views/ModelInsight/mlWeiboPortraits/index.vue
new file mode 100644
index 0000000..2751067
--- /dev/null
+++ b/src/views/ModelInsight/mlWeiboPortraits/index.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 15:06:47
+ * @LastEditTime: 2021-10-25 14:58:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
+-->
+<template>
+    <div class="wp-outter">
+        <v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+            <v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
+        </v-label-div>
+        <div class="wp-inner">
+            <div class="wp-in-d1">
+                 <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>
+                <v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12" :eStyle="{ height: '121px' }"></v-label-ctx>
+                <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93" :eStyle="{ height: '121px' }"></v-label-ctx>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mlWeiboPortraits",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.wp-outter {
+    width: 628px;
+    height: 412px;
+    margin-left: 16px;
+    .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/mlWeiboPortraits/opt.js b/src/views/ModelInsight/mlWeiboPortraits/opt.js
new file mode 100644
index 0000000..d8a5973
--- /dev/null
+++ b/src/views/ModelInsight/mlWeiboPortraits/opt.js
@@ -0,0 +1,114 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:14:58
+ * @LastEditTime: 2021-10-12 16:03:56
+ * @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() {
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['65%', '80%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                fontSize: '40',
+                color: "#ffff",
+            },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\n' + p.data.value; 
+                  },
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2200, name: '男性', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['86%', '94%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: [
+                  { value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                  { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                  { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}
diff --git a/src/views/ModelInsight/mlWeiboVolumeTrend/index.vue b/src/views/ModelInsight/mlWeiboVolumeTrend/index.vue
new file mode 100644
index 0000000..3811466
--- /dev/null
+++ b/src/views/ModelInsight/mlWeiboVolumeTrend/index.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 15:24:48
+ * @LastEditTime: 2021-10-25 14:58:22
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/index.vue
+-->
+<template>
+    <div class="wvt-outter">
+        <v-label-div title="微博声量趋势" :showLine="false" :eStyle="{ 'border-style': 'none' }">
+        </v-label-div>
+        <div class="wvt-inner">
+             <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "ml-weibo-volume-trend",
+    data() {
+        return {
+          opt: createOpt() 
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.wvt-outter {
+    width: 630px;
+    height: 412px;
+    margin-left: 16px;
+    .wvt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/ModelInsight/mlWeiboVolumeTrend/opt.js b/src/views/ModelInsight/mlWeiboVolumeTrend/opt.js
new file mode 100644
index 0000000..a60aba9
--- /dev/null
+++ b/src/views/ModelInsight/mlWeiboVolumeTrend/opt.js
@@ -0,0 +1,75 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:32:24
+ * @LastEditTime: 2021-10-12 16:47:07
+ * @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() {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "16px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                color: '#546fc5',
+                areaStyle: {normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: '#546fc5'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(0,0,0,0)'
+                        }]),
+                }}
+            }
+        ]
+    };
+}