zx-事件对比

src/api/EventComparison/BrandWeibo.js

@@ -0,0 +1,40 @@
+import httpService from "@/request"
+
+// 获取事件类型
+export function getAffectionsC(params) {
+    let obj =  Object.assign({action: 'getAffectionsC', sType: 'BrandWeiBo'}, 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', iContrastType: 3 }, 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', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/EventComparison/index.js

@@ -84,3 +84,112 @@ export function getListC(params) {
     })
 }
 
+// 事件-正面词云
+export function getPositive(params) {
+    let obj =  Object.assign({action: 'getPositive', sType: 'EventContrast', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-负面词云
+export function getNegative(params) {
+    let obj =  Object.assign({action: 'getNegative', sType: 'EventContrast', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-微博信息量对比
+export function getContrastCount0528C(params) {
+    let obj =  Object.assign({action: 'getContrastCount0528C', sType: 'BrandWeiBo', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-微博互动人数对比
+export function getInteractCount0528C(params) {
+    let obj =  Object.assign({action: 'getInteractCount0528C', sType: 'BrandWeiBo', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-微博调性对比
+export function getBoauthen0528C(params) {
+    let obj =  Object.assign({action: 'getBoauthen0528C', sType: 'BrandWeiBo', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-用户区域分布
+export function getRegionWeiBoC(params) {
+    let obj =  Object.assign({action: 'getRegionWeiBoC', sType: 'BrandWeiBo', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-微博用户画像
+export function getSexMergeWeiBoC(params) {
+    let obj =  Object.assign({action: 'getSexMergeWeiBoC', sType: 'BrandWeiBo', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 事件-尾翼信息趋势
+export function getCountTime0528C(params) {
+    let obj =  Object.assign({action: 'getCountTime0528C', sType: 'BrandWeiYi', iContrastType: 3 }, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+
+
+
+
+

src/views/EventComparison/CWIEC/index.vue

@@ -8,7 +8,7 @@
 -->
 
 <template>
-    <div class="cwiec-outter">
+    <div class="cwiec-outter" v-loading="load">
         <v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}">
         </v-label-div>
         <div class="cwiec-inner">
@@ -18,13 +18,48 @@
 </template>
 
 <script>
+import {getContrastCount0528C} from "@/api/EventComparison";
 import {createSingleColumnar} from "@/utils/gol/singleColumnar"
 export default {
     name: "CWIEC",
     data() {
         return {
-            opt: createSingleColumnar(["事件一", "事件二"],[2200, 1900])
+            form: {
+                token: "",
+                sRele: "",
+                load: false
+            },
+            opt: {}
         }
+    },
+    created() {
+        this.initData();
+    },
+    methods: {
+        initData() {
+           this.form.token = this.getToken;
+           let arr = [];
+           this.getEComparison.forEach(ele => {
+               arr.push(ele.events_id);
+           })
+           this.form.sRele = arr.toString();
+           this.getData()
+       },
+       getData() {
+          let obj = Object.assign({}, this.getCtime2, this.form); 
+          this.load = true;
+          getContrastCount0528C(obj).then(res => {
+              let data = res.data || [];
+              let dx = [];
+              let ds = [];
+              data.forEach(e => {
+                  dx.push(e.key);
+                  ds.push(e.value);
+              });
+              this.opt = createSingleColumnar(dx,ds);
+              this.load = false;
+          })
+       }
     }
 }
 </script>

src/views/EventComparison/cotwiEc/index.vue

@@ -8,34 +8,73 @@
 -->
 
 <template>
-    <div class="cotwiEc-outter">
-        <v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-        </v-label-div>
-        <div class="cotwiEc-inner">
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
+  <div class="cotwiEc-outter" v-loading="load">
+    <v-label-div
+      title="微博互动人数对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="cotwiEc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+import { getInteractCount0528C } from "@/api/EventComparison";
+import { createSingleColumnar } from "@/utils/gol/singleColumnar";
 export default {
-    name: "cotwiEc",
-    data() {
-        return {
-            opt: createSingleColumnar(["事件一", "事件二"],[2200, 1900], '#52bb90')
-        }
-    }
-}
+  name: "cotwiEc",
+  data() {
+    return {
+      opt: createSingleColumnar(["事件一", "事件二"], [2200, 1900], "#52bb90"),
+      form: {
+        token: "",
+        sRele: "",
+        load: false,
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getInteractCount0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        let ds = [];
+        data.forEach((e) => {
+          dx.push(e.key);
+          ds.push(e.value);
+        });
+        this.opt = createSingleColumnar(dx, ds,"#52bb90");
+        this.load = false;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .cotwiEc-outter {
-    width: 472px;
-    height: 412px;
-    .cotwiEc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 472px;
+  height: 412px;
+  .cotwiEc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/EventComparison/inbcEc/index.vue

@@ -7,34 +7,79 @@
  * @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 class="inbcEc-outter" v-loading="load">
+    <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"
+import { getSourcetypeC } from "@/api/EventComparison/BrandWeibo.js";
+import createOpt from "./opt";
 export default {
-    name: "inbcEc",
-    data() {
-        return {
-           opt: createOpt() 
-        }
-    }
-}
+  name: "inbcEc",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sRele: "",
+        load: false
+      },
+      subList: []
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getSourcetypeC(obj).then((res) => {
+        let data = res.data || [];
+        let eventList = [];
+        let dx = [];
+        data.forEach((e) => {
+          let ab = e.Data || {};
+          for (let key in ab) {
+            if (!dx.includes(key)) {
+              dx.push(key);
+            }
+          }
+          eventList.push(e.Name);
+        });
+        this.opt = createOpt(data, dx, eventList);
+        this.load = false
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .inbcEc-outter {
-    width: 944px;
-    height: 412px;
-    .inbcEc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 944px;
+  height: 412px;
+  .inbcEc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/EventComparison/inbcEc/opt.js

@@ -6,7 +6,32 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
  */
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+function createData(dataList = [],dx = []) {
+    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',
+            barGap: 0,
+            barWidth: 16,
+            emphasis: {
+                focus: 'series'
+            },
+            data: a
+        };
+        arr.push(o)
+    })
+    return arr;
+}
+
+export default function createOpt(dataList = [],dx = [], eventList = []) {
+    let info = createData(dataList,dx);
     return {
         grid: {
             top: "56px",
@@ -16,12 +41,18 @@ export default function createOpt() {
             containLabel: true,
         },
         legend: {
-            data: ['事件一', '事件二'],
+            data: eventList,
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontsize: 10
             },
-            y: 12,
-            x: 16
+            y: 10,
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12,
+            formatter: function (name) {
+                return name.length > 5 ? name.substr(0, 15) + "..." : name;
+            }
         },
         tooltip: {
             trigger: "axis",
@@ -45,7 +76,7 @@ export default function createOpt() {
                         color: "#fff",
                     },
                 },
-                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+                data: dx
             }
         ],
         yAxis: [
@@ -57,6 +88,12 @@ export default function createOpt() {
                         color: "#FFF",
                     },
                 },
+                axisLabel: {
+                    formatter: (value) => {
+                      let str = bigNumberTransform(value);
+                      return str;
+                    }
+                  },
                 splitLine: {
                     lineStyle: {
                         type: "dashed", // y轴分割线类型
@@ -65,27 +102,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]
-            }
-            
-        ]
+        series: info
     }
 }

src/views/EventComparison/positiveAndNegativeWordCloudContrast/index.vue

@@ -7,65 +7,127 @@
  * @FilePath: /data-show/src/views/EventComparison/positiveAndNegativeWordCloudContrast/index.vue
 -->
 <template>
-    <div class="panwc-outter">
-       <div class="panwc-inner">
-           <div class="panwc-d1">
-               <v-label-div title="正负词云对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-                   <v-tab-group :btns="['正面','负面']"></v-tab-group>
-               </v-label-div> 
-               <span class="p-d1-s1">事件一</span>
-               <div class="panwc-inner">
-                  <v-echarts :opt="opt"></v-echarts> 
-               </div>
-           </div>
-           <div class="panwc-d1">
-               <v-label-div title="" :showLine="false" :eStyle="{'border-style': 'none'}">
-                   <v-tab-group :btns="['正面','负面']"></v-tab-group>
-               </v-label-div> 
-               <span class="p-d1-s1" style="color: #54BF93">事件二</span>
-               <div class="panwc-inner">
-                  <v-echarts :opt="opt"></v-echarts> 
-               </div>
-           </div>
-       </div>
+  <div class="panwc-outter">
+    <div class="panwc-inner">
+      <div class="panwc-d1">
+        <v-label-div
+          title="正负词云对比"
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+          <v-tab-group :btns="['正面', '负面']"></v-tab-group>
+        </v-label-div>
+        <span class="p-d1-s1">事件一</span>
+        <div class="panwc-inner">
+          <v-echarts :opt="opt"></v-echarts>
+        </div>
+      </div>
+      <div class="panwc-d1">
+        <v-label-div
+          title=""
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+          <v-tab-group :btns="['正面', '负面']"></v-tab-group>
+        </v-label-div>
+        <span class="p-d1-s1" style="color: #54bf93">事件二</span>
+        <div class="panwc-inner">
+          <v-echarts :opt="opt"></v-echarts>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getNegative } from "@/api/EventComparison";
+import { getPositive } from "@/api/EventComparison";
+//import createWordCloud from "@/utils/gol/bubbleWord";
+import createOpt from "./opt";
 export default {
-    name: "positiveAndNegativeWordCloudContrast",
-    data() {
-        return {
-            opt: createOpt()
-        }
-    }
-}
+  name: "positiveAndNegativeWordCloudContrast",
+  data() {
+    return {
+      opt: createOpt(),
+      form: {
+        token: "",
+        sRele: "",
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
+    },
+    getData() {
+      Promise.all([this.getPoz(), this.getNeg()]).then(() => {
+        // 什么也不执行
+        //this.handlerTab(0);
+        //this.load = false;
+      });
+    },
+    getPoz() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getPositive(obj)
+          .then((res) => {
+            let data = res.data || {};
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    getNeg() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        getNegative(obj)
+          .then((res) => {
+            let data = res.data || {};
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .panwc-outter {
-   width: 100%;
-   .panwc-inner {
-       width: 100%;
-       display: flex;
-       justify-content: flex-start;
-       .panwc-d1 {
-           width: 944px;
-           height: 412px;
-           .p-d1-s1 {
-               padding-left: 16px;
-               display: block;
-               font-size: 16px;
-               color: #3373CC;
-               height: 24px;
-               width: calc(100% - 16px);
-           }
-           .panwc-inner {
-               width: 100%;
-               height: calc(100% - 74px);
-           }
-       }
-   }
+  width: 100%;
+  .panwc-inner {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    .panwc-d1 {
+      width: 944px;
+      height: 412px;
+      .p-d1-s1 {
+        padding-left: 16px;
+        display: block;
+        font-size: 16px;
+        color: #3373cc;
+        height: 24px;
+        width: calc(100% - 16px);
+      }
+      .panwc-inner {
+        width: 100%;
+        height: calc(100% - 74px);
+      }
+    }
+  }
 }
 </style>

src/views/EventComparison/tirEc/index.vue

@@ -7,34 +7,75 @@
  * @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 class="te-outter" v-loading="load">
+    <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"
+import { getCountTime0528C } from "@/api/EventComparison/index.js";
+import createOpt from "./opt";
 export default {
-    name: "tirEc",
-    data() {
-        return {
-           opt: createOpt() 
-        }
-    }
+  name: "tirEc",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sRele: "",
+        load: false
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getCountTime0528C(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>
 .te-outter {
-    width: 944px;
-    height: 412px;
-    .te-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 944px;
+  height: 412px;
+  .te-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/EventComparison/tirEc/opt.js

@@ -6,12 +6,46 @@
  * @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 (val.key.length > 5){
+                val.key = val.key.substr(0, 15) + "..."
+            }
+            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 +62,13 @@ export default function createOpt() {
         legend: {
             icon: 'roundRect',
             textStyle: { //图例文字的样式
-                color: '#fff'
+                color: '#fff',
+                fontsize: 10
             },
-            y: 12,
-            x: 16
+            y: 10,
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12
         },
         xAxis: {
             type: 'category',
@@ -45,7 +82,13 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+            axisLabel: {
+                formatter: (value) => {
+                    let str = value.substring(10, 16)
+                    return str;
+                }
+            },
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -55,6 +98,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -62,32 +111,6 @@ export default function createOpt() {
                 },
             },
         },
-        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]
-            }
-            
-        ]
+        series: data
     }
 }

src/views/EventComparison/ttmEc/index.vue

@@ -8,68 +8,118 @@
 -->
 
 <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 class="ttm-outter" v-loading="load">
+    <v-label-div
+      title="尾翼TOP媒体"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    />
+    <div class="ttm-inner">
+      <div class="ttm-item" v-for="(item, index) in showData" :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"
+import { getSourceTopCount0528C } from "@/api/EventComparison/BrandWeibo.js";
+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')
-                },
-            ],
-          
-        };
+  name: "ttmEc",
+  data() {
+    return {
+      colors: ["#3373CC", "#63AECC"],
+      form: {
+        token: "",
+        sRele: "",
+        load: false
+      },
+      showData: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
     },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getSourceTopCount0528C(obj).then((res) => {
+        let data = res.data || [];
+        let sourceData = [];
+        let colorList = this.colors;
+        let index = 0;
+        data.forEach((ele) => {
+          let mediaList = [];
+          let valueList = [];
+          let title = ele.key;
+          ele.value.forEach((e) => {
+            mediaList.push(e.key);
+            valueList.push(e.value);
+          });
+          if(title.length>5) {
+              title = title.substr(0,15) + "..."
+          }
+          let o = {
+            name: title,
+            drawOpt: createSingleColumnar(
+              mediaList,
+              valueList,
+              colorList[index]
+            ),
+          };
+          index += 1;
+          sourceData.push(o);
+          this.showData = sourceData;
+        });
+        this.load = false
+      });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .ttm-outter {
+  width: 100%;
+  height: auto;
+  .ttm-inner {
     width: 100%;
     height: auto;
-    .ttm-inner {
+    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: 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);
-            }
-        }
+        height: calc(100% - 40px);
+      }
     }
+  }
 }
 </style>

src/views/EventComparison/uadEc/index.vue

@@ -7,53 +7,143 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
 -->
 <template>
-    <div class="wua-outter">
-      <v-label-div title="用户区域分布" :showLine="false" :eStyle="{'border-style': 'none'}">
-          <v-tab-group :btns="['事件一','事件二']"></v-tab-group>
-      </v-label-div>
-      <div class="wua-inner">
-          <div class="d1">
-            <v-echarts :opt="opt1"></v-echarts>
-          </div>
-          <div class="d2">
-             <v-echars-map :opt="opt2"></v-echars-map> 
-          </div>
+  <div class="wua-outter" v-loading="load">
+    <v-label-div
+      title="用户区域分布"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group :btns="this.eventArr" @change="handlerTab"></v-tab-group>
+    </v-label-div>
+    <div class="wua-inner">
+      <div class="d1">
+        <v-echarts :opt="opt1"></v-echarts>
+      </div>
+      <div class="d2">
+        <v-echars-map :opt="opt2"></v-echars-map>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
-import createOptD1 from "./opt1"
-import createOptD2 from './opt2'
+import {getRegionWeiBoC} from "@/api/EventComparison";
+import createOptD1 from "./opt1";
+import createOptD2 from "./opt2";
 export default {
-    name: "uadEc",
-    data() {
-        return {
-            opt1: createOptD1(),
-            opt2: createOptD2()
-        }
-    }
-}
+  name: "uadEc",
+  data() {
+    return {
+      opt1: createOptD1(),
+      opt2: createOptD2(),
+      form: {
+        token: "",
+        sRele: "",
+        load: false
+      },
+      dataSource: [],
+      eventArr: [],
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      Promise.all([this.getData()]).then(() => {
+        // 什么也不执行
+        this.handlerTab(0);
+      });
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+        this.load = true;
+        getRegionWeiBoC(obj)
+          .then((res) => {
+            let data = res.data || [];
+            //dx省份 ds数据 dm省份和数据的对象数组
+            let mapArr = [];
+            let eventList = [];
+            data.forEach((ele) => {
+              let dx = [];
+              let ds = [];
+              let dm = this.toArr(ele.Data);
+              dm.forEach((e) => {
+                //处理直辖市
+                e.name = e.name.replace('省', '');
+                dx.push(e.name);
+                ds.push(e.value);
+              });
+              let o = {
+                name: ele.Name,
+                dx: dx,
+                ds: ds,
+                dm: dm,
+              };
+              if(ele.Name.length > 5){
+                  let subStr = ele.Name.substr(0, 7) + "..."
+                  eventList.push(subStr);
+              } else {
+                eventList.push(ele.Name);
+              }
+              mapArr.push(o);
+            });
+            this.dataSource = mapArr;
+            this.eventArr = eventList;
+            this.load = false;
+            resolve(data);
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          name: key,
+          value: obj[key] * 1,
+        };
+        arr.push(o);
+      }
+      return arr;
+    },
+    // 切换数据
+    handlerTab(n) {
+      this.opt1 = createOptD1(this.dataSource[n].dx, this.dataSource[n].ds);
+      this.opt2 = createOptD2(this.dataSource[n].dm);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wua-outter {
-    width: 944px;
-    height: 412px;
-    .wua-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-        display: flex;
-        justify-content: flex-start;
-        .d1 {
-          width: 479px;
-          height: 100%;  
-        }
-        .d2 {
-            width: 465px;
-            height: 100%;
-            margin-left: 16px;
-        }
+  width: 944px;
+  height: 412px;
+  .wua-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 479px;
+      height: 100%;
+    }
+    .d2 {
+      width: 465px;
+      height: 100%;
+      margin-left: 16px;
     }
+  }
 }
 </style>

src/views/EventComparison/uadEc/opt1.js

@@ -9,7 +9,8 @@
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
  */
 import * as echarts from "echarts";
-export default function createOptD1() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOptD1(dx = [],ds = []) {
     return {
         grid: {
             left: '4%',
@@ -36,6 +37,12 @@ export default function createOptD1() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -45,7 +52,7 @@ export default function createOptD1() {
         },
         yAxis: {
             type: 'category',
-            data: ['山西省',  '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
+            data: dx,
             axisTick: {
                 show: false,
             },
@@ -55,13 +62,14 @@ export default function createOptD1() {
                     color: "#fff",
                 },
             },
+            inverse: true
         },
         series: [
             {
                 name: '2011',
                 type: 'bar',
                 barWidth: 24,
-                data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
+                data: ds,
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                     offset: 0,
                     color: '#010B19'

src/views/EventComparison/uadEc/opt2.js

@@ -15,7 +15,7 @@ for (var i = 0; i < provArr.length; i++) {
     var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
     ini_data.push(str2);
 }
-export default function createOptD2() {
+export default function createOptD2(dm = []) {
     return {
         tooltip: {
             trigger: "item",
@@ -59,7 +59,7 @@ export default function createOptD2() {
         },
         series: [
             {
-                name: "微博区域",
+                name: "用户区域",
                 type: "map",
                 mapType: "china",
                 roam: false,
@@ -95,38 +95,7 @@ export default function createOptD2() {
                 //         areaColor: '#3edffe'
                 //     }
                 // },
-                data: [
-                    {
-                        name: "河北省",
-                        value: 1000,
-                        // selected: true,
-                    },
-                    {
-                        name: "浙江省",
-                        value: 1100,
-                        // selected: true
-                    },
-                    {
-                        name: "山东省",
-                        value: 1200,
-                        // selected: true
-                    },
-                    {
-                        name: "山西省",
-                        value: 1300,
-                        // selected: true
-                    },
-                    {
-                        name: "上海市",
-                        value: 1400,
-                        // selected: true
-                    },
-                    {
-                        name: "江苏省",
-                        value: 1500,
-                        // selected: true
-                    }
-                ]
+                data: dm
 
             }
         ]

src/views/EventComparison/wbcEc/index.vue

@@ -8,34 +8,77 @@
 -->
 
 <template>
-    <div class="wbcEc-outter">
-        <v-label-div title="微博大V对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-        </v-label-div>
-        <div class="wbcEc-inner">
-            <v-echarts :opt="opt"></v-echarts>
-        </div>
+  <div class="wbcEc-outter" v-loading="load">
+    <v-label-div
+      title="微博大V对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+    </v-label-div>
+    <div class="wbcEc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getBoauthen0528C } from "@/api/EventComparison";
+import createOpt from "./opt";
 export default {
-    name: "wbcEc",
-    data() {
-        return {
-            opt: createOpt()
-        }
-    }
-}
+  name: "wbcEc",
+  data() {
+    return {
+      opt: {},
+      form: {
+        token: "",
+        sRele: "",
+        load: false,
+      },
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getBoauthen0528C(obj).then((res) => {
+        let data = res.data || [];
+        let dx = [];
+        data.forEach((ele) => {
+          let ab = ele.value || [];
+          // 匹配所有出现过的媒体，放入dx中
+          ab.forEach((e) => {
+            if (!dx.includes(e.key) && e.value != 0) {
+              dx.push(e.key);
+            }
+          });
+        });
+        this.opt = createOpt(dx, data);
+        this.load = false;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wbcEc-outter {
-    width: 472px;
-    height: 412px;
-    .wbcEc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 472px;
+  height: 412px;
+  .wbcEc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/EventComparison/wbcEc/opt.js

@@ -6,7 +6,36 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+function createData(dataList = [], dx = []) {
+    let arr = [];
+    dataList.forEach(ele => {
+      let a = [];
+      let Data = ele.value || [];
+      dx.forEach(e => {
+        Data.forEach(ex => {
+          if (ex.key === e) {
+            a.push(ex.value)
+          }
+        })
+      })
+      let o = {
+        name: ele.key,
+        type: 'bar',
+        stack: 'total',
+        barWidth: 24,
+        emphasis: {
+          focus: 'series'
+        },
+        data: a
+      };
+      arr.push(o);
+    })
+    return arr;
+  }
+
+export default function createOpt(dx = [], dataList = []) {
+    let info = createData(dataList, dx);
     return {
         grid: {
             left: 16,
@@ -30,7 +59,12 @@ export default function createOpt() {
                 color: '#fff'
             },
             y: 10,
-            x: 16
+            x: 16,
+            itemWidth: 12,
+            itemHeight: 12,
+            formatter: function (name) {
+                return name.length > 5 ? name.substr(0, 7) + "..." : name;
+            }
         },
         xAxis: {
             type: 'category',
@@ -43,7 +77,7 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
-            data: ['名人', '媒体', '企业', '政府', '个人大v']
+            data: dx
         },
         yAxis: {
             type: 'value',
@@ -53,6 +87,12 @@ export default function createOpt() {
                     color: "#fff",
                 },
             },
+            axisLabel: {
+                formatter: (value) => {
+                  let str = bigNumberTransform(value);
+                  return str;
+                }
+              },
             splitLine: {
                 lineStyle: {
                     type: "dashed", // y轴分割线类型
@@ -60,28 +100,7 @@ export default function createOpt() {
                 },
             },
         },
-        series: [
-            {
-              name: '事件一',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [320, 302, 301, 334, 390]
-            },
-            {
-              name: '事件二',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [120, 132, 101, 134, 90]
-            },
-          ]
+        series: info
     }
 
 }

src/views/EventComparison/wtcEc/index.vue

@@ -8,38 +8,66 @@
 -->
 
 <template>
-    <div class="wtcEc-outter">
-         <v-label-div title="微博调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
-             <v-tab-group :btns="['事件1', '事件2']"></v-tab-group>
-        </v-label-div>
-        <div class="wtcEc-inner">
-            <v-echarts :opt="opt" ></v-echarts>
-        </div>
+  <div class="wtcEc-outter">
+    <v-label-div
+      title="微博调性对比"
+      :showLine="false"
+      :eStyle="{ 'border-style': 'none' }"
+    >
+      <v-tab-group :btns="['事件1', '事件2']"></v-tab-group>
+    </v-label-div>
+    <div class="wtcEc-inner">
+      <v-echarts :opt="opt"></v-echarts>
     </div>
+  </div>
 </template>
 
 <script>
-import createOpt from "./opt"
+import { getAffectionsC } from "@/api/EventComparison/BrandWeibo.js";
+import createOpt from "./opt";
 export default {
-    name: "wtcEc",
-    data() {
-        return {
-            opt: createOpt()
-        }
+  name: "wtcEc",
+  data() {
+    return {
+      opt: createOpt(),
+      form: {
+        token: "",
+        sRele: "",
+      },
+      sourceData: []
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
     },
-    methods: {
-         
-    }
-}
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      getAffectionsC(obj).then((res) => {
+        let data = res.data || [];
+        this.sourceData = data;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .wtcEc-outter {
-    width: 472px;
-    height: 412px;
-    .wtcEc-inner {
-        width: 100%;
-        height: calc(100% - 48px);
-    }
+  width: 472px;
+  height: 412px;
+  .wtcEc-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+  }
 }
 </style>

src/views/EventComparison/wupEc/index.vue

@@ -7,87 +7,192 @@
  * @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
 -->
 <template>
-    <div class="wup-outter">
-        <div class="wup-inner">
-            <div class="d1">
-                <v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
-                    <span style="color: #3373CC ">事件一</span>
-                </v-label-div>
-                <div class="d1x">
-                    <div class="dd1">
-                        <v-echarts :opt="opt1"></v-echarts>
-                    </div>
-                    <div class="dd2">
-                        <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                        <v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                        <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
-                    </div>
-                </div>
+  <div class="wup-outter" v-loading="load">
+    <div class="wup-inner">
 
-            </div>
-            <div class="d1">
-                <v-label-div title="" :showLine="false" :eStyle="{'border-style': 'none'}">
-                    <span style="color: #54BF93 ">事件二</span>
-                </v-label-div>
-                <div class="d1x">
-                    <div class="dd1">
-                        <v-echarts :opt="opt2">
-                        </v-echarts>
-                    </div>
-                    <div class="dd2" style="margin-right: 16px">
-                        <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                        <v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
-                        <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
-                    </div>
-                </div>
+      <div class="d1">
+        <v-label-div
+          title="微博用户画像"
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+        <span style="color: #3373cc">{{eventList[0]}}</span>
+        </v-label-div>
+        <div class="d1x">
+          <div class="dd1">
+            <v-echarts :opt="opt1"></v-echarts>
+          </div>
+          <div class="dd2">
+            <v-label-ctx
+              v-for="(item, index) in showData1"
+              :key="index"
+              :label="item.name"
+              :cont="item.value"
+              :percentage="((item.value / totalData1) * 100).toFixed(2) + '%'"
+              :color="colors[index]"
+              :eStyle="{ height: '96px' }"
+            ></v-label-ctx>
+          </div>
+        </div>
+      </div>
 
-            </div>
+      <div class="d1">
+        <v-label-div
+          title=""
+          :showLine="false"
+          :eStyle="{ 'border-style': 'none' }"
+        >
+        <span style="color: #54bf93">{{eventList[1]}}</span>
+        </v-label-div>
+        <div class="d1x">
+          <div class="dd1">
+            <v-echarts :opt="opt2"> </v-echarts>
+          </div>
+          <div class="dd2" style="margin-right: 16px">
+            <v-label-ctx
+              v-for="(item, index) in showData2"
+              :key="index"
+              :label="item.name"
+              :cont="item.value"
+              :percentage="((item.value / totalData2) * 100).toFixed(2) + '%'"
+              :color="colors[index]"
+              :eStyle="{ height: '96px' }"
+            ></v-label-ctx>
+          </div>
         </div>
+      </div>
+
     </div>
+  </div>
 </template>
 
 <script>
+import { getSexMergeWeiBoC } from "@/api/EventComparison/index.js";
 import createOpt1 from "./opt1";
 import createOpt2 from "./opt2";
 export default {
-    name: "wupEc",
-    data() {
-        return {
-            opt1: createOpt1(),
-            opt2: createOpt2(),
+  name: "wupEc",
+  data() {
+    return {
+      opt1: {},
+      opt2: {},
+      form: {
+        token: "",
+        sRele: "",
+        load: false,
+      },
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
+      showData1: [],
+      showData2: [],
+      totalData1: 0,
+      totalData2: 0,
+      eventList: []
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.form.token = this.getToken;
+      let arr = [];
+      this.getEComparison.forEach((ele) => {
+        arr.push(ele.events_id);
+      });
+      this.form.sRele = arr.toString();
+      this.getData();
+    },
+    getData() {
+      let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
+      getSexMergeWeiBoC(obj).then((res) => {
+        let data = res.data || [];
+        let eList = [];
+        data.forEach(e=> {
+            let subStr = e.Name.substr(0,7) + "...";
+            eList.push(subStr);
+        })
+        this.eventList = eList;
+        this.showData1 = this.toArr(data[0].Data.sex);
+        this.showData2 = this.toArr(data[1].Data.sex);
+        this.totalData1 =
+          this.showData1[0].value * 1 +
+          this.showData1[1].value * 1 +
+          this.showData1[2].value * 1;
+        this.totalData2 =
+          this.showData2[0].value * 1 +
+          this.showData2[1].value * 1 +
+          this.showData2[2].value * 1;
+        this.opt1 = createOpt1(this.showData1, this.colors);
+        this.opt2 = createOpt2(this.showData2, this.colors);
+        this.load = false;
+      });
+    },
+    //将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          name: key,
+          value: obj[key] * 1,
         };
+        arr.push(o);
+      }
+      return arr;
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .wup-outter {
-    width: 944px;
-    height: 412px;
-    .wup-inner {
+  width: 944px;
+  height: 412px;
+  .wup-inner {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    .d1 {
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+      .d1x {
         width: 100%;
+        height: calc(100% - 48px);
         display: flex;
         justify-content: flex-start;
-        .d1 {
-            width: 50%;
-            height: 100%;
-            overflow: hidden;
-            .d1x {
-                width: 100%;
-                height: calc(100% - 48px);
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-            }
-            .dd1 {
-                width: 280px;
-                height: 280px;
-            }
-            .dd2 {
-                width: 160px;
-                height: 100%;
-            }
-        }
+        align-items: center;
+      }
+      .dd1 {
+        width: 280px;
+        height: 280px;
+      }
+      .dd2 {
+        width: 160px;
+        height: 100%;
+      }
     }
+  }
 }
 </style>

src/views/EventComparison/wupEc/opt1.js

@@ -7,7 +7,32 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt1() {
+
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value,
+      name: ele.name,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+          //给第一个设置0，第四个设置1，就是垂直渐变
+          offset: 0,
+          color: 'black'
+        }, {
+          offset: 1,
+          color: colors[index]
+        }])
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+
+export default function createOpt1(ds = [], color = []) {
+    const data = createData(ds, color);
     return {
         series: [
             {
@@ -18,51 +43,24 @@ export default function createOpt1() {
               label: {
                 show: false,
                 position: 'center',
-                fontSize: '40',
+                lineHeight: 28,
                 color: "#ffff",
             },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '20',
                   color: "#ffff",
+                  fontWeight: 'bold',
                   formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
+                    return p.data.name + '\n' + p.percent+'%' + '\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'
-                 }])} },
-              ],
+              data: data
 
             },
             {
@@ -78,35 +76,7 @@ export default function createOpt1() {
                   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'
-                 }])} },
-                ],
+                data: data
   
               }
           ]

src/views/EventComparison/wupEc/opt2.js

@@ -7,7 +7,32 @@
  * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
  */
 import * as echarts from "echarts";
-export default function createOpt2() {
+
+function createData(ds = [], colors) {
+  let arr = [];
+  ds.map((ele, index) => {
+    let obj = {
+      value: ele.value,
+      name: ele.name,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+          //给第一个设置0，第四个设置1，就是垂直渐变
+          offset: 0,
+          color: 'black'
+        }, {
+          offset: 1,
+          color: colors[index]
+        }])
+      }
+    }
+    arr.push(obj)
+  })
+  return arr;
+}
+
+export default function createOpt2(ds = [], color = []) {
+    const data = createData(ds, color);
     return {
         series: [
             {
@@ -18,51 +43,24 @@ export default function createOpt2() {
               label: {
                 show: false,
                 position: 'center',
-                fontSize: '40',
+                lineHeight: 28,
                 color: "#ffff",
             },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: '40',
+                  fontSize: '20',
                   color: "#ffff",
+                  fontWeight: 'bold',
                   formatter: (p)=>{
-                    return p.data.name + '\n' + p.data.value; 
+                    return p.data.name + '\n' + p.percent+'%' + '\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'
-                 }])} },
-              ],
+              data: data
 
             },
             {
@@ -78,35 +76,7 @@ export default function createOpt2() {
                   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'
-                 }])} },
-                ],
+                data: data
   
               }
           ]