diff --git a/src/views/healthConsultation/components/healthContentBottomItem2.vue b/src/views/healthConsultation/components/healthContentBottomItem2.vue index 1a69235..47a3278 100644 --- a/src/views/healthConsultation/components/healthContentBottomItem2.vue +++ b/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 consultDocCounts = res.result.map((item: any) => item.consultDocCount); + const consultHelperCounts = res.result.map((item: any) => item.consultHelperCount || 0); + 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(); }); diff --git a/src/views/healthConsultation/components/healthContentBottomItem3.vue b/src/views/healthConsultation/components/healthContentBottomItem3.vue index bffa818..b68caf9 100644 --- a/src/views/healthConsultation/components/healthContentBottomItem3.vue +++ b/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(); }); diff --git a/src/views/healthConsultation/components/healthContentBottomItem4.vue b/src/views/healthConsultation/components/healthContentBottomItem4.vue index 6327233..41e3504 100644 --- a/src/views/healthConsultation/components/healthContentBottomItem4.vue +++ b/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(); });