liyongli il y a 3 ans
Parent
commit
14243e8355

+ 56 - 34
src/views/AdvertisingEye/components/distribution.vue

@@ -185,19 +185,62 @@ export default {
         height: 524,
       });
       let k = [],
-        item = [], 
-        max = list[0][this.soft_planting_list[this.soft_planting_act].proportionType] || 0;
+        item = [],
+        max =
+          list[0][
+            this.soft_planting_list[this.soft_planting_act].proportionType
+          ] || 0;
       list.map(v => {
-        k.push({ name: v.name , max });
-        let val = (
-          v[this.soft_planting_list[this.soft_planting_act].proportionType] - 0
-        ).toFixed(2) - 0;
+        k.push({ name: v.name, max });
+        let val =
+          (
+            v[this.soft_planting_list[this.soft_planting_act].proportionType] -
+            0
+          ).toFixed(2) - 0;
         item.push(val);
       });
-      var option = {
+      const buildSeries = function(data) {
+        const helper = data.map((item, index) => {
+          const arr = new Array(data.length);
+          arr.splice(index, 1, item);
+          return arr;
+        });
+
+        return [data, ...helper].map((item, index) => {
+          return {
+            type: "radar",
+            symbol: index === 0 ? "circle" : "none",
+            symbolSize: 6,
+            itemStyle: {
+              color: "rgb(157,200,241)",
+            },
+            lineStyle: {
+              color: index === 0 ? "rgb(157,200,241)" : "transparent",
+              width: 1,
+              opacity: 0.5,
+            },
+            areaStyle: {
+              color: index === 0 ? "rgba(157,200,241,.5)" : "transparent",
+            },
+            tooltip: {
+              show: index === 0 ? false : true,
+              formatter: function() {
+                return (
+                  k[index - 1].name +
+                  ":" +
+                  item[index - 1]
+                );
+              },
+            },
+            z: index === 0 ? 1 : 2,
+            data: [item],
+          };
+        });
+      };
+
+      let option = {
+        tooltip: {trigger: "item",},
         radar: {
-          // shape: 'circle',
-          indicator: k,
           radius: 130,
           shape: "circle",
           splitNumber: 5,
@@ -207,38 +250,17 @@ export default {
           axisName: {
             color: "#0000ee",
           },
+          indicator: k,
         },
-        tooltip: {
-          trigger: "item",
-        },
-        series: [
-          {
-            type: "radar",
-            lineStyle: {
-              width: 1,
-              opacity: 0.5,
-            },
-            areaStyle: {
-              color: "rgba(157,200,241,.5)",
-            },
-            itemStyle: {
-              color: "#7cb5ec",
-            },
-            data: [
-              {
-                value: item,
-              },
-            ],
-          },
-        ],
+        series: buildSeries(item),
       };
 
       option && this.softAd_chart.setOption(option);
     },
     numFor(num) {
       if (isNaN(num)) return 0;
-      if (num >= 100000000) return ((num / 100000000).toFixed(2) -0)+ "亿";
-      if (num >= 10000) return ((num / 10000).toFixed(2) -0) + "万";
+      if (num >= 100000000) return (num / 100000000).toFixed(2) - 0 + "亿";
+      if (num >= 10000) return (num / 10000).toFixed(2) - 0 + "万";
       return num;
     },
   },

+ 45 - 30
src/views/AdvertisingEye/components/distributionB.vue

@@ -77,7 +77,7 @@
                 </span>
               </template>
               <template #default="scope">
-                {{ numFor(scope.row.timeSize/1000) }}
+                {{ numFor(scope.row.timeSize / 1000) }}
               </template>
             </el-table-column>
             <el-table-column align="center" property="customer" label="">
@@ -200,15 +200,51 @@ export default {
           ] || 0;
       list.map(v => {
         k.push({ name: v.programType, max });
-        let val = (
-          v[this.soft_planting_list[this.soft_planting_act].proportionType] - 0
-        ).toFixed(2) -0 ;
+        let val =
+          (
+            v[this.soft_planting_list[this.soft_planting_act].proportionType] -
+            0
+          ).toFixed(2) - 0;
         item.push(val);
       });
-      var option = {
+      const buildSeries = function(data) {
+        const helper = data.map((item, index) => {
+          const arr = new Array(data.length);
+          arr.splice(index, 1, item);
+          return arr;
+        });
+
+        return [data, ...helper].map((item, index) => {
+          return {
+            type: "radar",
+            symbol: index === 0 ? "circle" : "none",
+            symbolSize: 6,
+            itemStyle: {
+              color: "rgb(157,200,241)",
+            },
+            lineStyle: {
+              color: index === 0 ? "rgb(157,200,241)" : "transparent",
+              width: 1,
+              opacity: 0.5,
+            },
+            areaStyle: {
+              color: index === 0 ? "rgba(157,200,241,.5)" : "transparent",
+            },
+            tooltip: {
+              show: index === 0 ? false : true,
+              formatter: function() {
+                return k[index - 1].name + ":" + item[index - 1];
+              },
+            },
+            z: index === 0 ? 1 : 2,
+            data: [item],
+          };
+        });
+      };
+
+      let option = {
+        tooltip: { trigger: "item" },
         radar: {
-          // shape: 'circle',
-          indicator: k,
           radius: 130,
           shape: "circle",
           splitNumber: 5,
@@ -218,30 +254,9 @@ export default {
           axisName: {
             color: "#0000ee",
           },
+          indicator: k,
         },
-        tooltip: {
-          trigger: "item",
-        },
-        series: [
-          {
-            type: "radar",
-            lineStyle: {
-              width: 1,
-              opacity: 0.5,
-            },
-            areaStyle: {
-              color: "rgba(157,200,241,.5)",
-            },
-            itemStyle: {
-              color: "#7cb5ec",
-            },
-            data: [
-              {
-                value: item,
-              },
-            ],
-          },
-        ],
+        series: buildSeries(item),
       };
 
       option && this.softAd_chart.setOption(option);

+ 0 - 1
src/views/AdvertisingEye/components/tranche.vue

@@ -245,7 +245,6 @@ export default {
         },
         series: list.map(v => {
           const item = v[0] || {};
-          console.log(item);
           return {
             name: item.name,
             type: "bar",

+ 8 - 8
vue.config.js

@@ -1,20 +1,20 @@
 const Components = require("unplugin-vue-components/webpack");
 const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
 
-const CompressionPlugin = require("compression-webpack-plugin");
+// const CompressionPlugin = require("compression-webpack-plugin");
 
 module.exports = {
   productionSourceMap: false,
   publicPath: "./",
   chainWebpack: config => {
     if (process.env.NODE_ENV === "production") {
-      config.plugin("compressionPlugin").use(
-        new CompressionPlugin({
-          test: /\.js$|\.css|\.less/, // 匹配文件名
-          threshold: 102400, // 对超过10k的数据压缩
-          deleteOriginalAssets: false, // 不删除源文件
-        })
-      );
+    //   config.plugin("compressionPlugin").use(
+    //     new CompressionPlugin({
+    //       test: /\.js$|\.css|\.less/, // 匹配文件名
+    //       threshold: 102400, // 对超过10k的数据压缩
+    //       deleteOriginalAssets: false, // 不删除源文件
+    //     })
+    //   );
       // 移除 prefetch 插件
       config.plugins.delete("prefetch");
     }