lyl事件洞察点击事件列表

src/api/EventdEC/index.js

@@ -0,0 +1,207 @@
+import httpService from "@/request"
+// 事件详情-信息
+export function getEventData(params) {
+    let obj =  Object.assign({action: 'getEventData'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 单个事件数据-进入数据列表页
+export function getList(params) {
+    let obj =  Object.assign({action: 'getList', sType: 'BrandDataHot'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 单个事件数据列表导出
+export function toExcel(params) {
+    let obj =  Object.assign({action: 'toExcel', sType: 'BrandData'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 事件影响力-事件影响力
+export function getCountOrEffectOrHot(params) {
+    let obj =  Object.assign({action: 'getCountOrEffectOrHot', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传播态势-传播态势
+export function getSourcetypeTime(params) {
+    let obj =  Object.assign({action: 'getSourcetypeTime', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 调性分布趋势-调性分布趋势
+export function getAffectionsTime(params) {
+    let obj =  Object.assign({action: 'getAffectionsTime', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 事件传播历程-事件传播历程
+export function getEventSpreadProcess0528(params) {
+    let obj =  Object.assign({action: 'getEventSpreadProcess0528', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 媒体解读-列表
+export function getSource(params) {
+    let obj =  Object.assign({action: 'getSource', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 媒体解读-热门词云
+export function getHotWord(params) {
+    let obj =  Object.assign({action: 'getHotWord', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+//媒体解读-正面词云
+export function getPositive(params) {
+    let obj =  Object.assign({action: 'getPositive', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 媒体解读-负面词云
+export function getNegative(params) {
+    let obj =  Object.assign({action: 'getNegative', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传播途径-传播途径
+export function getDiffuseZhuTi(params) {
+    let obj =  Object.assign({action: 'getDiffuseZhuTi', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 微博调性分布-微博调性分布
+export function getAffections(params) {
+    let obj =  Object.assign({action: 'getAffections', sType: 'BrandWeiBo'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 尾翼分析-传播态势
+export function getSourcetypeTime1(params) {
+    let obj =  Object.assign({action: 'getSourcetypeTime', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 尾翼分析-重点媒体分布
+export function getWebsite(params) {
+    let obj =  Object.assign({action: 'getWebsite', sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 尾翼分析-正面词云
+// export function getPositive(params) {
+//     let obj =  Object.assign({action: 'getPositive', sType: 'BrandWeiYi'}, params)
+//     return httpService({
+//         url: `/api/v6.ashx`,
+//         method: 'post',
+//         data: obj,
+//         headers: {
+//             'content-type': 'application/x-www-form-urlencoded'
+//         }
+//     })
+// }
+// 尾翼分析-负面词云
+// export function getNegative(params) {
+//     let obj =  Object.assign({action: 'getNegative', sType: 'BrandWeiYi'}, params)
+//     return httpService({
+//         url: `/api/v6.ashx`,
+//         method: 'post',
+//         data: obj,
+//         headers: {
+//             'content-type': 'application/x-www-form-urlencoded'
+//         }
+//     })
+// }
+

src/views/EventDEC/esprocess/index.vue

@@ -10,7 +10,7 @@
     <div class="esp-outter">
         <v-label-div title="事件传播历程">
         </v-label-div>
-         <div class="coe-ts">
+        <div class="coe-ts">
             <div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
             <div class="coe-ts-d2">
                 <vue-scroll>
@@ -99,14 +99,45 @@
 </template>
 
 <script>
+import { getEventSpreadProcess0528 } from "@/api/EventdEC";
 export default {
     name: "esprocess",
     data() {
         return {
-             m1: require("../../../assets/images/EventInsight/img_ct.png"),
+            form: {
-             m2: require("../../../assets/images/EventInsight/img_lt.png"),
+                sBrand: "",
-        }
+                token: "",
-    }
+            },
+            props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            m1: require("../../../assets/images/EventInsight/img_ct.png"),
+            m2: require("../../../assets/images/EventInsight/img_lt.png"),
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.events_id = this.$route.query.events_id || "";
+        this.getDdta();
+    },
+    methods: {
+        getDdta() {
+            let obj = Object.assign({}, this.form);
+            this.load = true;
+            getEventSpreadProcess0528(obj).then((res) => {
+                let data = res.data;
+                this.data = data;
+                this.load = false;
+            });
+        },
+        goback() {
+            this.$router.go(-1);
+        },
+    },
 };
 </script>
 

src/views/EventDEC/incidentSpreadSituation/index.vue

@@ -22,12 +22,20 @@
 </template>
 
 <script>
-import createOpt from "./opt"
+import createOpt from "./opt";
+import { getTwoTime } from "@/api/comm";
+import { getSourcetypeTime } from "@/api/EventdEC";
 export default {
     name: "incidentSpreadSituation",
     data() {
         return {
-            opt: createOpt(),
+            props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            opt: {},
             selVal: 1,
             selDatas: [
                 {
@@ -47,13 +55,55 @@ export default {
                     label: "自定义",
                 },
             ],
-        }
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: ""
+            },
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.brand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
     },
     methods: {
+        // 获取选择时间的数据
+        getSelect() {
+            getTwoTime().then((res) => {
+                this.selDatas = res.data;
+                if (!this.form.sTimeType) {
+                    this.form.sTimeType = this.selDatas[0].key;
+                    this.setCtime2(this.form);
+                }
+            });
+        },
+        getDdta() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getSourcetypeTime(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+                this.load = false;
+            });
+        },
+        // 选择时间
         handleChange() {
-            
+            this.setCtime2(this.form);
-        }
+            if (this.form.sTimeType != 4) {
-    }
+                this.reload();
+            }
+        },
+    },
 };
 </script>
 

src/views/EventDEC/incidentSpreadSituation/opt.js

@@ -1,18 +1,60 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:11:24
- * @LastEditTime: 2021-10-19 19:34:14
+ * @LastEditTime: 2021-11-01 14:25:41
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
  */
-export default function createOpt() {
+import * as echarts from "echarts";
+// import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['#546fc5', '#91cb74', '#f9c857', '#ed6565', '#72bfde', '#3aa272', '#fb8351'];
+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: {
+                        normal: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0, color: colors[j] // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#000' // 100% 处的颜色
+                            }]
+                            ),
+                        }
+                    },
+                    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: 16,
+            left: '3%',
-            right: 26,
+            right: '2%',
-            bottom: 16,
+            bottom: '3%',
-            top: 52,
+            top: '15%',
             containLabel: true
         },
         tooltip: {
@@ -45,7 +87,13 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -62,80 +110,6 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
+        series: data
-            {
-                name: '新闻',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
-            },
-            {
-                name: '微信',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
-            },
-            {
-                name: '论坛',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
-            },
-            {
-                name: '微博',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
-            },
-            {
-                name: 'APP',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-            {
-                name: '其他',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-
-        ]
     }
 }

src/views/EventDEC/index.vue

@@ -14,7 +14,7 @@
                     <v-btn @click="goback">返回</v-btn>
                 </v-label-div>
                 <div class="edec-d1-dd1">
-                    <div class="d1">新车上市</div>
+                    <div class="d1">{{this.form.sBrand}}</div>
                     <div class="d2">
                         <div class="s1">延续哈弗H6设计 哈弗H6S内饰官图发布</div>
                         <div class="s2">此前，有报道称，广汽丰田赛那SIENNA(参数|询价)将于8月29日亮相2021成都车展。不过我们从官方获悉到最新消息，新车将于8月28日在成都等多城市联合首发亮相，并实车现身成都车展。按照规划，新车有望在2021年下半年正式上市。作为丰田旗下的一款MPV车型，由广汽丰田进行国产。在官方的释义中，“赛那”的名称中，“赛”指赛过，超越，意味着霸气尽显，强者姿态一览无余；“那”则包含了“霎那”不负片刻快乐，以及“致远”时刻向幸福出发的美好寓意。此前，有报道称，广汽丰田赛那SIENNA(参数|询价)将于8月29日亮相2021成都车…</div>
@@ -24,7 +24,8 @@
                     <div class="d1" style="margin-left: 16px">
                         <img class="m1" src="../../assets/images/EventInsight/ic_kssj.png" />
                         <span class="s1">开始时间：</span>
-                        <span class="s2">2021-08-01 00:59:18</span>
+                        <span class="s2">{{Time}}</span>
+                         <a-pagination v-model="form.iPageIndex" :Time="Time" show-less-items/>
                     </div>
                     <div class="d1">
                         <img class="m1" src="../../assets/images/EventInsight/ic_yxl.png" />
@@ -34,23 +35,24 @@
                     <div class="d1">
                         <img class="m1" src="../../assets/images/EventInsight/ic_cbl.png" />
                         <span class="s1">传播总量：</span>
-                        <span class="s2">3467</span>
+                        <span class="s2">{{total}}</span>
+                         <a-pagination v-model="form.iPageIndex" :total="total" show-less-items/>
                     </div>
                 </div>
             </div>
-            <incidentSpreadSituation></incidentSpreadSituation>
+            <incidentSpreadSituation :id="events_id"></incidentSpreadSituation>
-            <tonalCommunicationPosture></tonalCommunicationPosture>
+            <tonalCommunicationPosture :id="events_id"></tonalCommunicationPosture>
-            <esprocess></esprocess>
+            <esprocess :id="events_id"></esprocess>
-            <mediaInterpretationEc></mediaInterpretationEc>
+            <mediaInterpretationEc :id="events_id"></mediaInterpretationEc>
-            <mediaInterpretationED></mediaInterpretationED>
+            <mediaInterpretationED :id="events_id"></mediaInterpretationED>
-            <wbUserEDE></wbUserEDE>
+            <wbUserEDE :id="events_id"></wbUserEDE>
             <div class="edec-d2">
                 <v-label-div title="尾翼分析">
                 </v-label-div>
-                <tailAnalysisED></tailAnalysisED>
+                <tailAnalysisED :id="events_id"></tailAnalysisED>
                 <div class="edec-dd1">
-                    <kmdED></kmdED>
+                    <kmdED :id="events_id"></kmdED>
-                    <pnwcWord></pnwcWord>
+                    <pnwcWord :id="events_id"></pnwcWord>
                 </div>
             </div>
         </div>
@@ -66,6 +68,7 @@ import wbUserEDE from "./wbUserEDE";
 import tailAnalysisED from "./tailAnalysisED";
 import kmdED from "./kmdED"
 import pnwcWord from "./pnwcWord"
+import {getEventData,getList,toExcel,getCountOrEffectOrHot} from '@/api/EventdEC'
 export default {
     name: "eventDEC",
     components: {
@@ -79,7 +82,66 @@ export default {
         kmdED, // 重点媒体分布
         pnwcWord // 正负词云
     },
+    data() {
+        return {
+            gValue: 0,
+            total: 0,
+            Time: "",
+            events_id: "",
+            form: {
+                sBrand: "",
+                token: "",
+            }
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.events_id = this.$route.query.events_id || "";
+        this.getDdta();
+        this.getDdta1();
+        this.getDdta2();
+        this.getDdta3();
+    },
     methods: {
+        getDdta(){
+             let obj = Object.assign({},this.form);
+             this.load = true;
+             getEventData(obj).then(res => {
+                let data = res.data || [];
+                this.data = data;
+                this.load = false;
+            })
+        },
+        getDdta1(){
+             let obj = Object.assign({},this.form);
+             this.load = true;
+             getList(obj).then(res => {
+                let data = res.data;
+                let totalNum = res.totalNum || 0;
+                this.total = totalNum;
+                this.data = data;
+                this.load = false;
+            })
+        },
+        getDdta2(){
+             let obj = Object.assign({},this.form);
+             this.load = true;
+             toExcel(obj).then(res => {
+                let data = res.data;
+                this.data = data;
+                this.load = false;
+            })
+        },
+        getDdta3(){
+             let obj = Object.assign({},this.form);
+             this.load = true;
+             getCountOrEffectOrHot(obj).then(res => {
+                let data = res.data;
+                this.data = data;
+                this.load = false;
+            })
+        },
         goback() {
             this.$router.go(-1);
         },

src/views/EventDEC/kmdED/index.vue

@@ -9,34 +9,74 @@
 <template>
     <div class="kmd-outter">
         <v-label-div title="重点媒体分布" :showLine="false" :eStyle="{'border-style': 'none'}">
-         </v-label-div>
+        </v-label-div>
-         <div class="kmd-inner">
+        <div class="kmd-inner">
-              <div class="d1" style="margin-left: 16px">
+            <div class="d1">
-                <v-ranking-kmd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-kmd>
+                <v-ranking v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking>
-                <v-ranking-kmd :num="2" label="刹车" val="594614"></v-ranking-kmd>
-                <v-ranking-kmd :num="3" label="舒适度" val="594614"></v-ranking-kmd>
-                <v-ranking-kmd :num="4" label="操控" val="594614"></v-ranking-kmd>
-                <v-ranking-kmd  :num="5" label="油耗" val="594614"></v-ranking-kmd>
             </div>
-            <div class="d2" style="margin-left: 16px">
+            <div class="d1" style="margin-left: 14px">
-                <v-ranking-kmd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-kmd>
+                <v-ranking v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="5+index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking>
-                <v-ranking-kmd :num="7" label="空间" val="594614"></v-ranking-kmd>
-                <v-ranking-kmd :num="8" label="动力" val="594614"></v-ranking-kmd>
-                <v-ranking-kmd :num="9" label="外观" val="594614"></v-ranking-kmd>
-                <v-ranking-kmd :num="10" label="内饰" val="594614"></v-ranking-kmd>
             </div>
-         </div>
+        </div>
     </div>
 </template>
 
 <script>
-import vRankingKmd from "./v-ranking-kmd"
+import { getWebsite } from "@/api/BrandInsight";
 export default {
     name: "kmdED",
-    components: {
+    data() {
-        vRankingKmd
+        return {
-    }
+            load: false,
-}
+            props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+            },
+            d1: [],
+            d2: [],
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || this.brand;
+        this.form.sSeriesName = this.getModel.name;
+        this.getData();
+    },
+    methods: {
+        // 将数组分成几份
+        group(array, subGroupLength) {
+            let index = 0;
+            let newArray = [];
+            while (index < array.length) {
+                newArray.push(array.slice(index, (index += subGroupLength)));
+            }
+            return newArray;
+        },
+        getData() {
+            this.load = true;
+            let obj = Object.assign({}, this.form);
+            getWebsite(obj).then((res) => {
+                let data = res.data;
+                let vals = [];
+                for (let key in data) {
+                    let obj = { label: key, val: data[key] };
+                    vals.push(obj);
+                }
+                let groupedArray = this.group(vals, 5);
+                this.d1 = groupedArray[0];
+                this.d2 = groupedArray[1];
+                this.load = false;
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>

src/views/EventDEC/mediaInterpretationED/index.vue

@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/mediaInterpretationED/index.vue
 -->
 <template>
-    <div class="med-outter">
+    <div class="med-outter" v-loading="load">
         <v-label-div title="媒体解读">
         </v-label-div>
         <div class="med-inner">
@@ -23,21 +23,21 @@
                             <img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
                             <div class="d1">
                                 <span class="ss1">最大层级</span>
-                                <span class="ss2">4</span>
+                                <span class="ss2">{{ countObj.maxcount }}</span>
                             </div>
                         </div>
                         <div class="d-r-item">
                             <img class="m1" src="../../../assets/images/EventInsight/ic_wbfg.png" />
                             <div class="d1">
                                 <span class="ss1">微博覆盖人数</span>
-                                <span class="ss2">58769</span>
+                                <span class="ss2">{{ countObj.vCount }}</span>
                             </div>
                         </div>
                         <div class="d-r-item">
                             <img class="m1" src="../../../assets/images/EventInsight/img_ljgj.png" />
                             <div class="d1">
                                 <span class="ss1">总转发人数</span>
-                                <span class="ss2">45678974</span>
+                                <span class="ss2">{{ countObj.Count }}</span>
                             </div>
                         </div>
                     </div>
@@ -61,60 +61,119 @@
 </template>
 
 <script>
-import { getGraphData } from "@/api/getEchars";
+import { getDiffuseZhuTi } from "@/api/EventdEC";
 import createOpt from "./opt";
 export default {
     name: "mediaInterpretationED",
     data() {
         return {
             opt: {},
-             list: [
+            load: false,
+            sum: "",
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: ""
+            },
+            countObj: {
+                carseriesCount: 0,
+                count: 0,
+                maxcount: 0,
+                vCount: 0,
+            },
+            props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            colors: [
+                "#FFB600",
+                "#886CFF",
+                "#0084FF",
+                "#4CB690",
+                "#58B458",
+                "#6C6C6C",
+                "#F56161",
+                "#FC754C",
+                "#5F5EEC",
+            ],
+            list: [
                 {
                     title: "新浪汽车",
-                    fans: '1106w'
+                    fans: "1106w",
                 },
                 {
                     title: "易车",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
                 {
                     title: "主编说车",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
                 {
                     title: "我是评车人",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
                 {
                     title: "汽车老手",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
-                 {
+                {
                     title: "艾兰汽车",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
                 {
                     title: "我是评车人",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
                 {
                     title: "汽车老手",
-                    fans: '1326w'
+                    fans: "1326w",
                 },
-                 {
+                {
                     title: "艾兰汽车",
-                    fans: '1326w'
+                    fans: "1326w",
-                }
+                },
-            ]
+            ],
         };
     },
     created() {
-        this.drawGraph();
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getData();
     },
     methods: {
-        drawGraph() {
+        getData() {
-            getGraphData().then((res) => {
+            let obj = Object.assign({}, this.form);
-                this.opt = createOpt(res.data);
+            getDiffuseZhuTi(obj).then((res) => {
+                let data = res.data;
+                let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
+                let listIdName = data.listIdName || [];
+                let listPid = data.listPid || [];
+                let nodes = listIdName;
+                let edges = listPid;
+                getCoreDiffuseWeiBo.forEach((ele) => {
+                    let _source = ele._source;
+                    let xgmid = _source.xgmid;
+                    let row = nodes.find((e) => e.id === xgmid);
+                    if (row) {
+                        row.value = _source.volume;
+                    } else {
+                        row.value = 0;
+                    }
+                });
+                nodes.forEach((ele) => {
+                    let colorSet = new Set(this.colors);
+                    let curIndex = Math.round(
+                        Math.random() * (colorSet.size - 1)
+                    );
+                    ele.color = this.colors[curIndex];
+                });
+                let o = { nodes, edges };
+                this.opt = createOpt(o);
+                // this.countObj = Object.assign(this.countObj, data);
             });
         },
     },

src/views/EventDEC/mediaInterpretationED/opt.js

@@ -2,13 +2,23 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 19:32:39
- * @LastEditTime: 2021-10-14 19:40:03
+ * @LastEditTime: 2021-11-11 09:46:12
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/opt.js
  */
 export default function createOpt(data) {
-   return {
+  return {
+    tooltip: {
+      trigger: "item",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
     title: {
       show: false,
       text: 'NPM Dependencies'
@@ -25,17 +35,18 @@ export default function createOpt(data) {
             x: node.x,
             y: node.y,
             id: node.id,
-            name: node.label,
+            name: node.name,
-            symbolSize: node.size,
+            value: node.value,
+            symbolSize: node.symbolSize,
             itemStyle: {
               color: node.color
             }
           };
         }),
-        edges: data.edges.map(function (edge) {
+        links: data.edges.map(function (edge) {
           return {
-            source: edge.sourceID,
+            source: edge.source,
-            target: edge.targetID
+            target: edge.target
           };
         }),
         emphasis: {
@@ -45,8 +56,22 @@ export default function createOpt(data) {
             show: true
           }
         },
+        label: {
+          show: true,
+          color: '#fff',
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        scaleLimit: {
+          min: 0.4,
+          max: 2
+        },
         roam: true,
         lineStyle: {
+          color: 'source',
           width: 0.5,
           curveness: 0.3,
           opacity: 0.7

src/views/EventDEC/mediaInterpretationEc/index.vue

@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/mediaInterpretationEc/index.vue
 -->
 <template>
-    <div class="mec-outter">
+    <div class="mec-outter" v-loading="load" v-highly="0.83">
         <v-label-div title="事件传播历程">
         </v-label-div>
         <div class="mec-inner">
@@ -17,7 +17,7 @@
             </div>
             <div class="dd1">
                 <v-label-div title="词云" :showLine="false" :eStyle="{'border-style': 'none'}">
-                    <v-tab-group :btns="['热门词云', '正面词云', '负面词云']"></v-tab-group>
+                    <v-tab-group :btns="['热门词云', '正面词云', '负面词云']" @change="handlerChange"></v-tab-group>
                 </v-label-div>
                 <div class="dd1-draw">
                     <v-echarts :opt="opt"></v-echarts>
@@ -28,35 +28,103 @@
 </template>
 
 <script>
-import createOpt from "./opt";
+import createWordCloud from "@/utils/gol/bubbleWord";
+import { getEventData } from "@/api/EventdEC";
+import { getHotWord, getPositive, getNegative } from "@/api/EventdEC";
 export default {
     name: "mediaInterpretationEc",
+    props: ["brand", "model"],
     data() {
         return {
-            opt: createOpt(),
+            load: false,
-            config: {
+            opt: {},
-                headerBGC: "#0c203b",
+            type: 0,
-                oddRowBGC: "#173b6d",
+            props: {
-                evenRowBGC: "rgba(69, 149, 244, 0)",
+                id: {
-                columnWidth: [230],
+                    type: String,
-                rowNum: 10,
+                    default: "",
-                header: ["标题", "媒体报道数量"],
+                },
-                data: [
-                    ["为“PLUS”正名！欧尚X7 PLUS越", "33家媒体报道"],
-                    [
-                        "五菱星辰内饰谍照曝光，预计第三季度正式上",
-                        "33家媒体报道",
-                    ],
-                    ["吉利博越X将于8月27日正式亮相 外观设", "33家媒体报道"],
-                    [
-                        "吉利汽车上半年财报出炉：营收、净利双双上",
-                        "21家媒体报道",
-                    ],
-                    ["WEY玛奇朵到店实拍，新车将于8月27日", "21家媒体报道"],
-                ],
             },
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+            },
+            config: {},
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
+        this.getData1();
+    },
+    methods: {
+        handlerChange(n) {
+            this.type = n;
+            this.getData1();
+        },
+        // 获取后台数据
+        getData1() {
+            this.load = true;
+            switch (this.type) {
+                case 0:
+                    getHotWord(this.form).then((res) => {
+                        let data = res.data;
+                        this.opt = createWordCloud(data);
+                        this.load = false;
+                    });
+                    break;
+                case 1:
+                    getPositive(this.form).then((res) => {
+                        let data = res.data;
+                        this.opt = createWordCloud(data);
+                        this.load = false;
+                    });
+                    break;
+                case 2:
+                    getNegative(this.form).then((res) => {
+                        let data = res.data;
+                        this.opt = createWordCloud(data);
+                        this.load = false;
+                    });
+                    break;
+                default:
+                    break;
+            }
+        },
+        //获取后台数据
+        getDdta() {
+            let obj = Object.assign({}, this.form);
+            this.load = true;
+            getEventData(obj).then((res) => {
+                let data = res.data || [];
+                let totalNum = res.totalNum || 0;
+                this.total = totalNum;
+                let arr = [];
+                data.forEach((ele) => {
+                    let a = [ele.events_title, ele.events_number];
+                    arr.push(a);
+                });
+                this.config = {
+                    headerBGC: "#0c203b",
+                    oddRowBGC: "#173b6d",
+                    evenRowBGC: "rgba(69, 149, 244, 0)",
+                    rowNum: 10,
+                    columnWidth: [170, 160],
+                    header: ["标题", "媒体报道数量"],
+                    data: arr,
+                };
+                this.load = false;
+            });
+        },
+        // 分页处理
+        handlerPagnation(page) {
+            this.form.iPageIndex = page;
+            this.getDdta();
+        },
+    },
 };
 </script>
 

src/views/EventDEC/mediaInterpretationEc/opt.js

@@ -1,136 +1,103 @@
 /*
  * @Author: your name
- * @Date: 2021-10-09 13:35:13
+ * @Date: 2021-10-21 11:36:36
- * @LastEditTime: 2021-10-18 20:04:26
+ * @LastEditTime: 2021-10-29 21:30:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ * @FilePath: /data-show/src/utils/gol/bubbleWord.js
  */
-// import * as echarts from "echarts";
+import {compare} from "./dataTool"
-const dataBJ = [
+ // 将后台数据转成数组
-    [1, 55, 9, 56, 0.46, 18, 6, '良'],
+function doWordCloud(data) {
-    [2, 25, 11, 21, 0.65, 34, 9, '优'],
+    let arr1 = [];
-    [3, 56, 7, 63, 0.3, 14, 5, '良'],
+    for (let key in data) {
-    [4, 33, 7, 29, 0.33, 16, 6, '优'],
+        let obj = { name: key, value: data[key] };
-    [5, 42, 24, 44, 0.76, 40, 16, '优'],
+        arr1.push(obj);
-    [6, 82, 58, 90, 1.77, 68, 33, '良'],
+    }
-    [7, 74, 49, 77, 1.46, 48, 27, '良'],
+    return arr1;
-    [8, 78, 55, 80, 1.29, 59, 29, '良'],
+}
-    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
+// 创建词云的对象
-    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
+function bubbleChart(data = [], format = []) {
-    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
+    let [maxValue, temp] = [0, []];
-    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
+    data.forEach((item) => {
-    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
+        temp.push(item[format[1]]);
-    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
+    });
-    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
+    maxValue = Math.max.apply(null, temp);
-    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
+    // 气泡颜色数组
-    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
+    let color = [
-    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
+        "#FFB600",
-    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
+        "#886CFF",
-    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
+        "#0084FF",
-    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
+        "#4CB690",
-    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
+        "#58B458",
-    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
+        "#6C6C6C",
-    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
+        "#F56161",
-    // [25, 42, 27, 43, 1, 53, 22, '优'],
+        "#FC754C",
-    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
+        "#5F5EEC",
-    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
+    ];
-    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
+    // 气泡颜色备份
-    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
+    let bakeColor = [...color];
-    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
+    // 气泡数据
-    // [31, 46, 5, 49, 0.28, 10, 6, '优']
+    let bubbleData = [];
-  ];
+    // 气泡基础大小
-  const dataGZ = [
+    let basicSize = 30;
-    [1, 26, 37, 27, 1.163, 27, 13, '优'],
+    // 节点之间的斥力因子,值越大,气泡间距越大
-    [2, 85, 62, 71, 1.195, 60, 8, '良'],
+    let repulsion = 380;
-    [3, 78, 38, 74, 1.363, 37, 7, '良'],
+    // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
-    [4, 21, 21, 36, 0.634, 40, 9, '优'],
+    if (data.length >= 5 && data.length < 10) {
-    [5, 41, 42, 46, 0.915, 81, 13, '优'],
+        basicSize = 30;
-    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
+        repulsion = 230;
-    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
+    }
-    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
+    if (data.length >= 10 && data.length < 20) {
-    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
+        basicSize = 40;
-    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
+        repulsion = 150;
-    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
+    } else if (data.length >= 20) {
-    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
+        basicSize = 50;
-    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
+        repulsion = 65;
-    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
+    }
-    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
+    // 填充气泡数据数组bubbleData
-    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
+    for (let item of data) {
-    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
+        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
-    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
+        if (!bakeColor.length) bakeColor = [...color];
-    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
+        let colorSet = new Set(bakeColor);
-    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
+        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
-    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
+        let curColor = bakeColor[curIndex];
-    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
+        colorSet.delete(curColor);
-    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
+        bakeColor = [...colorSet];
-    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
+        // 气泡大小设置
-    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
+        let size = (item[format[1]] * basicSize * 2) / maxValue;
-    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
+        if (size < basicSize) size = basicSize;
-    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
+
-    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
+        bubbleData.push({
-    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
+            name: item[format[0]],
-    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
+            value: item[format[1]],
-    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
+            symbolSize: size,
-  ];
+            draggable: true,
-  const dataSH = [
+            itemStyle: {
-    [1, 91, 45, 125, 0.82, 34, 23, '良'],
+                normal: {
-    [2, 65, 27, 78, 0.86, 45, 29, '良'],
+                    color: curColor,
-    [3, 83, 60, 84, 1.09, 73, 27, '良'],
+                    opacity: 0.8,
-    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+                    shadowBlur: 10,
-    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+                    shadowOffsetX: 0,
-    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+                    shadowOffsetY: 0,
-    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+                    shadowColor: "rgba(0,0,0,0.3)",
-    // [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: {
+        bubbleData,
-            top: 16,
+        repulsion,
-            left: 16,
+    };
-            right: 16,
+}
-            bottom: 0,
+
-            containLabel: true,
+// 创建词云图
-        },
+export default function createWordCloud(obj) {
+    let words = doWordCloud(obj);
+    words.sort(compare('value'));
+    let bubble = bubbleChart(words, ['name', 'value']);
+    return {
+        animationEasingUpdate: 'bounceIn',
         tooltip: { 
             backgroundColor: "#08182F",
             color: "#fff",
@@ -140,76 +107,27 @@ export default function createOpt() {
             },
             extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
             formatter: function(param) {
-                let value = param.value;
+                let data = param.data;
-                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+                return `<span>${data.name}</span><br><span>${data.value}</span>`
-            }
-        },
-        xAxis: {
-            show: false,
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
             }
         },
-        yAxis: {
-            show: false,
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
-            },
-            scale: true
-        },
         series: [{
-            name: '北京',
+            type: 'graph',
-            data: dataBJ,
+            layout: 'force',
-            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,
+                show:true,
-                color: "#FFF",
+                color:"#FFF",
-                formatter: function (param) {
+                fontSize:12,
-                    return param.data[param.data.length - 1];
+               
-                },
-            },
-            itemStyle: itemStyle
-        },
-        {
-            name: '广州',
-            data: dataGZ,
-            type: 'scatter',
-            symbolSize: function (data) {
-                return data[2]
             },
-            label: {
+            force: {
-                show: true,
+                gravity:0.2,
-                color: "#FFF", 
+                repulsion: bubble.repulsion,
-                formatter: function (param) {
+                edgeLength: 10
-                    return param.data[param.data.length - 1];
-                },
             },
-            itemStyle: itemStyle
+            // 是否开启鼠标缩放和平移漫游
-        }
+            roam: true,
-        ]
+            data: bubble.bubbleData
+        }]
     }
 }

src/views/EventDEC/pnwcWord/index.vue

@@ -9,7 +9,7 @@
 <template>
     <div class="pw-outter">
         <v-label-div title="正负词云" :showLine="false" :eStyle="{'border-style': 'none'}">
-            <v-tab-group :btns="['热门词云', '负面词云']"></v-tab-group>
+            <v-tab-group :btns="['热门词云', '负面词云']" @change="handlerChange"></v-tab-group>
         </v-label-div>
         <div class="pw-inner">
             <v-echarts :opt="opt"></v-echarts>
@@ -18,15 +18,64 @@
 </template>
 
 <script>
-import createOpt from "./opt"
+import createWordCloud from "@/utils/gol/bubbleWord";
+import { getPositive, getNegative } from "@/api/TailInsightdetails";
 export default {
     name: "pnwcWord",
+    props: ["brand", "model"],
     data() {
         return {
-           opt: createOpt()
+            load: false,
-        }
+            type: 0,
-    }
+            props: {
-}
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+            },
+            opt: {},
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getData1();
+    },
+    methods: {
+        handlerChange(n) {
+            this.type = n;
+            if (n === 0) {
+                this.getData1();
+            } else {
+                this.getData2();
+            }
+        },
+        getData1() {
+            this.load = true;
+            let obj = Object.assign({}, this.form);
+            getPositive(obj).then((res) => {
+                let data = res.data;
+                this.opt = createWordCloud(data);
+                this.load = false;
+            });
+        },
+        getData2() {
+            this.load = true;
+            let obj = Object.assign({}, this.form);
+            getNegative(obj).then((res) => {
+                let data = res.data;
+                this.opt = createWordCloud(data);
+                this.load = false;
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>

src/views/EventDEC/pnwcWord/opt.js

@@ -1,136 +1,103 @@
 /*
  * @Author: your name
- * @Date: 2021-10-09 13:35:13
+ * @Date: 2021-10-21 11:36:36
- * @LastEditTime: 2021-10-18 20:04:26
+ * @LastEditTime: 2021-10-29 21:30:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
+ * @FilePath: /data-show/src/utils/gol/bubbleWord.js
  */
-// import * as echarts from "echarts";
+import {compare} from "./dataTool"
-const dataBJ = [
+ // 将后台数据转成数组
-    [1, 55, 9, 56, 0.46, 18, 6, '良'],
+function doWordCloud(data) {
-    [2, 25, 11, 21, 0.65, 34, 9, '优'],
+    let arr1 = [];
-    [3, 56, 7, 63, 0.3, 14, 5, '良'],
+    for (let key in data) {
-    [4, 33, 7, 29, 0.33, 16, 6, '优'],
+        let obj = { name: key, value: data[key] };
-    [5, 42, 24, 44, 0.76, 40, 16, '优'],
+        arr1.push(obj);
-    [6, 82, 58, 90, 1.77, 68, 33, '良'],
+    }
-    [7, 74, 49, 77, 1.46, 48, 27, '良'],
+    return arr1;
-    [8, 78, 55, 80, 1.29, 59, 29, '良'],
+}
-    [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
+// 创建词云的对象
-    // [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
+function bubbleChart(data = [], format = []) {
-    // [11, 39, 19, 38, 0.57, 31, 15, '优'],
+    let [maxValue, temp] = [0, []];
-    // [12, 41, 11, 40, 0.43, 21, 7, '优'],
+    data.forEach((item) => {
-    // [13, 64, 38, 74, 1.04, 46, 22, '良'],
+        temp.push(item[format[1]]);
-    // [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
+    });
-    // [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
+    maxValue = Math.max.apply(null, temp);
-    // [16, 33, 6, 29, 0.34, 13, 5, '优'],
+    // 气泡颜色数组
-    // [17, 94, 66, 110, 1.54, 62, 31, '良'],
+    let color = [
-    // [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
+        "#FFB600",
-    // [19, 57, 31, 54, 0.96, 32, 14, '良'],
+        "#886CFF",
-    // [20, 22, 8, 17, 0.48, 23, 10, '优'],
+        "#0084FF",
-    // [21, 39, 15, 36, 0.61, 29, 13, '优'],
+        "#4CB690",
-    // [22, 94, 69, 114, 2.08, 73, 39, '良'],
+        "#58B458",
-    // [23, 99, 73, 110, 2.43, 76, 48, '良'],
+        "#6C6C6C",
-    // [24, 31, 12, 30, 0.5, 32, 16, '优'],
+        "#F56161",
-    // [25, 42, 27, 43, 1, 53, 22, '优'],
+        "#FC754C",
-    // [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
+        "#5F5EEC",
-    // [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
+    ];
-    // [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
+    // 气泡颜色备份
-    // [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
+    let bakeColor = [...color];
-    // [30, 52, 24, 60, 1.03, 50, 21, '良'],
+    // 气泡数据
-    // [31, 46, 5, 49, 0.28, 10, 6, '优']
+    let bubbleData = [];
-  ];
+    // 气泡基础大小
-  const dataGZ = [
+    let basicSize = 30;
-    [1, 26, 37, 27, 1.163, 27, 13, '优'],
+    // 节点之间的斥力因子,值越大,气泡间距越大
-    [2, 85, 62, 71, 1.195, 60, 8, '良'],
+    let repulsion = 380;
-    [3, 78, 38, 74, 1.363, 37, 7, '良'],
+    // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
-    [4, 21, 21, 36, 0.634, 40, 9, '优'],
+    if (data.length >= 5 && data.length < 10) {
-    [5, 41, 42, 46, 0.915, 81, 13, '优'],
+        basicSize = 30;
-    // [6, 56, 52, 69, 1.067, 92, 16, '良'],
+        repulsion = 230;
-    // [7, 64, 30, 28, 0.924, 51, 2, '良'],
+    }
-    // [8, 55, 48, 74, 1.236, 75, 26, '良'],
+    if (data.length >= 10 && data.length < 20) {
-    // [9, 76, 85, 113, 1.237, 114, 27, '良'],
+        basicSize = 40;
-    // [10, 91, 81, 104, 1.041, 56, 40, '良'],
+        repulsion = 150;
-    // [11, 84, 39, 60, 0.964, 25, 11, '良'],
+    } else if (data.length >= 20) {
-    // [12, 64, 51, 101, 0.862, 58, 23, '良'],
+        basicSize = 50;
-    // [13, 70, 69, 120, 1.198, 65, 36, '良'],
+        repulsion = 65;
-    // [14, 77, 105, 178, 2.549, 64, 16, '良'],
+    }
-    // [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
+    // 填充气泡数据数组bubbleData
-    // [16, 73, 68, 97, 0.905, 51, 34, '良'],
+    for (let item of data) {
-    // [17, 54, 27, 47, 0.592, 53, 12, '良'],
+        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
-    // [18, 51, 61, 97, 0.811, 65, 19, '良'],
+        if (!bakeColor.length) bakeColor = [...color];
-    // [19, 91, 71, 121, 1.374, 43, 18, '良'],
+        let colorSet = new Set(bakeColor);
-    // [20, 73, 102, 182, 2.787, 44, 19, '良'],
+        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
-    // [21, 73, 50, 76, 0.717, 31, 20, '良'],
+        let curColor = bakeColor[curIndex];
-    // [22, 84, 94, 140, 2.238, 68, 18, '良'],
+        colorSet.delete(curColor);
-    // [23, 93, 77, 104, 1.165, 53, 7, '良'],
+        bakeColor = [...colorSet];
-    // [24, 99, 130, 227, 3.97, 55, 15, '良'],
+        // 气泡大小设置
-    // [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
+        let size = (item[format[1]] * basicSize * 2) / maxValue;
-    // [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
+        if (size < basicSize) size = basicSize;
-    // [27, 81, 48, 62, 1.619, 26, 3, '良'],
+
-    // [28, 56, 48, 68, 1.336, 37, 9, '良'],
+        bubbleData.push({
-    // [29, 82, 92, 174, 3.29, 0, 13, '良'],
+            name: item[format[0]],
-    // [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
+            value: item[format[1]],
-    // [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
+            symbolSize: size,
-  ];
+            draggable: true,
-  const dataSH = [
+            itemStyle: {
-    [1, 91, 45, 125, 0.82, 34, 23, '良'],
+                normal: {
-    [2, 65, 27, 78, 0.86, 45, 29, '良'],
+                    color: curColor,
-    [3, 83, 60, 84, 1.09, 73, 27, '良'],
+                    opacity: 0.8,
-    [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+                    shadowBlur: 10,
-    [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+                    shadowOffsetX: 0,
-    // [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
+                    shadowOffsetY: 0,
-    // [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
+                    shadowColor: "rgba(0,0,0,0.3)",
-    // [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: {
+        bubbleData,
-            top: 16,
+        repulsion,
-            left: 16,
+    };
-            right: 16,
+}
-            bottom: 0,
+
-            containLabel: true,
+// 创建词云图
-        },
+export default function createWordCloud(obj) {
+    let words = doWordCloud(obj);
+    words.sort(compare('value'));
+    let bubble = bubbleChart(words, ['name', 'value']);
+    return {
+        animationEasingUpdate: 'bounceIn',
         tooltip: { 
             backgroundColor: "#08182F",
             color: "#fff",
@@ -140,76 +107,27 @@ export default function createOpt() {
             },
             extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
             formatter: function(param) {
-                let value = param.value;
+                let data = param.data;
-                return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
+                return `<span>${data.name}</span><br><span>${data.value}</span>`
-            }
-        },
-        xAxis: {
-            show: false,
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
             }
         },
-        yAxis: {
-            show: false,
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
-            },
-            scale: true
-        },
         series: [{
-            name: '北京',
+            type: 'graph',
-            data: dataBJ,
+            layout: 'force',
-            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,
+                show:true,
-                color: "#FFF",
+                color:"#FFF",
-                formatter: function (param) {
+                fontSize:12,
-                    return param.data[param.data.length - 1];
+               
-                },
-            },
-            itemStyle: itemStyle
-        },
-        {
-            name: '广州',
-            data: dataGZ,
-            type: 'scatter',
-            symbolSize: function (data) {
-                return data[2]
             },
-            label: {
+            force: {
-                show: true,
+                gravity:0.2,
-                color: "#FFF", 
+                repulsion: bubble.repulsion,
-                formatter: function (param) {
+                edgeLength: 10
-                    return param.data[param.data.length - 1];
-                },
             },
-            itemStyle: itemStyle
+            // 是否开启鼠标缩放和平移漫游
-        }
+            roam: true,
-        ]
+            data: bubble.bubbleData
+        }]
     }
 }

src/views/EventDEC/tailAnalysisED/index.vue

@@ -12,22 +12,61 @@
             <v-label-div title="传播态势" :showLine="false" :eStyle="{'border-style': 'none'}">
             </v-label-div>
             <div class="taed-d1">
-                 <v-echarts :opt="opt"></v-echarts>
+                <v-echarts :opt="opt"></v-echarts>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getSourcetypeTime1 } from "@/api/EventdEC";
+import createOpt from "./opt";
 export default {
     name: "tailAnalysisED",
     data() {
         return {
-            opt: createOpt()
+            load: false,
-        }
+            opt: {},
-    }
+            props: {
-}
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+            },
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+
+        this.getDdta();
+    },
+    methods: {
+        getDdta() {
+            let obj = Object.assign({}, this.form);
+            this.load = true;
+            getSourcetypeTime1(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+                this.load = false;
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>

src/views/EventDEC/tailAnalysisED/opt.js

@@ -1,18 +1,60 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:11:24
- * @LastEditTime: 2021-10-19 19:34:14
+ * @LastEditTime: 2021-11-01 14:25:41
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
  */
-export default function createOpt() {
+import * as echarts from "echarts";
+// import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['#546fc5', '#91cb74', '#f9c857', '#ed6565', '#72bfde', '#3aa272', '#fb8351'];
+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: {
+                        normal: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0, color: colors[j] // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#000' // 100% 处的颜色
+                            }]
+                            ),
+                        }
+                    },
+                    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: 16,
+            left: '3%',
-            right: 26,
+            right: '2%',
-            bottom: 16,
+            bottom: '3%',
-            top: 52,
+            top: '15%',
             containLabel: true
         },
         tooltip: {
@@ -45,7 +87,13 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -62,80 +110,6 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
+        series: data
-            {
-                name: '新闻',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
-            },
-            {
-                name: '微信',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
-            },
-            {
-                name: '论坛',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
-            },
-            {
-                name: '微博',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
-            },
-            {
-                name: 'APP',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-            {
-                name: '其他',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
-            },
-
-        ]
     }
 }

src/views/EventDEC/tonalCommunicationPosture/index.vue

@@ -23,11 +23,19 @@
 
 <script>
 import createOpt from "./opt"
+import { getTwoTime } from "@/api/comm";
+import { getAffectionsTime } from "@/api/EventdEC";
 export default {
     name: "tonalCommunicationPosture",
     data() {
         return {
-            opt: createOpt(),
+            props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            opt: {},
             selVal: 1,
             selDatas: [
                 {
@@ -47,11 +55,55 @@ export default {
                     label: "自定义",
                 },
             ],
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: ""
+            },
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.brand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
+    },
     methods: {
-       handleChange() {}
+        // 获取选择时间的数据
-    }
+        getSelect() {
+            getTwoTime().then((res) => {
+                this.selDatas = res.data;
+                if (!this.form.sTimeType) {
+                    this.form.sTimeType = this.selDatas[0].key;
+                    this.setCtime2(this.form);
+                }
+            });
+        },
+        getDdta() {
+            let obj = Object.assign({},this.form);
+            this.load = true;
+            getAffectionsTime(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+                this.load = false;
+            });
+        },
+        // 选择时间
+        handleChange() {
+            this.setCtime2(this.form);
+            if (this.form.sTimeType != 4) {
+                this.reload();
+            }
+        },
+    },
 };
 </script>
 

src/views/EventDEC/tonalCommunicationPosture/opt.js

@@ -1,20 +1,74 @@
+
 /*
  * @Author: your name
- * @Date: 2021-10-12 10:11:24
+ * @Date: 2021-10-09 11:38:06
- * @LastEditTime: 2021-10-19 19:43:13
+ * @LastEditTime: 2021-11-01 19:15:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ * @FilePath: /data-show/src/views/Index/barometer/opt.js
  */
-export default function createOpt() {
+import * as echarts from "echarts";
+import {bigNumberTransform} from "@/utils/gol/dataTool"
+let colors = ['#3172ca', '#459c97', '#ab8921']
+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',
+                    itemStyle: {
+                        color: colors[j]
+                    },
+                    areaStyle: {
+                        normal: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0, color: colors[j] // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#000' // 100% 处的颜色
+                            }]
+                            ),
+                        }
+                    },
+                    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 = []) {
+    const data = createData(ds);
     return {
         grid: {
-            left: 16,
+            left: 10,
-            right: 26,
+            right: 10,
-            bottom: 16,
+            bottom: 10,
-            top: 52,
+            top: 46,
             containLabel: true
         },
+        // dataZoom: [{
+        //     type: 'inside', //1平移 缩放
+        //     throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
+        //     minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
+        //     start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
+        //     end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
+        //     zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
+        // }],
         tooltip: {
             trigger: "axis",
             backgroundColor: "#08182F",
@@ -28,14 +82,16 @@ export default function createOpt() {
         legend: {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize:10
             },
-            y: 12,
+            y: 10,
-            x: 16
+            x: 10,
+            itemWidth: 10,
+            itemHeight: 10
         },
         xAxis: {
             type: 'category',
-            boundaryGap: false,
             axisTick: {
                 show: false,
             },
@@ -45,7 +101,13 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -55,6 +117,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -62,43 +130,6 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
+        series: data
-            {
-                name: '正面',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
-            },
-            {
-                name: '中性',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
-            },
-            {
-                name: '负面',
-                type: 'line',
-                symbol: 'none',
-                areaStyle: {
-                    opacity: 0.4
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
-            }
-        ]
     }
 }

src/views/EventDEC/wbUserEDE/index.vue

@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventDEC/wbUserEDE/index.vue
 -->
 <template>
-    <div class="wue-outter">
+    <div class="wue-outter" v-loading="load">
         <div class="d1">
             <v-label-div title="微博用户画像">
                 <v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
@@ -30,11 +30,9 @@
                 <div class="dd1">
                     <v-echarts :opt="opt"></v-echarts>
                 </div>
-                <div class="dd2">
+                <vue-scroll>
-                    <v-label-ctx label="正面" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
+                    <v-label-ctx v-for="(item, index) in labelArr" :key="index" :label="item.key" :cont="item.value" :percentage="((item.value / total) * 100).toFixed(2) + '%'" :color="colors[index]" :eStyle="{ height: '8.54rem' }"></v-label-ctx>
-                    <v-label-ctx label="负面" cont="2200" percentage="25%" color="#a58115" :eStyle="{ height: '137px' }"></v-label-ctx>
+                </vue-scroll>
-                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
-                </div>
             </div>
         </div>
     </div>
@@ -42,13 +40,58 @@
 
 <script>
 import createOpt from "./opt";
+import { getAffections } from "@/api/EventdEC";
 export default {
     name: "wbUserEDE",
     data() {
         return {
+            load: false,
             opt: createOpt(),
+            form: {
+                sBrand: "",
+                token: "",
+                sSeriesName: "",
+            },
+            props: {
+                id: {
+                    type: String,
+                    default: "",
+                },
+            },
+            labelArr: [],
+            total: 0,
+            colors: ["#3373CC", "#54BF93", "#CC9D12"],
         };
     },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.form.sSeriesName = this.getModel.name;
+        this.getDdta();
+    },
+    methods: {
+        getDdta() {
+            this.load = true;
+            let obj = Object.assign({}, this.form);
+            getAffections(obj).then((res) => {
+                let data = res.data || {};
+                let arr = [];
+                let total = 0;
+                for (let key in data) {
+                    let o = {
+                        key: key,
+                        value: data[key],
+                    };
+                    total += data[key] * 1;
+                    arr.push(o);
+                }
+                this.labelArr = arr;
+                this.total = total;
+                this.opt = createOpt(arr, this.colors);
+                this.load = false;
+            });
+        },
+    },
 };
 </script>
 

src/views/EventDEC/wbUserEDE/opt.js

@@ -1,114 +1,80 @@
 /*
  * @Author: your name
- * @Date: 2021-10-12 15:14:58
+ * @Date: 2021-10-09 09:49:50
- * @LastEditTime: 2021-10-14 10:43:47
+ * @LastEditTime: 2021-10-28 13:07:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
+ * @FilePath: /data-show/src/views/Index/userPortrait/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt() {
+// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
-    return {
+function createData(ds = [], colors) {
-        series: [
+  let arr = [];
-            {
+  ds.map((ele, index) => {
-              name: 'Access From0',
+    let obj = {
-              type: 'pie',
+      value: ele.value,
-              radius: ['63%', '77%'],
+      name: ele.key,
-              avoidLabelOverlap: false,
+      itemStyle: {
-              label: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                show: false,
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                position: 'center',
+          //给第一个设置0，第四个设置1，就是垂直渐变
-                fontSize: '40',
+          offset: 0,
-                color: "#ffff",
+          color: 'black'
-            },
+        }, {
-              emphasis: {
+          offset: 1,
-                label: {
+          color: colors[index]
-                  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: ['80%', '84%'],
-                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'
-                 }])} },
-                ],
-  
-              }
-          ]
     }
+    arr.push(obj)
+  })
+  return arr;
+}
+export default function createOpt(ds = [], color = []) {
+  const data = createData(ds, color);
+  return {
+    series: [
+      {
+        name: 'Access From0',
+        type: 'pie',
+        radius: ['65%', '80%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+          lineHeight: 30
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '16',
+            color: "#ffff",
+            fontWeight: 'bold',
+            formatter: function (p) {
+              return `${p.data.name}\n${p.percent}%\n${p.data.value}`
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      },
+      {
+        name: 'Access From1',
+        type: 'pie',
+        radius: ['86%', '94%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        center: ['50%', '50%'],//边框位置
+        data: data
+      }
+    ]
+  }
 }