图表优化

src/components/common/china-point-chart/index.vue

@@ -37,9 +37,9 @@ onMounted(() => {
 //   { name: '昆明', value: 2428 },
 //   { name: '武汉', value: 71800 },
 // ];
+const opacityColorList = ['rgba(22, 93, 255, 0.30)', 'rgba(0, 180, 42, 0.50)'];
 const props = defineProps({ data: Object });
 const convertData = (data) => {
-  console.log('data', data);
   var res = [];
   for (var i = 0; i < data.length; i++) {
     var geoCoord =
@@ -55,6 +55,7 @@ const convertData = (data) => {
       });
     }
   }
+  console.log('res', res);
   return res;
 };
 const dataHandle = (data) => {
@@ -71,58 +72,60 @@ const dataHandle = (data) => {
           coordinateSystem: 'geo',
           data: convertData(item.data),
           symbolSize: function (val) {
-            return val[2] * 10;
-          },
-          label: {
-            normal: {
-              formatter: '{b}',
-              position: 'right',
-              show: false,
-            },
-            emphasis: {
-              show: true,
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: colorList[i],
-            },
-          },
-        },
-        {
-          name: item.name,
-          type: 'effectScatter',
-          coordinateSystem: 'geo',
-          data: convertData(
-            item.data.sort(function (a, b) {
-              return b.value - a.value;
-            })
-          ),
-          symbolSize: function (val) {
-            return val[2] * 10;
-          },
-          showEffectOn: 'render',
-          rippleEffect: {
-            brushType: 'stroke',
-          },
-          hoverAnimation: true,
-          label: {
-            normal: {
-              formatter: '{b}',
-              position: 'right',
-              fontSize: 12,
-              show: true,
-            },
+            return val[2] * 20;
           },
+          // label: {
+          //   normal: {
+          //     formatter: '{b}',
+          //     position: 'right',
+          //     show: false,
+          //   },
+          //   emphasis: {
+          //     show: true,
+          //   },
+          // },
           itemStyle: {
             normal: {
               color: colorList[i],
-              shadowBlur: 10,
-              shadowColor: '#333',
+              borderColor: opacityColorList[i] || colorList[i],
+              borderWidth: 2,
             },
           },
-          zlevel: 1,
         }
+        // {
+        //   name: item.name,
+        //   type: 'effectScatter',
+        //   coordinateSystem: 'geo',
+        //   data: convertData(
+        //     item.data.sort(function (a, b) {
+        //       return b.value - a.value;
+        //     })
+        //   ),
+        //   symbolSize: function (val) {
+        //     return val[2] * 10;
+        //   },
+        //   showEffectOn: 'render',
+        //   rippleEffect: {
+        //     brushType: 'stroke',
+        //   },
+        //   hoverAnimation: true,
+        //   label: {
+        //     normal: {
+        //       formatter: '{b}',
+        //       position: 'right',
+        //       fontSize: 12,
+        //       show: true,
+        //     },
+        //   },
+        //   itemStyle: {
+        //     normal: {
+        //       color: colorList[i],
+        //       shadowBlur: 10,
+        //       shadowColor: '#333',
+        //     },
+        //   },
+        //   zlevel: 1,
+        // }
       );
     }
     return arr;

src/views/report/dispatch-analysis/index.vue

@@ -3,6 +3,7 @@
     <report-header
       title="派单分析"
       v-model:dateRange="curTimeRange"
+      @timeChange="timeChange"
     ></report-header>
     <div class="page-main">
       <div class="scroll-content">
@@ -344,16 +345,38 @@ onMounted(() => {
   run8({ ...timeParams.value, type: 'OFFICE' });
   run9({ ...timeParams.value });
 });
+const timeChange = () => {
+  run1({ ...timeParams.value });
+  run2({ ...timeParams.value, type: 'CLOUD_MARK' });
+  run3({ ...timeParams.value, type: 'OFFICE' });
+  run4({ ...timeParams.value });
+  run5({ ...timeParams.value, type: 'CLOUD_MARK' });
+  run6({ ...timeParams.value });
+  run8({ ...timeParams.value, type: 'OFFICE' });
+  run9({ ...timeParams.value });
+};
 const options1 = computed(() => {
-  return createRingPieOption({
-    data: Object.entries(result1.value || {}).map((item) => ({
-      name: CUSTOMER_TYPE[item[0]],
-      value: item[1],
-    })),
-    title: '总数',
-    center: ['30%', '50%'],
-    seriesName: '客户类型',
-  });
+  return createRingPieOption(
+    {
+      data: Object.entries(result1.value || {}).map((item) => ({
+        name: CUSTOMER_TYPE[item[0]],
+        value: item[1],
+      })),
+      title: '总数',
+      center: ['50%', '40%'],
+      seriesName: '客户类型',
+    },
+    {
+      legend: {
+        top: null,
+        right: null,
+        left: 'center',
+        bottom: 0,
+        orient: 'horizontal',
+        type: 'scroll',
+      },
+    }
+  );
 });
 const chart1Click = (params) => {
   customTypeDrillData.value.type =
@@ -400,12 +423,26 @@ const options3 = computed(() => {
 });
 
 const options4 = computed(() =>
-  createCakePieOption({
-    data: (result4.value || []).map((item) => {
-      item.value = item.count;
-      return item;
-    }),
-  })
+  createCakePieOption(
+    {
+      data: (result4.value || []).map((item) => {
+        item.value = item.count;
+        return item;
+      }),
+      center: ['50%', '38%'],
+      radius: [0, 50],
+    },
+    {
+      legend: {
+        top: null,
+        right: null,
+        left: 'center',
+        bottom: 0,
+        orient: 'horizontal',
+        type: 'scroll',
+      },
+    }
+  )
 );
 </script>