From 069d864f49632a2647277722f640cbc28081d725 Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Wed, 20 Oct 2021 11:31:30 +0800
Subject: [PATCH] cxw-010203

---
 src/views/EventDEC/index.vue                |  10 +-
 src/views/EventDEC/tailAnalysisED/index.vue |  48 +++++++
 src/views/EventDEC/tailAnalysisED/opt.js    | 141 ++++++++++++++++++++
 src/views/EventDEC/wbUserEDE/index.vue      |  82 ++++++++++++
 src/views/EventDEC/wbUserEDE/opt.js         | 114 ++++++++++++++++
 5 files changed, 393 insertions(+), 2 deletions(-)
 create mode 100644 src/views/EventDEC/tailAnalysisED/index.vue
 create mode 100644 src/views/EventDEC/tailAnalysisED/opt.js
 create mode 100644 src/views/EventDEC/wbUserEDE/index.vue
 create mode 100644 src/views/EventDEC/wbUserEDE/opt.js

diff --git a/src/views/EventDEC/index.vue b/src/views/EventDEC/index.vue
index 2a57a92..7449eb2 100644
--- a/src/views/EventDEC/index.vue
+++ b/src/views/EventDEC/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-19 15:57:11
- * @LastEditTime: 2021-10-20 10:22:40
+ * @LastEditTime: 2021-10-20 11:27:53
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/EventDEC/index.vue
@@ -43,6 +43,8 @@
             <esprocess></esprocess>
             <mediaInterpretationEc></mediaInterpretationEc>
             <mediaInterpretationED></mediaInterpretationED>
+            <wbUserEDE></wbUserEDE>
+            <tailAnalysisED></tailAnalysisED>
         </div>
     </div>
 </template>
@@ -52,6 +54,8 @@ import tonalCommunicationPosture from "./tonalCommunicationPosture"
 import esprocess from "./esprocess"
 import mediaInterpretationEc from "./mediaInterpretationEc"
 import mediaInterpretationED from "./mediaInterpretationED"
+import wbUserEDE from "./wbUserEDE"
+import tailAnalysisED from "./tailAnalysisED"
 export default {
     name: "eventDEC",
     components: {
@@ -59,7 +63,9 @@ export default {
         tonalCommunicationPosture, // 事件传播态势
         esprocess, // 事件传播历程
         mediaInterpretationEc, // 事件传播历程-媒体解读
-        mediaInterpretationED // 媒体解读
+        mediaInterpretationED, // 媒体解读
+        wbUserEDE, // 微博用户画像
+        tailAnalysisED // 尾翼分析
     },
     methods: {
         goback() {
diff --git a/src/views/EventDEC/tailAnalysisED/index.vue b/src/views/EventDEC/tailAnalysisED/index.vue
new file mode 100644
index 0000000..be109c8
--- /dev/null
+++ b/src/views/EventDEC/tailAnalysisED/index.vue
@@ -0,0 +1,48 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 11:19:00
+ * @LastEditTime: 2021-10-20 11:27:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/tailAnalysisED/index.vue
+-->
+<template>
+    <div class="taed-outter">
+        <v-label-div title="尾翼分析">
+        </v-label-div>
+        <div class="taed-inner">
+            <v-label-div title="传播态势" :showLine="false" :eStyle="{'border-style': 'none'}">
+            </v-label-div>
+            <div class="taed-d1">
+                 <v-echarts :opt="opt"></v-echarts>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "tailAnalysisED",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.taed-outter {
+    width: 100%;
+    height: 460px;
+    .taed-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        .taed-d1 {
+            width: 100%;
+            height: calc(100% - 48px);
+        }
+    }
+}
+</style>
diff --git a/src/views/EventDEC/tailAnalysisED/opt.js b/src/views/EventDEC/tailAnalysisED/opt.js
new file mode 100644
index 0000000..d9eea98
--- /dev/null
+++ b/src/views/EventDEC/tailAnalysisED/opt.js
@@ -0,0 +1,141 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-19 19:34:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            left: 16,
+            right: 26,
+            bottom: 16,
+            top: 52,
+            containLabel: true
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        legend: {
+            icon: 'roundRect',
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: '新闻',
+                type: 'line',
+                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]
+            },
+
+        ]
+    }
+}
diff --git a/src/views/EventDEC/wbUserEDE/index.vue b/src/views/EventDEC/wbUserEDE/index.vue
new file mode 100644
index 0000000..2862301
--- /dev/null
+++ b/src/views/EventDEC/wbUserEDE/index.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-20 10:56:06
+ * @LastEditTime: 2021-10-20 11:15:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDEC/wbUserEDE/index.vue
+-->
+<template>
+    <div class="wue-outter">
+        <div class="d1">
+            <v-label-div title="微博用户画像">
+                <v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
+            </v-label-div>
+            <div class="d1-inner">
+                <div class="dd1">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+                <div class="dd2">
+                    <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
+                    <v-label-ctx label="女性" cont="2200" percentage="25%" color="#a58115" :eStyle="{ height: '137px' }"></v-label-ctx>
+                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
+                </div>
+            </div>
+        </div>
+        <div class="d1" style="margin-left: 16px">
+            <v-label-div title="微博调性分布">
+            </v-label-div>
+            <div class="d1-inner">
+                <div class="dd1">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+                <div class="dd2">
+                    <v-label-ctx label="正面" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
+                    <v-label-ctx label="负面" cont="2200" percentage="25%" color="#a58115" :eStyle="{ height: '137px' }"></v-label-ctx>
+                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt";
+export default {
+    name: "wbUserEDE",
+    data() {
+        return {
+            opt: createOpt(),
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.wue-outter {
+    width: 100%;
+    height: 460px;
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+        width: 936px;
+        height: 100%;
+        border: 2px solid #0f2a4d;
+        .d1-inner {
+            width: 100%;
+            height: calc(100% - 48px);
+            display: flex;
+            justify-content: flex-start;
+            .dd1 {
+                width: 430px;
+                height: 100%;
+            }
+            .dd2 {
+                width: 460px;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/EventDEC/wbUserEDE/opt.js b/src/views/EventDEC/wbUserEDE/opt.js
new file mode 100644
index 0000000..1c086d8
--- /dev/null
+++ b/src/views/EventDEC/wbUserEDE/opt.js
@@ -0,0 +1,114 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 15:14:58
+ * @LastEditTime: 2021-10-14 10:43:47
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
+ */
+import * as echarts from "echarts";
+export default function createOpt() {
+    return {
+        series: [
+            {
+              name: 'Access From0',
+              type: 'pie',
+              radius: ['63%', '77%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center',
+                fontSize: '40',
+                color: "#ffff",
+            },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  color: "#ffff",
+                  formatter: (p)=>{
+                    return p.data.name + '\n' + p.data.value; 
+                  },
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 2200, name: '男性', itemStyle: {color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#3373CC'
+                 }])} },
+                { value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#CC9D12'
+                 }])} },
+                { value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                    //给第一个设置0，第四个设置1，就是垂直渐变
+                    offset: 0,
+                    color: 'black'
+                 }, {
+                    offset: 1,
+                    color: '#54BF93'
+                 }])} },
+              ],
+
+            },
+            {
+                name: 'Access From1',
+                type: 'pie',
+                radius: ['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'
+                 }])} },
+                ],
+  
+              }
+          ]
+    }
+}