From 2f53e5754357402859122584325ddd0a4e3105a7 Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Fri, 21 Jan 2022 17:27:38 +0800
Subject: [PATCH] zx

---
 src/api/ThemeAnalizeDec/index.js              |  38 ++++
 src/components/v-label-table/index.vue        |  36 +--
 src/views/EventDEC/esprocess/index.vue        |   6 +-
 .../EventDEC/mediaInterpretationED/index.vue  |   1 -
 src/views/ThemeBoard/BigvAnalize/index.vue    |  72 +++++-
 src/views/ThemeBoard/BigvAnalize/opt.js       |  80 +++++++
 src/views/ThemeBoard/BloggerArea/index.vue    |  49 +++-
 src/views/ThemeBoard/BloggerArea/opt1.js      |  83 +++++++
 src/views/ThemeBoard/BloggerArea/opt2.js      |  94 ++++++++
 .../ThemeBoard/CoreTransformUser/index.vue    | 172 +++++++-------
 src/views/ThemeBoard/CoreTransformUser/opt.js |  80 +++++++
 src/views/ThemeBoard/EventTransform/index.vue | 214 +++++++++++++++++-
 src/views/ThemeBoard/ThemeSource/index.vue    |   2 +-
 src/views/ThemeBoard/ThemeSource/opt.js       |   4 +-
 .../ThemeBoard/TransformMethod/index.vue      |  84 ++++++-
 src/views/ThemeBoard/TransformMethod/opt.js   |  82 +++++++
 src/views/ThemeBoard/WeiboAnalize/index.vue   |   2 +-
 17 files changed, 972 insertions(+), 127 deletions(-)
 create mode 100644 src/views/ThemeBoard/BigvAnalize/opt.js
 create mode 100644 src/views/ThemeBoard/BloggerArea/opt1.js
 create mode 100644 src/views/ThemeBoard/BloggerArea/opt2.js
 create mode 100644 src/views/ThemeBoard/CoreTransformUser/opt.js
 create mode 100644 src/views/ThemeBoard/TransformMethod/opt.js

diff --git a/src/api/ThemeAnalizeDec/index.js b/src/api/ThemeAnalizeDec/index.js
index b3c9678..b80bd3a 100644
--- a/src/api/ThemeAnalizeDec/index.js
+++ b/src/api/ThemeAnalizeDec/index.js
@@ -13,6 +13,19 @@ export function getSummarizeMerge(params) {
     })
 }
 
+// 主题分析-事件传播历程
+export function getList(params) {
+    let obj =  Object.assign({action: 'getList', sType: ''}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
 // 主题分析-总声量趋势
 export function getVolumeTime(params) {
     let obj =  Object.assign({action: 'getVolumeTime', sType: ''}, params)
@@ -169,3 +182,28 @@ export function getVAnalyze(params) {
     })
 }
 
+// 主题分析-核心传播网民
+export function getDiffuseZhuTi(params) {
+    let obj =  Object.assign({action: 'getDiffuseZhuTi', sType: ''}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 主题分析-博主区域分布
+export function getRegionWeiBo(params) {
+    let obj =  Object.assign({action: 'getRegionWeiBo', sType: ''}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
diff --git a/src/components/v-label-table/index.vue b/src/components/v-label-table/index.vue
index b40f974..69babaf 100644
--- a/src/components/v-label-table/index.vue
+++ b/src/components/v-label-table/index.vue
@@ -12,21 +12,29 @@
       <span class="s1" :style="{background: color}"></span>
       <span class="s2">{{label}}</span>
     </div>
+    <div class="d3">
+      <span class="s1">粉丝数>1000W</span>
+      <span class="s2">{{cont[0]}}</span>
+    </div>
     <div class="d2">
-      <span class="s1">>1千万粉</span>
-      <span class="s2">{{cont}}</span>
+      <span class="s1">粉丝数>500W</span>
+      <span class="s2">{{cont[1]}}</span>
     </div>
     <div class="d2">
-      <span class="s1">>5百万粉</span>
-      <span class="s2">{{cont}}</span>
+      <span class="s1">粉丝数>100W</span>
+      <span class="s2">{{cont[2]}}</span>
     </div>
     <div class="d2">
-      <span class="s1">>1百万粉</span>
-      <span class="s2">{{cont}}</span>
+      <span class="s1">粉丝数>50W</span>
+      <span class="s2">{{cont[3]}}</span>
     </div>
-    <div class="d3">
-      <span class="s1">数量</span>
-      <span class="s2">{{percentage}}</span>
+    <div class="d2">
+      <span class="s1">粉丝数>20W</span>
+      <span class="s2">{{cont[4]}}</span>
+    </div>
+    <div class="d2">
+      <span class="s1">粉丝数>10W</span>
+      <span class="s2">{{cont[5]}}</span>
     </div>
   </div>
 </template>
@@ -44,8 +52,8 @@ export default {
         default: "数量"
       },
       cont: {
-          type: [String, Number],
-          default: 0
+          type: Array,
+          default: []
       },
       percentage: {
           type: String,
@@ -75,7 +83,7 @@ export default {
   border-bottom: 1px solid #0F2A4D;
   .d1 {
     display: block;
-    width: 12%;
+    width: 14%;
     .s1 {
       display: block;
       width: 66%;
@@ -90,7 +98,7 @@ export default {
     }
   }
   .d2 {
-    width: 13%;
+    width: 12%;
     .s1 {
       display: block;
       font-size: 12px;
@@ -104,7 +112,7 @@ export default {
     }
   }
   .d3 {
-    width: 12%;
+    width: 14%;
     .s1 {
       display: block;
       font-size: 12px;
diff --git a/src/views/EventDEC/esprocess/index.vue b/src/views/EventDEC/esprocess/index.vue
index b72239b..e9fcc94 100644
--- a/src/views/EventDEC/esprocess/index.vue
+++ b/src/views/EventDEC/esprocess/index.vue
@@ -230,8 +230,8 @@ export default {
     }
 }
 /deep/ .__view {
-    display: flex !important;
-    justify-content: flex-start !important;
-    align-items: center !important;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/EventDEC/mediaInterpretationED/index.vue b/src/views/EventDEC/mediaInterpretationED/index.vue
index a6c39bf..cdd2cbf 100644
--- a/src/views/EventDEC/mediaInterpretationED/index.vue
+++ b/src/views/EventDEC/mediaInterpretationED/index.vue
@@ -116,7 +116,6 @@ export default {
             getDiffuseZhuTi(obj).then((res) => {
                 this.load = true;
                 let data = res.data;
-                console.log(data)
                 this.countObj.sum = data.sum;
                 this.countObj.volume = data.volume;
                 this.countObj.total = data.total;
diff --git a/src/views/ThemeBoard/BigvAnalize/index.vue b/src/views/ThemeBoard/BigvAnalize/index.vue
index 2b98fd2..f42db05 100644
--- a/src/views/ThemeBoard/BigvAnalize/index.vue
+++ b/src/views/ThemeBoard/BigvAnalize/index.vue
@@ -1,18 +1,17 @@
 <template>
-  <div class="bv-container">
+  <div class="bv-container" v-loading="load">
       <v-label-div title="大V分析" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
       <div class="bv-inner">
           <div class="bv-d1">
-
+              <v-echarts :opt="opt"></v-echarts>
           </div>
           <div class="bv-d2">
               <vue-scroll>
-                <v-label-table v-for="(item,index) in labelData" 
-                :key="index" :label="item.key" 
+                <v-label-table v-for="(item,index) in tableList"
+                :key="index" :label="item.key"
                 :cont="item.value" 
-                :percentage="(item.value/total*100).toFixed(2) +'%'" 
-                :color="colors[index]" contLabel="数量" 
-                :eStyle="{ height: '5rem' }">
+                :color="colors[index-1]"
+                :eStyle="{ height: '6.6rem' }">
                 </v-label-table>
             </vue-scroll>
           </div>
@@ -21,15 +20,19 @@
 </template>
 
 <script>
+import {getVAnalyze} from "@/api/ThemeAnalizeDec"
+import createOpt from "./opt"
 export default {
     name: "BigvAnalize",
     data() {
         return {
             opt: {},
+            load: false,
             labelData: [
                 {key: '微博', value: 1250},
                 {key: '微信', value: 2400}
             ],
+            tableList: [],
             total: 14000,
             colors: [
                 "#54BF93",
@@ -54,23 +57,70 @@ export default {
                 "#90ed7d",
             ],
         }
+    },
+    created() {
+        this.form = this.$route.query;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getVAnalyze(obj).then(res => {
+                let data = res.data;
+                let tableData = data.getVAnalyze;
+                //-表格-//
+                let tableList = [];
+                for(let i = 1; i<tableData.Columns.length;i++){
+                    let val = [];
+                    let isEmpty = true;
+                    tableData.Rows.forEach(ele => {
+                        val.push(ele[i]);
+                        if(ele[i] != 0) {
+                            isEmpty = false
+                        }
+                    })
+                    let obj = {
+                        key: tableData.Columns[i],
+                        value: val,
+                        isEmpty: isEmpty
+                    }
+                    tableList.push(obj);
+                }
+                this.tableList = tableList
+                //-图形-//
+                let pieData = data.pie;
+                let labelData = [];
+                for(let key in pieData) {
+                    let obj = {
+                        key: key,
+                        value: pieData[key]
+                    };
+                    labelData.push(obj);
+                };
+                this.opt = createOpt(labelData, this.colors);
+                this.load = false
+            })
+        }
     }
 }
 </script>
 
 <style lang="less">
 .bv-container {
-    width: 100%;
+    width: 936px;
+    height: 460px;
     .bv-inner {
         display: flex;
         justify-content: flex-start;
+        width: 100%;
+        height: 100%;
         .bv-d1 {
-            width: 430px;
+            width: 370px;
             height: calc(100% - 48px);
         }
         .bv-d2 {
-            width: 430px;
-            height: auto;
+            width: 490px;
+            height: calc(100% - 48px);
             margin-left: 16px;
         }
     }
diff --git a/src/views/ThemeBoard/BigvAnalize/opt.js b/src/views/ThemeBoard/BigvAnalize/opt.js
new file mode 100644
index 0000000..cc5d4ae
--- /dev/null
+++ b/src/views/ThemeBoard/BigvAnalize/opt.js
@@ -0,0 +1,80 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-29 19:20:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+function createData(ds=[], colors=[]) {
+   let arr = [];
+   for(let i = 0; i < ds.length; i++) {
+      let ele = ds[i];
+      if(true) {
+         let obj = { value: ele.value*1, name: ele.key, itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+              //给第一个设置0，第四个设置1，就是垂直渐变
+              offset: 0,
+              color: 'black'
+            }, {
+              offset: 1,
+              color: colors[i]
+            }])
+          }};
+         arr.push(obj)
+      }
+   }
+   return arr;
+}
+export default function createOpt(ds = [], colors= []) {
+   const data = createData(ds, colors) 
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['62%', '74%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                lineHeight: 30
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  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: ['79%', '86%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: data,
+  
+              }
+          ]
+    }
+}
diff --git a/src/views/ThemeBoard/BloggerArea/index.vue b/src/views/ThemeBoard/BloggerArea/index.vue
index 9b0ff28..8e1b6e3 100644
--- a/src/views/ThemeBoard/BloggerArea/index.vue
+++ b/src/views/ThemeBoard/BloggerArea/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ba-container">
+  <div class="ba-container" v-loading="load">
       <v-label-div title="博主区域分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
       <div class="ba-inner">
           <div class="ba-d1">
@@ -13,20 +13,65 @@
 </template>
 
 <script>
+import {getRegionWeiBo} from "@/api/ThemeAnalizeDec"
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
 export default {
     name: "BloggerArea",
     data() {
         return {
+            load: false,
+            form: {
+                token: ''
+            },
             opt1: {},
             opt2: {}
         }
+    },
+    created() {
+        this.form = this.$route.query;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getRegionWeiBo(obj).then(res => {
+                let data = res.data || {};
+                let arr = this.toArr(data);
+                let dx = []; //省份
+                let ds = []; //数据
+                arr.forEach((ele) => {
+                ele.name = ele.name.replace('省','')
+                let value = ele.value;
+                dx.push(ele.name);
+                ds.push(value);
+                });
+                let dm = arr //省份和数据
+                this.opt1 = createOptD1(dx, ds);
+                this.opt2 = createOptD2(dm);
+                this.load = false;
+            })
+        },
+        // 将对象变成数组
+        toArr(obj) {
+        let arr = [];
+        for (let key in obj) {
+            let o = {
+            name: key,
+            value: obj[key] * 1,
+            };
+            arr.push(o);
+        }
+        return arr;
+        },
     }
 }
 </script>
 
 <style lang="less">
 .ba-container {
-    width: 100%;
+    width: 936px;
+    height: 460px;
     .ba-inner {
         display: flex;
         justify-content: flex-start;
diff --git a/src/views/ThemeBoard/BloggerArea/opt1.js b/src/views/ThemeBoard/BloggerArea/opt1.js
new file mode 100644
index 0000000..3fd7054
--- /dev/null
+++ b/src/views/ThemeBoard/BloggerArea/opt1.js
@@ -0,0 +1,83 @@
+
+
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 12:38:34
+ * @LastEditTime: 2021-10-14 11:48:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOptD1(dx=[],ds=[]) {
+    return {
+        grid: {
+            left: 16,
+            right: '5%',
+            bottom: 10,
+            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",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: dx,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            inverse: true
+        },
+        series: [
+            {
+                name: '2011',
+                type: 'bar',
+                barWidth: 20,
+                data: ds,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                    offset: 0,
+                    color: '#010B19'
+                }, {
+                    offset: 1,
+                    color: '#2f68b4'
+                }]),
+            }
+        ]
+    }
+}
diff --git a/src/views/ThemeBoard/BloggerArea/opt2.js b/src/views/ThemeBoard/BloggerArea/opt2.js
new file mode 100644
index 0000000..c961002
--- /dev/null
+++ b/src/views/ThemeBoard/BloggerArea/opt2.js
@@ -0,0 +1,94 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-14 11:53:16
+ * @LastEditTime: 2021-11-04 17:17:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
+ */
+
+export default function createOptD2(dm) {
+    return {
+        tooltip: {
+            trigger: "item",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        // geo: {
+        //     show: true,
+        //     map: 'china',
+        //     roam: false,//地图设置不可拖拽，固定的
+        //     itemStyle: {
+        //         normal: {
+        //             borderWidth: 0,
+        //             shadowColor: 'rgba(0,54,255, 1)',
+        //             shadowBlur: 100
+        //         }
+        //     }
+        // },
+        visualMap: {
+            type: 'continuous', 
+            show: false,
+            min: 0,
+            max: 2000,
+            text: ['高', '低'],
+            orient: 'horizontal',
+            itemWidth: 15,
+            itemHeight: 200,
+            right: 0,
+            bottom: 30,
+            inRange: {
+                color: ['#0393d2', '#75ddff']
+            },
+            textStyle: {
+                color: 'white'
+            }
+        },
+        series: [
+            {
+                name: "微博区域",
+                type: "map",
+                mapType: "china",
+                roam: false,
+                zoom: 1,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
+                left: 16,
+                top: 20,
+                right: 10,
+                bottom: 10,
+                selectedMode:'multiple',
+                colorBy: 'data',
+                itemStyle: {
+                    areaColor: '#001f5b',//地图区域背景颜色
+                    borderColor: '#005cf9',//地图边界颜色
+                    shadowColor: '#005cf9',
+                    emphasis: {
+                        areaColor: '#3066ba',//鼠标滑过区域颜色
+                        label: {
+                            color: '#fff'
+                        }
+                    }
+                },
+                label: {
+                    normal: {
+                        show: false
+                    },
+                },
+                
+                // select: {
+                //     label: {
+                //         show: false
+                //     },
+                //     itemStyle: {
+                //         areaColor: '#3edffe'
+                //     }
+                // },
+                data: dm
+            }
+        ]
+    }
+}
diff --git a/src/views/ThemeBoard/CoreTransformUser/index.vue b/src/views/ThemeBoard/CoreTransformUser/index.vue
index 7eb82cf..096f799 100644
--- a/src/views/ThemeBoard/CoreTransformUser/index.vue
+++ b/src/views/ThemeBoard/CoreTransformUser/index.vue
@@ -1,100 +1,108 @@
 <template>
-  <div class="ctu-container">
-      <v-label-div title="核心传播网民" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
-      <div class="d1-inner">
-            <div class="pv-item" v-for="(item,index) in list" :key="index">
-                <div class="dm">
-                    <img class="mm1" :src="item._source.profileimgurl" width="100%" height="100%">
-                </div>
-                <div class="d-f">
-                    <div class="d1">{{item._source.user_author}}</div>
-                    <div class="d2">粉丝数：<span class="d2-s1">{{bigNumberTransform(item._source.weibofans)}}</span></div>
-                </div>
-            </div>
+  <div class="ctu-outter" v-loading="load">
+      <v-label-div title="情感分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+      <div class="ctu-inner">
+        <div class="ctu-d1">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+        <div class="ctu-d2">
+            <vue-scroll>
+                <v-label-ctx v-for="(item,index) in labelData" 
+                :key="index" :label="item.key" 
+                :cont="item.value" 
+                :percentage="(item.value/total*100).toFixed(2) +'%'" 
+                :color="colors[index]" contLabel="数量" 
+                :eStyle="{ height: '7.95rem' }">
+                </v-label-ctx>
+            </vue-scroll>
+        </div>
       </div>
   </div>
 </template>
 
 <script>
-import {bigNumberTransform} from "@/utils/gol/dataTool"
+import {getVAnalyze} from "@/api/ThemeAnalizeDec"
+import createOpt from "./opt"
 export default {
-    name: "CoreTransformUser",
+    name: "SourceDivide",
     data() {
         return {
-            bigNumberTransform: bigNumberTransform,
-            list: [
-                { _source: 
-                    {profileimgurl: '', user_author: '1111', weibofans: '1223'}
-                },
-                { _source: 
-                    {profileimgurl: '', user_author: '2222', weibofans: '321214'}
-                },
-            ]
+            load: false,
+            opt: {},
+            labelData: [],
+            total: 0,
+            colors: [
+                '#546fc5', 
+                '#91cb74', 
+                '#f9c857', 
+                '#ed6565', 
+                '#72bfde', 
+                '#3aa272', 
+                '#fb8351',
+                'rgb(135,71,165)',
+                "#54BF93",
+                "#3373CC",
+                "#CC9D12",
+                "#f15c80",
+                "#e4d354",
+                "#8085e8",
+                "#8d4653",
+                "#91e8e1",
+                "#f7a35c",
+            ],
+            form: {
+                token: ''
+            }
+        }
+    },
+    created() {
+        this.form = this.$route.query;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.form);
+            this.load = true;
+            getVAnalyze(obj).then(res => {
+                let data = res.data.getAffectionsWeiBo;
+                let labelData = [];
+                let totalVal = 0;
+                for(let key in data) {
+                    let obj = {
+                        key: key,
+                        value: data[key]
+                    };
+                    totalVal = totalVal + data[key] * 1.0;
+                    labelData.push(obj);
+                };
+                this.labelData = labelData;
+                this.total = totalVal
+                this.opt = createOpt(labelData, this.colors);
+                this.load = false
+            })
         }
     }
 }
 </script>
 
 <style lang="less">
-.ctu-container {
-    width: 100%;
-    .d1-inner {
-                width: 100%;
-                height: calc(100% - 48px);
-                margin-left: 16px;
-                display: flex;
-                justify-content: flex-start;
-                flex-wrap: wrap;
-                .pv-item {
-                    width: 285px;
-                    height: 64px;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-                    position: relative;
-                    margin-right: 24px;
-                    margin-top: 12px;
-                    .dm {
-                        position: absolute;
-                        width: 68px;
-                        height: 68px;
-                        border-radius: 68px;
-                        border: 1px solid #ccc;
-                        left: 0px;
-                        top: 0px;
-                        background-color: #fff;
-                        z-index: 10;
-                        .mm1 {
-                            width: 100%;
-                            height: 100%;
-                            border-radius: 74px;
-                        }
-                    }
-                    .d-f {
-                        position: absolute;
-                        width: 249px;
-                        height: 64px;
-                        left: 36px;
-                        padding-left: 65px;
-                        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
-                        .d1 {
-                            font-size: 14px;
-                            color: #fff;
-                            font-weight: 500;
-                            margin-top: 10px;
-                            height: 20px;
-                        }
-                        .d2 {
-                            color: #70869a;
-                            font-size: 12px;
-                            .d2-s1 {
-                                font-size: 12px;
-                                font-family: Bebas;
-                                color: #f49847;
-                            }
-                        }
-                    }
-                }
+.ctu-outter {
+    width: 936px;
+    height: 460px;
+    .ctu-inner {
+        display: flex;
+        justify-content: flex-start;
+        width: 100%;
+        height: 100%;
+        .ctu-d1 {
+            width: 430px;
+            height: calc(100% - 48px);
+        }
+        .ctu-d2 {
+            width: 460px;
+            height: calc(100% - 48px);
+            margin-left: 16px;
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ThemeBoard/CoreTransformUser/opt.js b/src/views/ThemeBoard/CoreTransformUser/opt.js
new file mode 100644
index 0000000..e04ccd0
--- /dev/null
+++ b/src/views/ThemeBoard/CoreTransformUser/opt.js
@@ -0,0 +1,80 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 14:33:51
+ * @LastEditTime: 2021-10-29 19:20:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
+ */
+import * as echarts from "echarts";
+function createData(ds=[], colors=[]) {
+   let arr = [];
+   for(let i = 0; i < ds.length; i++) {
+      let ele = ds[i];
+      if(ele.value*1 > 0) {
+         let obj = { value: ele.value*1, name: ele.key, itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+              //给第一个设置0，第四个设置1，就是垂直渐变
+              offset: 0,
+              color: 'black'
+            }, {
+              offset: 1,
+              color: colors[i]
+            }])
+          }};
+         arr.push(obj)
+      }
+   }
+   return arr;
+}
+export default function createOpt(ds = [], colors= []) {
+   const data = createData(ds, colors) 
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['62%', '74%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                lineHeight: 30
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  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: ['79%', '86%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                  },
+                labelLine: {
+                  show: false
+                },
+                center: ['50%', '50%'],//边框位置
+                data: data,
+  
+              }
+          ]
+    }
+}
diff --git a/src/views/ThemeBoard/EventTransform/index.vue b/src/views/ThemeBoard/EventTransform/index.vue
index 6e15ca6..b404138 100644
--- a/src/views/ThemeBoard/EventTransform/index.vue
+++ b/src/views/ThemeBoard/EventTransform/index.vue
@@ -1,21 +1,229 @@
 <template>
-  <div class="container1">
+  <div class="et-container1" v-loading="load">
       <v-label-div title="事件传播历程"></v-label-div>
+      <div class="et-ts">
+            <div class="et-ts-d1" @click="goL"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
+            <div class="et-ts-d2">
+                <!-- <vue-scroll ref="vs"> -->
+                    <div class="dd1-label">
+                        <div class="d1x">新车上市</div>
+                        <div class="d2">状态：事件发生</div>
+                        <div class="d3">2021-06-01 11:26</div>
+                    </div>
+                    <template v-for="(item,index) in list">
+                        <div class="dd1-item" :key="index">
+                            <img class="m1" :src="index % 2 === 0 ? m2 : m1" :style="index % 2 === 0 ? 'margin-top: 8.2rem' : ''" />
+                            <div class="dd1-fen"></div>
+                            <div class="dt-d1" :style="index % 2 === 0 ? 'margin-top: 8.6rem' : ''">
+                                <div class="d1" :style="index % 2 === 0 ? 'color: #3373CC' : 'color:#CC7733'" @click="openUrl(item._source.url)">{{item._source.title|doStr(30)}}</div>
+                                <div class="d2">{{item._source.source}}</div>
+                                <div class="d3">{{item._source.sourcetime}}</div>
+                            </div>
+                        </div>
+                    </template>
+                <!-- </vue-scroll> -->
+            </div>
+            <div class="et-ts-d1" @click="goR"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
+        </div>
   </div>
 </template>
 
 <script>
+import {getList} from "@/api/ThemeAnalizeDec"
 export default {
-    name: "EventTransform"
+    name: "EventTransform",
+    data() {
+        return {
+            load: false,
+            form: {
+                token: '',
+                sTimeType: '',
+                sQuDao: '',
+                sQingGan: '',
+                sTitle: '',
+                iPageIndex: 1, //
+                iPageSize: 20, //
+                sType: 'ZhuTiFenXiBl',
+                sGuid: '',
+                website: '',
+                iTimeType: 0 //
+            },
+            list: [],
+            x: 0,
+            m1: require("../../../assets/images/EventInsight/img_ct.png"),
+            m2: require("../../../assets/images/EventInsight/img_lt.png"),
+        }
+    },
+    created() {
+        this.form = this.$route.query;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let o = {
+                iPageIndex: 1, 
+                iPageSize: 20, 
+                iTimeType: 0 
+            };
+            let obj = Object.assign({}, this.form, o);
+            getList(obj).then(res => {
+                this.load = true;
+                let data = res.data || [];
+                this.list = data;
+                this.load = false;
+            })
+        },
+        goback() {
+            this.$router.go(-1);
+        },
+        openUrl(url) {
+            window.open(url);
+        },
+        goL() {
+            const {h} = this.$refs.vs.getScrollProcess();
+            if(h === 0) return;
+            const { scrollLeft } = this.$refs.vs.getPosition();
+            this.x = scrollLeft;
+            this.x -= 150;
+            this.$refs.vs.scrollTo(
+                {
+                    x: this.x,
+                },
+                300
+            );
+        },
+        goR() {
+            const {h} = this.$refs.vs.getScrollProcess();
+            if(h === 1) return;
+            const { scrollLeft } = this.$refs.vs.getPosition();
+            this.x = scrollLeft;
+            this.x += 150;
+            this.$refs.vs.scrollTo(
+                {
+                    x: this.x,
+                },
+                300
+            );
+        }
+    }
 }
 </script>
 
 <style lang="less">
-.container1 {
+.et-container1 {
     width: 100%;
     height: 460px;
     border: 2px solid #0f2a4d;
     margin-top: 16px;
     overflow: hidden;
+    .et-ts {
+        position: relative;
+        width: 100%;
+        padding: 0px 16px;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .et-ts-s1 {
+            position: absolute;
+            color: #fff;
+            top: 16px;
+            left: 16px;
+            font-size: 16px;
+            color: #3373cc;
+        }
+        .et-ts-d2 {
+            width: 1726px;
+            height: 400px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            position: relative;
+            .dd1-label {
+                .d1x {
+                    width: 120px;
+                    height: 120px;
+                    background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    font-size: 14px;
+                    color: #b0deff;
+                    text-align: center;
+                    line-height: 120px;
+                }
+                .d1 {
+                    width: 120px;
+                    height: 120px;
+                    background-image: url("../../../assets/images/EventInsight/img_xlq.png");
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    font-size: 14px;
+                    color: #b0deff;
+                    text-align: center;
+                    line-height: 120px;
+                }
+                .d2 {
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                }
+                .d3 {
+                    font-size: 14px;
+                    font-family: Bebas;
+                    color: #616974;
+                    text-align: center;
+                }
+            }
+            .dd1-fen {
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                background: #004877;
+                left: 0px;
+                top: 136px;
+            }
+            .dd1-item {
+                position: relative;
+                width: 260px;
+                height: 320px;
+                display: flex;
+                flex-shrink: 0;
+                padding-left: 84px;
+                justify-content: flex-start;
+                .m1 {
+                    height: 148px;
+                }
+                .dt-d1 {
+                    margin-left: 18px;
+                    .d1 {
+                        width: 120px;
+                        padding-top: 16px;
+                        height: 88px;
+                        font-size: 16px;
+                         cursor: pointer;
+                    }
+                    .d2 {
+                        font-size: 14px;
+                        color: #fff;
+                    }
+                    .d3 {
+                        font-size: 13px;
+                        font-family: Bebas;
+                        color: #616974;
+                    }
+                }
+            }
+        }
+        .et-ts-d1 {
+            width: 32px;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            img {
+                cursor: pointer;
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ThemeBoard/ThemeSource/index.vue b/src/views/ThemeBoard/ThemeSource/index.vue
index a1fe689..4d718e2 100644
--- a/src/views/ThemeBoard/ThemeSource/index.vue
+++ b/src/views/ThemeBoard/ThemeSource/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ts-outter" v-loading="load">
-      <v-label-div title="主题调性分布/男女比例认证非认证">
+      <v-label-div title="主题调性分布">
         <v-tab-group :btns="['性别', '认证']" @change="handlerTab"></v-tab-group>
       </v-label-div>
       <div class="ts-inner">
diff --git a/src/views/ThemeBoard/ThemeSource/opt.js b/src/views/ThemeBoard/ThemeSource/opt.js
index 782b448..ac0b953 100644
--- a/src/views/ThemeBoard/ThemeSource/opt.js
+++ b/src/views/ThemeBoard/ThemeSource/opt.js
@@ -37,7 +37,7 @@ export default function createOpt(ds = [], color = []) {
       {
         name: 'Access From0',
         type: 'pie',
-        radius: ['65%', '80%'],
+        radius: ['62%', '74%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
@@ -63,7 +63,7 @@ export default function createOpt(ds = [], color = []) {
       {
         name: 'Access From1',
         type: 'pie',
-        radius: ['86%', '94%'],
+        radius: ['79%', '86%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
diff --git a/src/views/ThemeBoard/TransformMethod/index.vue b/src/views/ThemeBoard/TransformMethod/index.vue
index 7b181d5..c965328 100644
--- a/src/views/ThemeBoard/TransformMethod/index.vue
+++ b/src/views/ThemeBoard/TransformMethod/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tf-container">
+  <div class="tf-container" v-loading="load">
       <v-label-div title="传播途径" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
       <div class="tf-inner">
           <div class="tf-d1">
@@ -10,21 +10,21 @@
                     <img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
                     <div class="d1">
                         <span class="ss1">最大层级</span>
-                        <span class="ss2">111</span>
+                        <span class="ss2">{{ countObj.sum }}</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">222</span>
+                        <span class="ss2">{{ countObj.volume|formatMoney(0,'',',') }}</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">333</span>
+                        <span class="ss2">{{ countObj.total }}</span>
                     </div>
                 </div>
           </div>
@@ -33,11 +33,80 @@
 </template>
 
 <script>
+import createOpt from "./opt";
+import {getDiffuseZhuTi} from "@/api/ThemeAnalizeDec"
 export default {
     name: "TransformMethod",
     data() {
         return {
-            opt:{}
+            opt:{},
+            load: false,
+            total: 0,
+            sum: 0,
+            volume: 0,
+            form: {
+                token: "",
+                sRele: "",
+            },
+            countObj: {
+                volume: 0,
+                total: 0,
+                sum: 0,
+            },
+            colors: [
+                "#FFB600",
+                "#886CFF",
+                "#0084FF",
+                "#4CB690",
+                "#58B458",
+                "#6C6C6C",
+                "#F56161",
+                "#FC754C",
+                "#5F5EEC",
+            ],
+        }
+    },
+    created() {
+        this.form = this.$route.query;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({}, this.form);
+            getDiffuseZhuTi(obj).then(res => {
+                this.load = true;
+                let data = res.data;
+                this.countObj.sum = data.sum;
+                this.countObj.volume = data.volume;
+                this.countObj.total = data.total;
+                let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
+                this.list = 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 || "";
+                    nodes.forEach(e => {
+                        if(e.id === xgmid) {
+                            e.value = _source.volume
+                        } else {
+                            e.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.load = false;
+            })
         }
     }
 }
@@ -45,7 +114,8 @@ export default {
 
 <style lang="less">
 .tf-container {
-    width: 100%;
+    width: 936px;
+    height: 460px;
     .tf-inner {
         width: 100%;
         height: calc(100% - 48px);
@@ -58,7 +128,7 @@ export default {
         .tf-d2 {
             .d-r-item {
                 width: 264px;
-                height: 109px;
+                height: 134px;
                 display: flex;
                 justify-content: flex-start;
                 align-items: center;
diff --git a/src/views/ThemeBoard/TransformMethod/opt.js b/src/views/ThemeBoard/TransformMethod/opt.js
new file mode 100644
index 0000000..ee6980f
--- /dev/null
+++ b/src/views/ThemeBoard/TransformMethod/opt.js
@@ -0,0 +1,82 @@
+
+/*
+ * @Author: your name
+ * @Date: 2021-10-14 19:32:39
+ * @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 {
+    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'
+    },
+    animationDurationUpdate: 1500,
+    animationEasingUpdate: 'quinticInOut',
+    series: [
+      {
+        type: 'graph',
+        layout: 'none',
+        // progressiveThreshold: 700,
+        data: data.nodes.map(function (node) {
+          return {
+            x: node.x,
+            y: node.y,
+            id: node.id,
+            name: node.name,
+            value: node.value,
+            symbolSize: node.symbolSize,
+            itemStyle: {
+              color: node.color
+            }
+          };
+        }),
+        links: data.edges.map(function (edge) {
+          return {
+            source: edge.source,
+            target: edge.target
+          };
+        }),
+        emphasis: {
+          focus: 'adjacency',
+          label: {
+            position: 'right',
+            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
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/views/ThemeBoard/WeiboAnalize/index.vue b/src/views/ThemeBoard/WeiboAnalize/index.vue
index 99e7a4e..ed95cf2 100644
--- a/src/views/ThemeBoard/WeiboAnalize/index.vue
+++ b/src/views/ThemeBoard/WeiboAnalize/index.vue
@@ -42,7 +42,7 @@ export default {
 <style lang="less">
 .wa-container1 {
     width: 100%;
-    height: 920px;
+    height: 970px;
     border: 2px solid #0f2a4d;
     margin-top: 16px;
     overflow: hidden;