zx-事件对比

src/api/EventComparison/BrandWeibo.js

@@ -1,8 +1,8 @@
 import httpService from "@/request"
 
-// 获取事件类型
+// 微博调性对比
 export function getAffectionsC(params) {
-    let obj =  Object.assign({action: 'getAffectionsC', sType: 'BrandWeiBo'}, params)
+    let obj =  Object.assign({action: 'getAffectionsC', sType: 'BrandWeiBo', iContrastType: 3}, params)
     return httpService({
         url: `/api/v6.ashx`,
         method: 'post',

src/api/EventComparison/index.js

@@ -85,8 +85,8 @@ export function getListC(params) {
 }
 
 // 事件-正面词云
-export function getPositive(params) {
-    let obj =  Object.assign({action: 'getPositive', sType: 'EventContrast', iContrastType: 3 }, params)
+export function getPositiveC(params) {
+    let obj =  Object.assign({action: 'getPositiveC', sType: 'EventContrast',iContrastType: 3  }, params)
     return httpService({
         url: `/api/v6.ashx`,
         method: 'post',
@@ -98,8 +98,8 @@ export function getPositive(params) {
 }
 
 // 事件-负面词云
-export function getNegative(params) {
-    let obj =  Object.assign({action: 'getNegative', sType: 'EventContrast', iContrastType: 3 }, params)
+export function getNegativeC(params) {
+    let obj =  Object.assign({action: 'getNegativeC', sType: 'EventContrast',iContrastType: 3 }, params)
     return httpService({
         url: `/api/v6.ashx`,
         method: 'post',

src/views/EventComparison/etc-cc/roundatacc/opt.js

@@ -38,12 +38,12 @@ export default function createOpt(arr = []) {
             {
               name: 'Access From0',
               type: 'pie',
-              radius: ['70%', '92%'],
+              radius: ['63%', '77%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
                 position: 'center',
-                lineHeight: 40
+                lineHeight: 32
               },
               emphasis: {
                 label: {
@@ -64,7 +64,7 @@ export default function createOpt(arr = []) {
             {
                 name: 'Access From1',
                 type: 'pie',
-                radius: ['96%', '100%'],
+                radius: ['80%', '84%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: false,

src/views/EventComparison/positiveAndNegativeWordCloudContrast/index.vue

@@ -7,7 +7,7 @@
  * @FilePath: /data-show/src/views/EventComparison/positiveAndNegativeWordCloudContrast/index.vue
 -->
 <template>
-  <div class="panwc-outter">
+  <div class="panwc-outter" v-loading="load">
     <div class="panwc-inner">
       <div class="panwc-d1">
         <v-label-div
@@ -15,11 +15,14 @@
           :showLine="false"
           :eStyle="{ 'border-style': 'none' }"
         >
-          <v-tab-group :btns="['正面', '负面']"></v-tab-group>
+          <v-tab-group
+            :btns="['正面', '负面']"
+            @change="handlerTab1"
+          ></v-tab-group>
         </v-label-div>
-        <span class="p-d1-s1">事件一</span>
+        <span class="p-d1-s1">{{ eventData1.name }}</span>
         <div class="panwc-inner">
-          <v-echarts :opt="opt"></v-echarts>
+          <v-echarts :opt="opt1"></v-echarts>
         </div>
       </div>
       <div class="panwc-d1">
@@ -28,11 +31,16 @@
           :showLine="false"
           :eStyle="{ 'border-style': 'none' }"
         >
-          <v-tab-group :btns="['正面', '负面']"></v-tab-group>
+          <v-tab-group
+            :btns="['正面', '负面']"
+            @change="handlerTab2"
+          ></v-tab-group>
         </v-label-div>
-        <span class="p-d1-s1" style="color: #54bf93">事件二</span>
+        <span class="p-d1-s1" style="color: #54bf93">{{
+          eventData2.name
+        }}</span>
         <div class="panwc-inner">
-          <v-echarts :opt="opt"></v-echarts>
+          <v-echarts :opt="opt2"></v-echarts>
         </div>
       </div>
     </div>
@@ -40,19 +48,31 @@
 </template>
 
 <script>
-import { getNegative } from "@/api/EventComparison";
-import { getPositive } from "@/api/EventComparison";
-//import createWordCloud from "@/utils/gol/bubbleWord";
-import createOpt from "./opt";
+import { getNegativeC } from "@/api/EventComparison/index.js";
+import { getPositiveC } from "@/api/EventComparison/index.js";
+import createWordCloud from "@/utils/gol/bubbleWord";
+//import createOpt from "./opt";
 export default {
   name: "positiveAndNegativeWordCloudContrast",
   data() {
     return {
-      opt: createOpt(),
+      opt1: {},
+      opt2: {},
       form: {
         token: "",
         sRele: "",
       },
+      eventData1: {
+        name: "",
+        positive: {},
+        negative: {},
+      },
+      eventData2: {
+        name: "",
+        positive: {},
+        negative: {},
+      },
+      load: false,
     };
   },
   created() {
@@ -69,19 +89,24 @@ export default {
       this.getData();
     },
     getData() {
+      this.load = true;
       Promise.all([this.getPoz(), this.getNeg()]).then(() => {
-        // 什么也不执行
-        //this.handlerTab(0);
-        //this.load = false;
+        this.handlerTab1(0);
+        this.handlerTab2(0);
+        this.load = false;
       });
     },
     getPoz() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
-        getPositive(obj)
+        getPositiveC(obj)
           .then((res) => {
-            let data = res.data || {};
-            resolve(data);
+            let data = res.data;
+            this.eventData1.name = data[0].Name;
+            this.eventData2.name = data[1].Name;
+            this.eventData1.positive = data[0].Data;
+            this.eventData2.positive = data[1].Data;
+            resolve(res);
           })
           .catch(() => {
             reject(false);
@@ -91,16 +116,32 @@ export default {
     getNeg() {
       return new Promise((resolve, reject) => {
         let obj = Object.assign({}, this.getCtime2, this.form);
-        getNegative(obj)
+        getNegativeC(obj)
           .then((res) => {
-            let data = res.data || {};
-            resolve(data);
+            let data = res.data;
+            this.eventData1.negative = data[0].Data;
+            this.eventData2.negative = data[1].Data;
+            resolve(res);
           })
           .catch(() => {
             reject(false);
           });
       });
     },
+    handlerTab1(n) {
+      if (n === 0) {
+        this.opt1 = createWordCloud(this.eventData1.positive);
+      } else if (n === 1) {
+        this.opt1 = createWordCloud(this.eventData1.negative);
+      }
+    },
+    handlerTab2(n) {
+      if (n === 0) {
+        this.opt2 = createWordCloud(this.eventData2.positive);
+      } else if (n === 1) {
+        this.opt2 = createWordCloud(this.eventData2.negative);
+      }
+    },
   },
 };
 </script>

src/views/EventComparison/wtcEc/index.vue

@@ -8,13 +8,13 @@
 -->
 
 <template>
-  <div class="wtcEc-outter">
+  <div class="wtcEc-outter" v-loading="load">
     <v-label-div
       title="微博调性对比"
       :showLine="false"
       :eStyle="{ 'border-style': 'none' }"
     >
-      <v-tab-group :btns="['事件1', '事件2']"></v-tab-group>
+      <v-tab-group :btns="eventList" @change="handlerTab"></v-tab-group>
     </v-label-div>
     <div class="wtcEc-inner">
       <v-echarts :opt="opt"></v-echarts>
@@ -29,12 +29,36 @@ export default {
   name: "wtcEc",
   data() {
     return {
-      opt: createOpt(),
+      opt: {},
       form: {
         token: "",
         sRele: "",
       },
-      sourceData: []
+      load: false,
+      colors: [
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+        "#54BF93",
+        "#3373CC",
+        "#CC9D12",
+        "#f15c80",
+        "#e4d354",
+        "#8085e8",
+        "#8d4653",
+        "#91e8e1",
+        "#f7a35c",
+        "#90ed7d",
+      ],
+      eventList: [],
+      showData: []
     };
   },
   created() {
@@ -52,11 +76,42 @@ export default {
     },
     getData() {
       let obj = Object.assign({}, this.getCtime2, this.form);
+      this.load = true;
       getAffectionsC(obj).then((res) => {
         let data = res.data || [];
-        this.sourceData = data;
+        let eList = [];
+        let dList = [];
+        data.forEach(e => {
+            let subStr = e.Name;
+            if(subStr.length > 5){
+                eList.push(subStr.substr(0, 4))
+            } else {
+                eList.push(subStr)
+            }
+            dList.push(this.toArr(e.Data))
+        })
+        this.eventList = eList;
+        this.showData = dList;
+        this.opt = createOpt(this.showData[0],this.colors);
+        this.load = false;
       });
     },
+    // 将对象变成数组
+    toArr(obj) {
+      let arr = [];
+      for (let key in obj) {
+        let o = {
+          key: key,
+          value: obj[key],
+        };
+        arr.push(o);
+      }
+      return arr;
+    },
+    //切换数据
+    handlerTab(n) {
+      this.opt = createOpt(this.showData[n],this.colors);
+    },
   },
 };
 </script>

src/views/EventComparison/wtcEc/opt.js

@@ -6,8 +6,33 @@
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
  */
+
+function createData(ds = [], colors) {
+   let arr = [];
+   ds.map((ele, index) => {
+     let obj = {
+       value: ele.value,
+       name: ele.key,
+       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;
+ }
+
 import * as echarts from "echarts";
-export default function createOpt() {
+export default function createOpt(ds = [], color = []) {
+   const data = createData(ds, color);
     return {
       legend: {
          textStyle: { //图例文字的样式
@@ -20,12 +45,12 @@ export default function createOpt() {
             {
               name: 'Access From0',
               type: 'pie',
-              radius: ['60%', '70%'],
+              radius: ['50%', '61%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
                 position: 'center',
-                lineHeight: 40
+                lineHeight: 32
               },
               emphasis: {
                 label: {
@@ -34,48 +59,19 @@ export default function createOpt() {
                   color: "#ffff",
                   fontWeight: 'bold',
                   formatter: function(p) {
-                      return `${p.data.name}\n25%\n${p.data.value}`
+                      return `${p.data.name}\n${p.percent}%\n${p.data.value}`
                   }
                 }
               },
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 2000, 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: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-              ],
+              data: data
             },
             {
                 name: 'Access From1',
                 type: 'pie',
-                radius: ['74%', '78%'],
+                radius: ['64%', '67%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: false,
@@ -85,37 +81,7 @@ export default function createOpt() {
                   show: false
                 },
                 center: ['50%', '50%'],//边框位置
-                data: [
-                  { value: 2000, 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: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#54BF93'
-                 }])} },
-                 { value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
-                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-                    //给第一个设置0，第四个设置1，就是垂直渐变
-                    offset: 0,
-                    color: 'black'
-                 }, {
-                    offset: 1,
-                    color: '#b38b14'
-                 }])} },
-               
-                ],
+                data: data
               }
           ]
     }