健康咨询平台大屏

2025-09-25 14:57:31 +08:00
parent a97d9c64aa
commit d103785a45
15 changed files with 20569 additions and 5 deletions
@@ -0,0 +1,149 @@
+<template>
+    <div class="chart-container">
+        <div class="title">单位咨询数量统计</div>
+        <div ref="chartRef" class="chart"></div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, onMounted, onBeforeUnmount } from 'vue';
+    import * as echarts from 'echarts';
+
+    import { getDeptCountStat } from '/@/views/healthConsultation/api/health';
+
+    const chartRef = ref<HTMLDivElement | null>(null);
+    let chart: echarts.ECharts | null = null;
+
+    function getData() {
+        getDeptCountStat()
+            .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 departNames = res.result.map((item: any) => item.departName);
+                    initChart(departNames, consultDocCounts, consultHelperCounts);
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+
+    const initChart = (departNames: string[], consultDocCounts: number[], consultHelperCounts: number[]) => {
+        if (!chartRef.value) return;
+        chart = echarts.init(chartRef.value);
+
+        const option: echarts.EChartsOption = {
+            backgroundColor: 'transparent',
+            // title: {
+            //     text: '单位咨询数量统计',
+            //     left: 'center',
+            //     top: 10,
+            //     textStyle: {
+            //         color: '#fff',
+            //         fontSize: 18,
+            //     },
+            // },
+            legend: {
+                top: 10,
+                textStyle: { color: '#fff' },
+                itemWidth: 20,
+                itemHeight: 16,
+                itemGap: 30, // 默认 10，这里改成 30，让两段文字隔开一些
+                // 圆环 icon
+                // 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: 'circle',
+                data: ['员工咨询全科医生', '员工咨询专家'],
+            },
+            grid: {
+                top: 70,
+                left: 50,
+                right: 30,
+                bottom: 70,
+            },
+            xAxis: {
+                type: 'category',
+                data: departNames,
+                axisLine: { lineStyle: { color: '#3d5269' } },
+                axisLabel: {
+                    color: '#fff',
+                    fontSize: 10,
+                    rotate: 30,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: { lineStyle: { color: '#3d5269' } },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+                axisLabel: { color: '#89DBFF' },
+            },
+            series: [
+                {
+                    name: '员工咨询全科医生',
+                    type: 'bar',
+                    data: consultDocCounts,
+                    barWidth: 12, // 更细的柱子
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                            { offset: 0, color: 'rgba(90,191,255,0.7)' }, // 中心透明
+                            { offset: 0.5, color: 'rgba(30,166,253,0.4)' }, // 中间过渡
+                            { offset: 1, color: 'rgba(30,166,253,0.7)' }, // 边缘实心
+                        ]),
+                    },
+                },
+                {
+                    name: '员工咨询专家',
+                    type: 'bar',
+                    data: consultHelperCounts,
+                    barWidth: 12, // 更细的柱子
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                            { offset: 0, color: 'rgba(60,255,253,0.7)' }, // 中心透明
+                            { offset: 0.5, color: 'rgba(60,255,253,0.4)' }, // 中间过渡
+                            { offset: 1, color: 'rgba(48,223,221,0.7)' }, // 边缘实心
+                        ]),
+                    },
+                },
+            ],
+        };
+
+        chart.setOption(option);
+        window.addEventListener('resize', () => chart?.resize());
+    };
+
+    onMounted(() => {
+        getData();
+        // initChart();
+    });
+
+    onBeforeUnmount(() => {
+        chart?.dispose();
+    });
+</script>
+
+<style scoped>
+    .chart-container {
+        height: 100%;
+        /* width: calc(100% / 5); */
+        border: 1px solid #00ccff;
+        border-radius: 14px;
+        background: rgba(8, 75, 100, 0.2);
+        .title {
+            height: 40px;
+            border-radius: 14px 14px 0 0;
+            font-weight: bold;
+            font-size: 20px;
+            letter-spacing: 2px;
+            text-align: center;
+            color: #ffffff;
+            line-height: 40px;
+            padding: 0 20px;
+            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+        }
+        .chart {
+            width: 100%;
+            height: calc(100% - 40px);
+        }
+    }
+</style>