From 5c105349303f67331f1322a896ff1c5b68d2b4f5 Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Tue, 19 Oct 2021 11:53:00 +0800
Subject: [PATCH] cxw-010203

---
 src/views/BrandComparison/index.vue           |  4 +-
 .../BrandComparison/tailTOPMedia/index.vue    |  4 +-
 src/views/EventComparison/inbcEc/index.vue    | 40 ++++++++
 src/views/EventComparison/inbcEc/opt.js       | 91 ++++++++++++++++++
 src/views/EventComparison/index.vue           | 40 ++++++--
 src/views/EventComparison/tirEc/index.vue     | 40 ++++++++
 src/views/EventComparison/tirEc/opt.js        | 93 +++++++++++++++++++
 src/views/EventComparison/ttmEc/index.vue     | 75 +++++++++++++++
 8 files changed, 374 insertions(+), 13 deletions(-)
 create mode 100644 src/views/EventComparison/inbcEc/index.vue
 create mode 100644 src/views/EventComparison/inbcEc/opt.js
 create mode 100644 src/views/EventComparison/tirEc/index.vue
 create mode 100644 src/views/EventComparison/tirEc/opt.js
 create mode 100644 src/views/EventComparison/ttmEc/index.vue

diff --git a/src/views/BrandComparison/index.vue b/src/views/BrandComparison/index.vue
index 23b6e7e..b51c735 100644
--- a/src/views/BrandComparison/index.vue
+++ b/src/views/BrandComparison/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 10:39:43
- * @LastEditTime: 2021-10-16 15:03:02
+ * @LastEditTime: 2021-10-19 11:45:50
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/index.vue
@@ -128,7 +128,7 @@ export default {
         comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
         brandRearWingComparison, // 尾翼趋势对比
         informationVolumeByChannel, // 分渠道信息量
-        tailTOPMedia
+        tailTOPMedia // 尾翼TOP媒体
         
     },
     data() {
diff --git a/src/views/BrandComparison/tailTOPMedia/index.vue b/src/views/BrandComparison/tailTOPMedia/index.vue
index c80a09b..4e0ea5b 100644
--- a/src/views/BrandComparison/tailTOPMedia/index.vue
+++ b/src/views/BrandComparison/tailTOPMedia/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 14:56:13
- * @LastEditTime: 2021-10-16 15:15:52
+ * @LastEditTime: 2021-10-19 11:52:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
@@ -78,7 +78,7 @@ export default {
                 width: 100%;
                 height: 40px;
                 line-height: 40px;
-                font-size: 18px;
+                font-size: 16px;
                 color: #fff;
             }
             .d1 {
diff --git a/src/views/EventComparison/inbcEc/index.vue b/src/views/EventComparison/inbcEc/index.vue
new file mode 100644
index 0000000..06b1d5a
--- /dev/null
+++ b/src/views/EventComparison/inbcEc/index.vue
@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 11:37:56
+ * @LastEditTime: 2021-10-19 11:42:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventComparison/inbcEc/index.vue
+-->
+<template>
+    <div class="inbcEc-outter">
+        <v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}">
+        </v-label-div>
+        <div class="inbcEc-inner">
+            <v-echarts :opt="opt"></v-echarts> 
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "inbcEc",
+    data() {
+        return {
+           opt: createOpt() 
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.inbcEc-outter {
+    width: 944px;
+    height: 412px;
+    .inbcEc-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/EventComparison/inbcEc/opt.js b/src/views/EventComparison/inbcEc/opt.js
new file mode 100644
index 0000000..cbf8520
--- /dev/null
+++ b/src/views/EventComparison/inbcEc/opt.js
@@ -0,0 +1,91 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-10-19 11:44:41
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
+ */
+export default function createOpt() {
+    return {
+        grid: {
+            top: "56px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        legend: {
+            data: ['事件一', '事件二'],
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#fff",
+                    },
+                },
+                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#FFF",
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: "dashed", // y轴分割线类型
+                        color: "#012b4b",
+                    },
+                },
+            }
+        ],
+        series: [
+            {
+                name: '事件一',
+                type: 'bar',
+                barGap: 0,
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 400]
+            },
+            {
+                name: '事件二',
+                type: 'bar',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 300]
+            }
+            
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/EventComparison/index.vue b/src/views/EventComparison/index.vue
index f8f90b5..c63adb7 100644
--- a/src/views/EventComparison/index.vue
+++ b/src/views/EventComparison/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-18 13:35:07
- * @LastEditTime: 2021-10-19 11:02:00
+ * @LastEditTime: 2021-10-19 11:51:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/EventComparison/index.vue
@@ -38,7 +38,15 @@
                     <wupEc></wupEc>
                 </div>
             </div>
-            <div class="ece-d3"></div>
+            <div class="ece-d3">
+                <v-label-div title="事件尾翼对比">
+                </v-label-div>
+                <div class="dd1">
+                    <tirEc></tirEc>
+                    <inbcEc></inbcEc>
+                </div>
+                 <ttmEc></ttmEc>
+            </div>
         </div>
     </div>
 </template>
@@ -51,12 +59,15 @@ import etcCc from "./etc-cc";
 import eventSTM from "./eventSTM";
 import comparisonOfEventpp from "./comparisonOfEventpp";
 import positiveAndNegativeWordCloudContrast from "./positiveAndNegativeWordCloudContrast";
-import CWIEC from "./CWIEC"
-import cotwiEc from "./cotwiEc"
-import wbcEc from "./wbcEc"
-import wtcEc from "./wtcEc"
-import uadEc from "./uadEc"
-import wupEc from "./wupEc"
+import CWIEC from "./CWIEC";
+import cotwiEc from "./cotwiEc";
+import wbcEc from "./wbcEc";
+import wtcEc from "./wtcEc";
+import uadEc from "./uadEc";
+import wupEc from "./wupEc";
+import tirEc from "./tirEc";
+import inbcEc from "./inbcEc"
+import ttmEc from "./ttmEc"
 export default {
     name: "EventComparison",
     components: {
@@ -72,7 +83,10 @@ export default {
         wbcEc, // 微博大V对比
         wtcEc, // 微博调性对比
         uadEc, // 用户区域分布
-        wupEc // 微博用户画像
+        wupEc, // 微博用户画像
+        tirEc, // 尾翼信息趋势
+        inbcEc, // 分渠道信息量
+        ttmEc // 尾翼TOP媒体
     },
     data() {
         return {
@@ -121,6 +135,14 @@ export default {
     }
     .ece-d3 {
         width: 100%;
+        height: auto;
+        border: 2px solid #0f2a4d;
+        margin-top: 16px;
+        .dd1 {
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+        }
     }
 }
 </style>
diff --git a/src/views/EventComparison/tirEc/index.vue b/src/views/EventComparison/tirEc/index.vue
new file mode 100644
index 0000000..5542539
--- /dev/null
+++ b/src/views/EventComparison/tirEc/index.vue
@@ -0,0 +1,40 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 11:28:09
+ * @LastEditTime: 2021-10-19 11:33:43
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventComparison/tirEc/index.vue
+-->
+<template>
+    <div class="te-outter">
+        <v-label-div title="尾翼信息趋势" :showLine="false" :eStyle="{'border-style': 'none'}">
+        </v-label-div>
+        <div class="te-inner">
+           <v-echarts :opt="opt"></v-echarts> 
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "tirEc",
+    data() {
+        return {
+           opt: createOpt() 
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.te-outter {
+    width: 944px;
+    height: 412px;
+    .te-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/EventComparison/tirEc/opt.js b/src/views/EventComparison/tirEc/opt.js
new file mode 100644
index 0000000..eea8ca0
--- /dev/null
+++ b/src/views/EventComparison/tirEc/opt.js
@@ -0,0 +1,93 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-19 11:36:48
+ * @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]
+            }
+            
+        ]
+    }
+}
diff --git a/src/views/EventComparison/ttmEc/index.vue b/src/views/EventComparison/ttmEc/index.vue
new file mode 100644
index 0000000..8d14c9d
--- /dev/null
+++ b/src/views/EventComparison/ttmEc/index.vue
@@ -0,0 +1,75 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:56:13
+ * @LastEditTime: 2021-10-19 11:52:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
+-->
+
+<template>
+    <div class="ttm-outter">
+        <v-label-div title="尾翼TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}" />
+        <div class="ttm-inner">
+            <div class="ttm-item" v-for="(item,index) in list" :key="index">
+                <span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
+                <div class="d1">
+                    <v-echarts :opt="item.drawOpt"></v-echarts>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "ttmEc",
+    data() {
+        return {
+            colors: ['#3373CC', '#63AECC'],
+            list: [
+                {
+                    name: "事件一",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400])
+                },
+                 {
+                    name: "事件二",
+                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#63AECC')
+                },
+            ],
+          
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.ttm-outter {
+    width: 100%;
+    height: auto;
+    .ttm-inner {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .ttm-item {
+            width: 940px;
+            height: 380px;
+            .s1 {
+                padding-left: 16px;
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                font-size: 16px;
+                color: #fff;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>