cxw-010203

src/api/ModelComparison/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-11 15:12:31
- * @LastEditTime: 2021-11-12 13:46:55
+ * @LastEditTime: 2021-11-12 14:40:17
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /data-show/src/api/ModelComparison/index.js
@@ -80,3 +80,51 @@ export function getAffectionsC(params) {
         }
     })
 }
+// 论坛-论坛正面/负面话题对比
+export function getTopicPosAndTopicNeg0528C(params) {
+    let obj =  Object.assign({action: 'getTopicPosAndTopicNeg0528C',sType: 'BbsBrand', iBBsType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 尾翼-尾翼信息趋势
+export function getCountTime0528C1(params) {
+    let obj =  Object.assign({action: 'getCountTime0528C',sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 尾翼-尾翼信息趋势
+export function getSourcetypeC(params) {
+    let obj =  Object.assign({action: 'getSourcetypeC',sType: 'BrandWeiYi'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 尾翼-top媒体
+export function getSourceTopCount0528C(params) {
+    let obj =  Object.assign({action: 'getSourceTopCount0528C',sType: 'BrandWeiYi',iSize: 10}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/utils/gol/dataTool.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-29 13:29:26
- * @LastEditTime: 2021-11-11 10:45:13
+ * @LastEditTime: 2021-11-12 14:50:47
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/utils/gol/dataTool.js
@@ -77,3 +77,24 @@ export function comparePig(property) {
     return value2 - value1;
   }
 }
+
+// 处理超出字后面...
+export function doStr(str, n) {
+  let totalCount = 0;
+  let txt = "";
+  for (var i = 0; i < str.length; i++) {
+      let c = str.charCodeAt(i);
+      if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
+          totalCount++;
+      } else {
+          totalCount += 2;
+      }
+      if (totalCount <= n) {
+          txt += str[i];
+      } else {
+          txt += '...';
+          return txt
+      }
+  }
+  return txt;
+}

src/utils/gol/sideSingleColumn.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-15 17:52:59
- * @LastEditTime: 2021-10-29 15:58:03
+ * @LastEditTime: 2021-11-12 14:09:59
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/utils/gol/sideSingleColumn.js
@@ -17,6 +17,7 @@
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
  */
 import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
 export function createSideSingleColumn(dx=[], ds=[], color='#51bc91') {
     return {
         grid: {
@@ -44,6 +45,12 @@ export function createSideSingleColumn(dx=[], ds=[], color='#51bc91') {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -69,7 +76,7 @@ export function createSideSingleColumn(dx=[], ds=[], color='#51bc91') {
             {
                 name: '2011',
                 type: 'bar',
-                barWidth: 24,
+                barWidth: 16,
                 data: ds,
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                     offset: 0,

src/utils/gol/singleColumnar.js

@@ -1,13 +1,14 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 10:13:32
- * @LastEditTime: 2021-11-01 19:30:30
+ * @LastEditTime: 2021-11-12 14:53:44
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/utils/gol/index.js
  */
 import * as echarts from "echarts";
 import { bigNumberTransform } from "@/utils/gol/dataTool"
+import {doStr} from "./dataTool"
 export function createSingleColumnar(dx=[], ds=[], color='#3373CC') {
     return {
         grid: {
@@ -39,7 +40,11 @@ export function createSingleColumnar(dx=[], ds=[], color='#3373CC') {
         xAxis: {
             type: "category",
             axisLabel :{  
-                interval:0   
+                interval:0,
+                formatter: (value) => {
+                    let str = doStr(value, 4);
+                    return str;
+                  }  
             }, 
             axisTick: {
                 show: false,

src/views/ModelComparison/BrandComparison.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:49:05
- * @LastEditTime: 2021-11-12 13:10:56
+ * @LastEditTime: 2021-11-12 14:30:59
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@@ -56,7 +56,7 @@
                  <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
             </div>
             <div class="bc-d6">
-               <v-label-div title="品牌尾翼对比"></v-label-div> 
+               <v-label-div title="车型尾翼对比"></v-label-div> 
                 <div class="bc-d6-dd1">
                     <brandRearWingComparison></brandRearWingComparison>
                     <informationVolumeByChannel></informationVolumeByChannel>

src/views/ModelComparison/brandRearWingComparison/index.vue

@@ -1,30 +1,73 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 14:26:18
- * @LastEditTime: 2021-10-16 14:42:07
+ * @LastEditTime: 2021-11-12 14:29:39
  * @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 class="brw-outter" v-loading="load">
+        <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"
+import { getCountTime0528C1 } from "@/api/ModelComparison";
+import createOpt from "./opt";
 export default {
     name: "brandRearWingComparison",
     data() {
         return {
-           opt: createOpt()
-        }
-    }
-}
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            opt: createOpt(),
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getCountTime0528C1(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.key;
+                    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/ModelComparison/brandRearWingComparison/opt.js

@@ -1,17 +1,47 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:11:24
- * @LastEditTime: 2021-10-15 11:56:55
+ * @LastEditTime: 2021-11-12 14:29:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
  */
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+function createData(ds = []) {
+    let testData = {}
+    ds.forEach(item => {
+        item.forEach(val => {
+            if (testData[val.key] === undefined) {
+                testData[val.key] = {
+                    name: val.key,
+                    type: 'line',
+                    symbol: 'none',
+                    areaStyle: {
+                        opacity: 0.2
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [val.value]
+                }
+            } else {
+                testData[val.key].data.push(val.value)
+            }
+        })
+    })
+    let arr = [];
+    for(let key in testData) {
+        arr.push(testData[key])
+    }
+   return arr 
+}
+export default function createOpt(dx = [], ds = []) {
+    let data = createData(ds);
     return {
         grid: {
-            left: 16,
-            right: 26,
-            bottom: 16,
+            left: 10,
+            right: '5%',
+            bottom: 10,
             top: 52,
             containLabel: true
         },
@@ -28,10 +58,13 @@ export default function createOpt() {
         legend: {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize: 10
             },
             y: 12,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         xAxis: {
             type: 'category',
@@ -39,13 +72,19 @@ export default function createOpt() {
             axisTick: {
                 show: false,
             },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
             axisLine: {
                 show: false,
                 lineStyle: {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -55,6 +94,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+            },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -62,86 +107,6 @@ export default function createOpt() {
                 },
             },
         },
-        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]
-            },
-
-        ]
+        series: data
     }
 }

src/views/ModelComparison/comparisonOfNegativeTopicsInForums/index.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 13:57:58
- * @LastEditTime: 2021-10-16 14:20:07
+ * @LastEditTime: 2021-11-12 14:24:50
  * @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-outter" v-loading="load">
+        <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>
@@ -21,41 +21,73 @@
 </template>
 
 <script>
-import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
+import { getTopicPosAndTopicNeg0528C } from "@/api/ModelComparison";
+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'),
-              }
-          ] 
-        }
-    }
-}
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            list: [],
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getTopicPosAndTopicNeg0528C(obj).then((res) => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele) => {
+                    let z = ele.value[1].value || [];
+                    let dx = [];
+                    let ds = [];
+                    z.forEach((e) => {
+                        dx.push(e.key);
+                        ds.push(e.value);
+                    });
+                    let obj = {
+                        name: ele.key,
+                        drawOpt: createSideSingleColumn(dx, ds, "#bd9312"),
+                    };
+                    arr.push(obj);
+                });
+                this.list = arr;
+                this.load = false;
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>
@@ -75,7 +107,7 @@ export default {
                 display: block;
                 height: 40px;
                 line-height: 40px;
-                color:#fff;
+                color: #fff;
                 font-size: 18px;
             }
             .d1 {

src/views/ModelComparison/comparisonOfPositiveTopicsInTheForum/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 13:57:58
- * @LastEditTime: 2021-10-16 14:16:03
+ * @LastEditTime: 2021-11-12 14:25:38
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
 -->
 <template>
-    <div class="cpt-outter">
+    <div class="cpt-outter" v-loading="load">
         <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">
@@ -21,40 +21,72 @@
 </template>
 
 <script>
+import { getTopicPosAndTopicNeg0528C } from "@/api/ModelComparison";
 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], '#3373CC'),
-              },
-              {
-                  name: '宝马',
-                  drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '奔驰',
-                  drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '吉利',
-                  drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '大众',
-                  drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              },
-              {
-                  name: '别克',
-                  drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
-              }
-          ] 
-        }
-    }
+            load: false,
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
+            colors: [
+                "#3373CC",
+                "#63AECC",
+                "#54BF93",
+                "#CC9D12",
+                "#CC7733",
+                "#CC5B41",
+            ],
+            list: [],
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getTopicPosAndTopicNeg0528C(obj).then((res) => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele) => {
+                    let z = ele.value[0].value || [];
+                    let dx = [];
+                    let ds = [];
+                    z.forEach((e) => {
+                        dx.push(e.key);
+                        ds.push(e.value);
+                    });
+                    let obj = {
+                        name: ele.key,
+                        drawOpt: createSideSingleColumn(dx, ds, "#3373CC"),
+                    };
+                    arr.push(obj);
+                });
+                this.list = arr;
+                this.load = false;
+            });
+        },
+    },
 }
 </script>
 

src/views/ModelComparison/informationVolumeByChannel/index.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 14:47:23
- * @LastEditTime: 2021-11-11 14:27:13
+ * @LastEditTime: 2021-11-12 14:39:17
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
 -->
 <template>
     <div class="ivb-outter" v-loading="load">
-        <v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}"/>
+        <v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}" />
         <div class="ivb-inner">
             <v-echarts :opt="opt"></v-echarts>
         </div>
@@ -16,16 +16,59 @@
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getSourcetypeC } from "@/api/ModelComparison";
+import createOpt from "./opt";
 export default {
     name: "informationVolumeByChannel",
     data() {
         return {
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
             load: false,
-            opt: createOpt()
-        }
-    }
-}
+            opt: {},
+        };
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            this.load = true;
+            getSourcetypeC(obj).then((res) => {
+                let data = res.data || [];
+                let dx = [];
+                data.forEach((ele) => {
+                    let ab = ele.Data || {};
+                    for (let key in ab) {
+                        if (!dx.includes(key)) {
+                            dx.push(key);
+                        }
+                    }
+                });
+                this.opt = createOpt(data, dx);
+                this.load = false;
+            });
+        },
+    },
+};
 </script>
 
 <style lang="less" scoped>

src/views/ModelComparison/informationVolumeByChannel/opt.js

@@ -1,27 +1,121 @@
 /*
  * @Author: your name
  * @Date: 2021-10-15 15:15:27
- * @LastEditTime: 2021-11-12 09:59:54
+ * @LastEditTime: 2021-11-12 14:37:32
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false)]
+function createData(dataList = [], dx=[]) {
+    /*series: [
+        {
+            name: '奥迪',
+            type: 'bar',
+            barGap: 0,
+            barWidth: 16,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390, 400]
+        },*/
+    let arr = [];
+    dataList.forEach(e => {
+        let a = [];
+        let Data = e.Data || {};
+        dx.forEach(e => {
+            a.push(Data[e])
+        })
+        let o = {
+            name: e.Name,
+            type: 'bar',
+            barWidth: 16,
+            barGap: '9%',
+            emphasis: {
+                focus: 'series'
+            },
+            data: a
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+export default function createOpt(dataList = [],dx = []) {
+    let info = createData(dataList, dx);
     return {
         grid: {
-            top: "56px",
+            top: 56,
             left: 10,
             right: "5%",
             bottom: 10,
             containLabel: true,
         },
+        color: colors,
         legend: {
-            data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontSize: 10
             },
             y: 12,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         tooltip: {
             trigger: "axis",
@@ -45,7 +139,7 @@ export default function createOpt() {
                         color: "#fff",
                     },
                 },
-                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+                data: dx
             }
         ],
         yAxis: [
@@ -57,6 +151,12 @@ export default function createOpt() {
                         color: "#FFF",
                     },
                 },
+                axisLabel: {
+                    formatter: (value) => {
+                      let str = bigNumberTransform(value);
+                      return str;
+                    }
+                },
                 splitLine: {
                     lineStyle: {
                         type: "dashed", // y轴分割线类型
@@ -65,62 +165,6 @@ export default function createOpt() {
                 },
             }
         ],
-        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]
-            },
-            {
-                name: '奔驰',
-                type: 'bar',
-                barWidth: 16,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [150, 232, 201, 154, 190, 200]
-            },
-            {
-                name: '吉利',
-                type: 'bar',
-                barWidth: 16,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [98, 77, 101, 99, 40, 44]
-            },
-            {
-                name: '大众',
-                type: 'bar',
-                barWidth: 16,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [198, 177, 101, 199, 140, 145]
-            },
-            {
-                name: '别克',
-                type: 'bar',
-                barWidth: 16,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [298, 277, 201, 299, 240, 250]
-            }
-        ]
+        series: info
     }
 }

src/views/ModelComparison/tailTOPMedia/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-16 14:56:13
- * @LastEditTime: 2021-10-19 11:52:43
+ * @LastEditTime: 2021-11-12 14:47:54
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
@@ -22,41 +22,63 @@
 </template>
 
 <script>
+import {getSourceTopCount0528C} from "@/api/ModelComparison"
 import {createSingleColumnar} from "@/utils/gol/singleColumnar"
 export default {
     name: "tailTOPMedia",
     data() {
         return {
+            form: {
+                token: "",
+                sBrand: "",
+                sSeriesName: "",
+                iContrastType: 2,
+            },
             colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
-            list: [
-                {
-                    name: "奥迪",
-                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400])
-                },
-                 {
-                    name: "宝马",
-                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#63AECC')
-                },
-                 {
-                    name: "奔驰",
-                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#54BF93')
-                },
-                 {
-                    name: "吉利",
-                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC9D12')
-                },
-                 {
-                    name: "大众",
-                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC7733')
-                },
-                 {
-                    name: "别克",
-                    drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC5B41')
-                }
-            ],
+            list: [],
           
         };
     },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+            this.form.token = this.getToken;
+            let arr = this.getMComparison || [];
+            let brands = [];
+            let models = [];
+            arr.forEach((ele) => {
+                brands.push(ele.brand);
+                models.push(ele.model);
+            });
+            this.form.sBrand = brands.toString();
+            this.form.sSeriesName = models.toString();
+            this.getData();
+        },
+        getData() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getSourceTopCount0528C(obj).then(res => {
+                let data = res.data || [];
+                let arr = [];
+                data.forEach((ele,index) => {
+                    let val = ele.value || [];
+                    let dx = [];
+                    let ds = [];
+                    val.forEach(e => {
+                        dx.push(e.key);
+                        ds.push(e.value);
+                    })
+                    let o = {
+                        name: ele.key,
+                        drawOpt: createSingleColumnar(dx,ds, this.colors[index])
+                    }
+                   arr.push(o) 
+                })
+                this.list = arr;
+            })
+        }
+    }
 };
 </script>