update

src/views/healthConsultation/components/healthContentBottomItem2.vue

@@ -34,10 +34,10 @@
             .then((res: any) => {
                 if (res.code == 200) {
                     // 提取数据
-                    const consultHelperCounts = res.result.map((item: any) => item.consultHelperCount);
+                    const consultHelperCounts = res.result.map((item: any) => item.consultHelperCount || 0);
-                    const consultDocCounts = res.result.map((item: any) => item.consultDocCount);
+                    const consultDocCounts = res.result.map((item: any) => item.consultDocCount || 0);
                     const departNames = res.result.map((item: any) => item.departName);
-                    initChart(departNames, consultDocCounts, consultHelperCounts);
+                    initChart(departNames, consultHelperCounts, consultDocCounts);
                 }
             })
             .catch((err) => {
@@ -71,6 +71,10 @@
                 // icon: 'path://M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zm0 896a384 384 0 1 1 0-768 384 384 0 0 1 0 768z',
                 icon: iconPath,
                 data: ['员工咨询全科医生', '员工咨询专家'],
+                selected: {
+                    员工咨询全科医生: true,
+                    员工咨询专家: false,
+                },
             },
             grid: {
                 top: 70,
@@ -93,6 +97,7 @@
                 axisLine: { lineStyle: { color: '#3d5269' } },
                 splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
                 axisLabel: { color: '#89DBFF' },
+                minInterval: 1,
             },
             series: [
                 {
@@ -125,7 +130,14 @@
         };
 
         chart.setOption(option);
-        window.addEventListener('resize', () => chart?.resize());
+        chart.on('legendselectchanged', function (event: any) {
+            let op: any = chart!.getOption(); // 获取当前的配置项
+            Object.keys(op.legend[0].selected).forEach((key: any) => {
+                op.legend[0].selected[key] = event.name === key;
+            });
+            chart!.setOption(op); // 应用更新后的配置项到图表中
+        });
+        window.addEventListener('resize', resizeChart);
     };
 
     onMounted(() => {
@@ -133,7 +145,13 @@
         // initChart();
     });
 
+    function resizeChart(chart: any) {
+        chart && chart?.resize();
+    }
+
     onBeforeUnmount(() => {
+        window.removeEventListener('resize', resizeChart);
+        chart && chart?.off('legendselectchanged');
         chart?.dispose();
     });
 </script>

src/views/healthConsultation/components/healthContentBottomItem3.vue

@@ -69,6 +69,10 @@
                 itemGap: 30, // 默认 10，这里改成 30，让两段文字隔开一些
                 icon: iconPath,
                 data: ['图文', '视频'],
+                selected: {
+                    图文: true,
+                    视频: false,
+                },
             },
             grid: {
                 top: 70,
@@ -91,6 +95,7 @@
                 axisLine: { lineStyle: { color: '#3d5269' } },
                 splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
                 axisLabel: { color: '#89DBFF' },
+                minInterval: 1,
             },
             series: [
                 {
@@ -123,7 +128,14 @@
         };
 
         chart.setOption(option);
-        window.addEventListener('resize', () => chart?.resize());
+        chart.on('legendselectchanged', function (event: any) {
+            let op: any = chart!.getOption(); // 获取当前的配置项
+            Object.keys(op.legend[0].selected).forEach((key: any) => {
+                op.legend[0].selected[key] = event.name === key;
+            });
+            chart!.setOption(op); // 应用更新后的配置项到图表中
+        });
+        window.addEventListener('resize', resizeChart);
     };
 
     onMounted(() => {
@@ -131,7 +143,13 @@
         // initChart();
     });
 
+    function resizeChart(chart: any) {
+        chart && chart?.resize();
+    }
+
     onBeforeUnmount(() => {
+        window.removeEventListener('resize', resizeChart);
+        chart && chart?.off('legendselectchanged');
         chart?.dispose();
     });
 </script>

src/views/healthConsultation/components/healthContentBottomItem4.vue

@@ -100,6 +100,10 @@
                 itemGap: 30, // 默认 10，这里改成 30，让两段文字隔开一些
                 icon: iconPath,
                 data: ['图文', '视频'],
+                selected: {
+                    图文: true,
+                    视频: false,
+                },
             },
             grid: {
                 top: 70,
@@ -123,6 +127,7 @@
                 axisLine: { lineStyle: { color: '#3d5269' } },
                 splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
                 axisLabel: { color: '#89DBFF' },
+                minInterval: 1,
             },
             series: [
                 {
@@ -155,7 +160,14 @@
         };
 
         chart.setOption(option);
-        window.addEventListener('resize', () => chart?.resize());
+        chart.on('legendselectchanged', function (event: any) {
+            let op: any = chart!.getOption(); // 获取当前的配置项
+            Object.keys(op.legend[0].selected).forEach((key: any) => {
+                op.legend[0].selected[key] = event.name === key;
+            });
+            chart!.setOption(op); // 应用更新后的配置项到图表中
+        });
+        window.addEventListener('resize', resizeChart);
     };
 
     onMounted(() => {
@@ -163,7 +175,13 @@
         // initChart();
     });
 
+    function resizeChart(chart: any) {
+        chart && chart?.resize();
+    }
+
     onBeforeUnmount(() => {
+        window.removeEventListener('resize', resizeChart);
+        chart && chart?.off('legendselectchanged');
         chart?.dispose();
     });
 </script>