zx-营销对比

src/api/MarketingComparison/BbsType.js

@@ -0,0 +1,14 @@
+import httpService from "@/request"
+
+// 营销分析对比-论坛总量对比
+export function getCountMKT0528C(params) {
+    let obj =  Object.assign({action: 'getCountMKT0528C',sType: 'Marketing',iBbsType: 1}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/MarketingComparison/index.js

@@ -0,0 +1,68 @@
+import httpService from "@/request"
+
+// 营销分析对比-整体声量对比
+export function getCountMKT0528C(params) {
+    let obj =  Object.assign({action: 'getCountMKT0528C',sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 营销分析对比-互动量对比
+export function getInteractCountMKT0528C(params) {
+    let obj =  Object.assign({action: 'getInteractCountMKT0528C',sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 营销分析对比-互动量对比
+export function getSourceCountMKT0528C(params) {
+    let obj =  Object.assign({action: 'getSourceCountMKT0528C',sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 营销分析对比-渠道分布对比
+export function getSourceTypeCountMKT0528C(params) {
+    let obj =  Object.assign({action: 'getSourceTypeCountMKT0528C',sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 营销分析对比-销量对比
+export function getSalesCountMKT0528C(params) {
+    let obj =  Object.assign({action: 'getSalesCountMKT0528C',sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+

src/views/MarketingComparison/mcCTNF/index.vue

@@ -7,35 +7,76 @@
  * @FilePath: /data-show/src/views/MarketingComparison/mcCTNF/index.vue
 -->
 <template>
-    <div class="mcct-outter">
+  <div class="mcct-outter" v-loading="load">
-        <v-label-div title="论坛总量对比">
+    <v-label-div title="论坛总量对比"> </v-label-div>
-        </v-label-div>
+    <div class="mcct-inner">
-        <div class="mcct-inner">
+      <v-echarts :opt="opt"></v-echarts>
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getCountMKT0528C } from "@/api/MarketingComparison/index.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "mcCTNF",
+  name: "mcCTNF",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
+      form: {
-        }
+        token: "",
-    }
+        sJson: "",
-}
+        load: false
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getSComparison;
+      let sourceData = [];
+      arr.forEach((ele) => {
+        let o = {
+          sBrand: ele.brand,
+          sSeriesName: ele.model,
+          sStartTime: ele.startTime,
+          sEndTime: ele.endTime,
+        };
+        sourceData.push(o);
+      });
+      this.form.sJson = JSON.stringify(sourceData); //转成json
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime, this.form);
+      this.load = true;
+      getCountMKT0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        let ds = [];
+        data.forEach((ele) => {
+          dx.push(ele.key);
+          ds.push(ele.value);
+        });
+        this.opt = createSingleColumnar(dx, ds);
+        this.load = false;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .mcct-outter {
-    width: 936px;
+  width: 936px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    .mcct-inner {
+  .mcct-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-    }
+  }
 }
 </style>

src/views/MarketingComparison/mcChannelDistribution/index.vue

@@ -7,35 +7,77 @@
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
 -->
 <template>
-    <div class="cd-outter">
+  <div class="cd-outter">
-        <v-label-div title="渠道分布">
+    <v-label-div title="渠道分布"> </v-label-div>
-        </v-label-div>
+    <div class="cd-inner">
-        <div class="cd-inner">
+      <v-echarts :opt="opt"></v-echarts>
-           <v-echarts :opt="opt"></v-echarts> 
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getSourceTypeCountMKT0528C } from "@/api/MarketingComparison/index.js";
+import createOpt from "./opt";
 export default {
-    name: "mcChannelDistribution",
+  name: "mcChannelDistribution",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createOpt()
+      opt: {},
-        }
+      form: {
-    }
+        token: "",
+        sJson: "",
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getSComparison;
+      let sourceData = [];
+      arr.forEach((ele) => {
+        let o = {
+          sBrand: ele.brand,
+          sSeriesName: ele.model,
+          sStartTime: ele.startTime,
+          sEndTime: ele.endTime,
+        };
+        sourceData.push(o);
+      });
+      this.form.sJson = JSON.stringify(sourceData); //转成json
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime, this.form);
+      getSourceTypeCountMKT0528C(obj).then((res) => {
+        let data = res.data || [];
+        let brandList = [];
+        let dx = [];
+        data.forEach((e) => {
+          e.data.forEach( ele => {
+            if (!dx.includes(ele.key)) {
+              dx.push(ele.key);
+            }
+          })
+          brandList.push(e.key);
+        });
+        this.opt = createOpt(data, dx, brandList);
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .cd-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  .cd-inner {
     width: 100%;
-    height: 460px;
+    height: calc(100% - 48px);
-    border: 2px solid #0f2a4d;
+  }
-    .cd-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
 }
 </style>

src/views/MarketingComparison/mcChannelDistribution/opt.js

@@ -6,6 +6,7 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
+import { bigNumberTransform } from "@/utils/gol/dataTool";
 import * as echarts from "echarts";
 let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     {
@@ -62,7 +63,32 @@ let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         color: '#071a32'
     }
 ], false)]
-export default function createOpt() {
+
+function createData(dataList = []) {
+    let arr = [];
+    dataList.forEach(ele => {
+        let a = [];
+        //let Data = ele.Data || {};
+        ele.data.forEach(e => {
+            a.push(e.value)
+        })
+        let o = {
+            name: ele.key,
+            type: 'bar',
+            barGap: 0,
+            barWidth: 20,
+            emphasis: {
+                focus: 'series'
+            },
+            data: a
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+
+export default function createOpt(dataList = [],dx = [], brandList = []) {
+    let info = createData(dataList);
     return {
         grid: {
             top: "56px",
@@ -73,7 +99,7 @@ export default function createOpt() {
         },
         color: colors,
         legend: {
-            data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
+            data: brandList,
             textStyle: { //图例文字的样式
                 color: '#fff'
             },
@@ -102,7 +128,7 @@ export default function createOpt() {
                         color: "#fff",
                     },
                 },
-                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+                data: dx
             }
         ],
         yAxis: [
@@ -114,6 +140,12 @@ export default function createOpt() {
                         color: "#FFF",
                     },
                 },
+                axisLabel: {
+                    formatter: (value) => {
+                        let str = bigNumberTransform(value);
+                        return str;
+                    }
+                },
                 splitLine: {
                     lineStyle: {
                         type: "dashed", // y轴分割线类型
@@ -122,67 +154,6 @@ export default function createOpt() {
                 },
             }
         ],
-        series: [
+        series: info
-            {
-                name: '奥迪',
-                type: 'bar',
-                barGap: '9%',
-                barWidth: 16,
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [320, 332, 301, 334, 390, 400]
-            },
-            {
-                name: '宝马',
-                type: 'bar',
-                barWidth: 16,
-                barGap: '9%',
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [220, 182, 191, 234, 290, 300]
-            },
-            {
-                name: '奔驰',
-                type: 'bar',
-                barWidth: 16,
-                barGap: '9%',
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [150, 232, 201, 154, 190, 200]
-            },
-            {
-                name: '吉利',
-                type: 'bar',
-                barWidth: 16,
-                barGap: '9%',
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [98, 77, 101, 99, 40, 44]
-            },
-            {
-                name: '大众',
-                type: 'bar',
-                barWidth: 16,
-                barGap: '9%',
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [198, 177, 101, 199, 140, 145]
-            },
-            {
-                name: '别克',
-                type: 'bar',
-                barWidth: 16,
-                barGap: '9%',
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [298, 277, 201, 299, 240, 250]
-            }
-        ]
     }
 }

src/views/MarketingComparison/mcIVC/index.vue

@@ -7,37 +7,77 @@
  * @FilePath: /data-show/src/views/MarketingComparison/mcIVC/index.vue
 -->
 <template>
-    <div class="mic-outter">
+  <div class="mic-outter" v-loading="load">
-        <v-label-div title="互动量对比">
+    <v-label-div title="互动量对比"> </v-label-div>
-        </v-label-div>
+    <div class="mic-inner">
-        <div class="mic-inner">
+      <v-echarts :opt="opt"></v-echarts>
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getInteractCountMKT0528C } from "@/api/MarketingComparison/index.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "mcIVC",
+  name: "mcIVC",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#4fb58c')
+      form: {
-        }
+        token: "",
+        sJson: "",
+        load: false
+      },
+      opt: {}
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getSComparison;
+      let sourceData = [];
+      arr.forEach((ele) => {
+        let o = {
+          sBrand: ele.brand,
+          sSeriesName: ele.model,
+          sStartTime: ele.startTime,
+          sEndTime: ele.endTime,
+        };
+        sourceData.push(o);
+      });
+      this.form.sJson = JSON.stringify(sourceData); //转成json
+      this.getData();
+    },
+    getData() {
+        let obj = Object.assign({}, this.getCtime, this.form);
+        this.load = true;
+        getInteractCountMKT0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        let ds = [];
+        data.forEach((ele) => {
+          dx.push(ele.key);
+          ds.push(ele.value);
+        });
+        this.opt = createSingleColumnar(dx, ds,"#4fb58c");
+        this.load = false;
+      });
     }
-}
+  }
+};
 </script>
 
 <style lang="less" scoped>
 .mic-outter {
-    width: 936px;
+  width: 936px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    margin-left: 16px;
+  margin-left: 16px;
-    .mic-inner {
+  .mic-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-    }
+  }
 }
-
 </style>

src/views/MarketingComparison/mcOSVC/index.vue

@@ -7,35 +7,76 @@
  * @FilePath: /data-show/src/views/MarketingComparison/mcOSVC/index.vue
 -->
 <template>
-    <div class="mos-outter">
+  <div class="mos-outter" v-loading="load">
-        <v-label-div title="整体声量对比">
+    <v-label-div title="整体声量对比"> </v-label-div>
-        </v-label-div>
+    <div class="mos-inner">
-        <div class="mos-inner">
+      <v-echarts :opt="opt"></v-echarts>
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getCountMKT0528C } from "@/api/MarketingComparison/index.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "mcOSVC",
+  name: "mcOSVC",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
+      form: {
-        }
+        token: "",
-    }
+        sJson: "",
-}
+        load: false
+      },
+      opt: {},
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getSComparison;
+      let sourceData = [];
+      arr.forEach((ele) => {
+        let o = {
+          sBrand: ele.brand,
+          sSeriesName: ele.model,
+          sStartTime: ele.startTime,
+          sEndTime: ele.endTime,
+        };
+        sourceData.push(o);
+      });
+      this.form.sJson = JSON.stringify(sourceData); //转成json
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime, this.form);
+      this.load = true;
+      getCountMKT0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        let ds = [];
+        data.forEach((ele) => {
+          dx.push(ele.key);
+          ds.push(ele.value);
+        });
+        this.opt = createSingleColumnar(dx, ds);
+        this.load = false;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .mos-outter {
-    width: 936px;
+  width: 936px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
 }
 .mos-inner {
-    width: 100%;
+  width: 100%;
-    height: calc(100% - 48px);
+  height: calc(100% - 48px);
 }
 </style>

src/views/MarketingComparison/mcTOPMedia/index.vue

@@ -7,236 +7,112 @@
  * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
 -->
 <template>
-    <div class="bcm-outter">
+  <div class="bcm-outter" v-loading="load">
-        <v-label-div title="品牌传播TOP媒体">
+    <v-label-div title="品牌传播TOP媒体"> </v-label-div>
-        </v-label-div>
+    <div class="bcm-inner">
-        <div class="bcm-inner">
+      <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
-            <div class="bcm-item" v-for="(item,index) in list" :key="index">
+        <span class="ss1" :style="{ color: colors[index] }">{{
-                <span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
+          item.key
-                <v-ranking-bcm  v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
+        }}</span>
-            </div>
+        <v-ranking-bcm
-        </div>
+          v-for="(it, n) in item.data"
+          :key="n"
+          :label="it.key"
+          :num="it.num"
+          :val="it.value"
+        ></v-ranking-bcm>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import vRankingBcm from "./v-ranking-bcm"
+import { getSourceCountMKT0528C } from "@/api/MarketingComparison/index.js";
+import vRankingBcm from "./v-ranking-bcm";
 export default {
-    name: "mcTOPMedia",
+  name: "mcTOPMedia",
-    components: {
+  components: {
-       vRankingBcm 
+    vRankingBcm,
+  },
+  data() {
+    return {
+      form: {
+        token: "",
+        sJson: "",
+        load: false
+      },
+      colors: [
+        "#3373CC",
+        "#63AECC",
+        "#54BF93",
+        "#CC9D12",
+        "#CC7733",
+        "#CC5B41",
+      ],
+      arrList: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getSComparison;
+      let sourceData = [];
+      arr.forEach((ele) => {
+        let o = {
+          sBrand: ele.brand,
+          sSeriesName: ele.model,
+          sStartTime: ele.startTime,
+          sEndTime: ele.endTime,
+        };
+        sourceData.push(o);
+      });
+      this.form.sJson = JSON.stringify(sourceData); //转成json
+      this.getData();
     },
-    data() {
+    getData() {
-        return {
+      let obj = Object.assign({}, this.getCtime, this.form);
-            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+      this.load = true;
-            list: [
+      getSourceCountMKT0528C(obj).then((res) => {
-                {
+        let data = res.data || [];
-                    name: '奥迪A4',
+        //往原始数据内添加排名
-                    medias: [
+        data.forEach((ele) => {
-                        {
+          for (let index = 0; index < ele.data.length; index++) {
-                            num: 1,
+            ele.data[index].num = index + 1;
-                            label: '微博',
+          }
-                            val: 1000
+          ele.data = ele.data.slice(0,5);
-                        },
+        });
-                        {
+        this.arrList = data;
-                            num: 2,
+        this.load = false;
-                            label: '字节跳动',
+      });
-                            val: 800
+    },
-                        },
+  },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '宝马525',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '奔驰S600',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                 {
-                    name: '吉利帝豪',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                 {
-                    name: '大众途观',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                },
-                {
-                    name: '别克君威',
-                    medias: [
-                        {
-                            num: 1,
-                            label: '微博',
-                            val: 1000
-                        },
-                        {
-                            num: 2,
-                            label: '字节跳动',
-                            val: 800
-                        },
-                        {
-                            num: 3,
-                            label: '搜狐汽车',
-                            val: 600
-                        },
-                        {
-                            num: 4,
-                            label: '汽车之家',
-                            val: 400
-                        },
-                        {
-                            num: 5,
-                            label: '企鹅网',
-                            val: 300
-                        }
-                    ]
-                }
-            ]
-        }
-    }
 };
 </script>
 
 <style lang="less" scoped>
 .bcm-outter {
+  width: 100%;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-top: 16px;
+  .bcm-inner {
     width: 100%;
-    height: 460px;
+    height: calc(100% - 48px);
-    border: 2px solid #0f2a4d;
+    display: flex;
-    margin-top: 16px;
+    justify-content: flex-start;
-    .bcm-inner {
+    .bcm-item {
-        width: 100%;
+      width: 282px;
-        height: calc(100% - 48px);
+      margin-left: 27px;
-        display: flex;
+      .ss1 {
-        justify-content: flex-start;
+        display: block;
-        .bcm-item {
+        font-size: 18px;
-            width: 282px;
+        color: #fff;
-            margin-left: 27px;
+        font-weight: 500;
-            .ss1 {
+        padding-top: 14px;
-                display: block;
+      }
-                font-size: 18px;
-                color: #fff;
-                font-weight: 500;
-                padding-top: 14px;
-            }
-        }
     }
+  }
 }
 </style>

src/views/MarketingComparison/salesComparison/index.vue

@@ -7,36 +7,77 @@
  * @FilePath: /data-show/src/views/MarketingComparison/salesComparison/index.vue
 -->
 <template>
-    <div class="ssc-outter">
+  <div class="ssc-outter" v-loading="load">
-        <v-label-div title="销量对比">
+    <v-label-div title="销量对比"> </v-label-div>
-        </v-label-div>
+    <div class="ssc-inner">
-        <div class="ssc-inner">
+      <v-echarts :opt="opt"></v-echarts>
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getSalesCountMKT0528C } from "@/api/MarketingComparison/index.js";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "salesComparison",
+  name: "salesComparison",
-    data() {
+  data() {
-        return {
+    return {
-            opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#4fb58c')
+      form: {
-        }
+        token: "",
-    }
+        sJson: "",
-}
+        load: false,
+      },
+      opt: {}
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = this.getSComparison;
+      let sourceData = [];
+      arr.forEach((ele) => {
+        let o = {
+          sBrand: ele.brand,
+          sSeriesName: ele.model,
+          sStartTime: ele.startTime,
+          sEndTime: ele.endTime,
+        };
+        sourceData.push(o);
+      });
+      this.form.sJson = JSON.stringify(sourceData); //转成json
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime, this.form);
+      this.load = true;
+      getSalesCountMKT0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        let ds = [];
+        data.forEach((ele) => {
+          dx.push(ele.key);
+          ds.push(ele.value);
+        });
+        this.opt = createSingleColumnar(dx, ds,"#4fb58c");
+        this.load = false;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .ssc-outter {
-    width: 936px;
+  width: 936px;
-    height: 460px;
+  height: 460px;
-    border: 2px solid #0f2a4d;
+  border: 2px solid #0f2a4d;
-    margin-left: 16px;
+  margin-left: 16px;
-    .ssc-inner {
+  .ssc-inner {
-        width: 100%;
+    width: 100%;
-        height: calc(100% - 48px);
+    height: calc(100% - 48px);
-    }
+  }
 }
 </style>

src/views/WeiboDetails/weiboCommunicationTrend/opt.js

@@ -60,7 +60,7 @@ export default function createOpt(dx = [], ds = []) {
                   let str = bigNumberTransform(value);
                   return str;
                 }
-              },
+            },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型