cxw-010203

src/views/BrandComparison/brandRearWingComparison/index.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 14:26:18
+ * @LastEditTime: 2021-10-16 14:42:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
+-->
+<template>
+    <div class="brw-outter">
+         <v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+         <div class="brw-inner">
+             <v-echarts :opt="opt"></v-echarts> 
+         </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "brandRearWingComparison",
+    data() {
+        return {
+           opt: createOpt()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.brw-outter {
+    width: 944px;
+    height: 412px;
+    .brw-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/BrandComparison/brandRearWingComparison/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:11:24
+ * @LastEditTime: 2021-10-15 11:56:55
+ * @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',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
+            },
+            {
+                name: '宝马',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
+            },
+            {
+                name: '奔驰',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
+            },
+            {
+                name: '吉利',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
+            },
+            {
+                name: '大众',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+            {
+                name: '别克',
+                type: 'line',
+                stack: 'Total',
+                symbol: 'none',
+                areaStyle: {
+                    opacity: 0.4
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
+            },
+
+        ]
+    }
+}

src/views/BrandComparison/comparisonOfNegativeTopicsInForums/index.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-16 13:57:58
+ * @LastEditTime: 2021-10-16 14:20:07
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
+-->
+<template>
+    <div class="cpt-outter">
+        <v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <div class="cpt-inner">
+            <div class="cpt-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 {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+export default {
+    name: "comparisonOfPositiveTopicsInTheForum",
+    data() {
+        return {
+           colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+          list: [
+              {
+                  name: '奥迪',
+                  drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '宝马',
+                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '奔驰',
+                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '吉利',
+                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '大众',
+                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              },
+              {
+                  name: '别克',
+                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
+              }
+          ] 
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.cpt-outter {
+    width: 100%;
+    height: 412px;
+    .cpt-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .cpt-item {
+            width: 100%;
+            height: 100%;
+            .s1 {
+                padding-left: 16px;
+                display: block;
+                height: 40px;
+                line-height: 40px;
+                color:#fff;
+                font-size: 18px;
+            }
+            .d1 {
+                width: 100%;
+                height: calc(100% - 40px);
+            }
+        }
+    }
+}
+</style>

src/views/BrandComparison/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 10:39:43
- * @LastEditTime: 2021-10-16 14:10:25
+ * @LastEditTime: 2021-10-16 14:43:54
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/index.vue
@@ -61,6 +61,13 @@
                 </div>
                  <forumTonalComparison></forumTonalComparison>
                  <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
+                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
+            </div>
+            <div class="bc-d6">
+               <v-label-div title="品牌尾翼对比"></v-label-div> 
+                <div class="bc-d6-dd1">
+                    <brandRearWingComparison></brandRearWingComparison>
+                </div>
             </div>
 
         </div>
@@ -89,6 +96,8 @@ import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForu
 import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
 import forumTonalComparison from "./forumTonalComparison"
 import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
+import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
+import brandRearWingComparison from "./brandRearWingComparison"
 export default {
     name: "brandComparison",
     components: {
@@ -111,7 +120,9 @@ export default {
         summaryAndComparisonOfForumInformation, // 论坛信息概括对比
         comparisonOfForumPostingTrends, // 论坛发帖趋势对比
         forumTonalComparison, // 论坛调性对比
-        comparisonOfPositiveTopicsInTheForum // 论坛正面话题对比
+        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
+        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
+        brandRearWingComparison // 尾翼趋势对比
         
     },
     data() {
@@ -257,4 +268,14 @@ export default {
         justify-content: flex-start;
     }
 }
+.bc-d6 {
+    width: 100%;
+    height: auto;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bc-d6-dd1 {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
 </style>