update: 初始化：新疆大屏基础搭建

2025-07-02 13:48:50 +08:00
parent 1cbda373e0
commit ff493d83d9
24 changed files with 1482 additions and 14 deletions
@@ -0,0 +1,126 @@
+import * as echarts from 'echarts';
+import { legend1, legend2, legend3, legend4, legend5 } from '/@/components/xianMap/xianMapHooks.ts';
+export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
+export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href;
+export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
+export const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
+export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
+export function getClassCharts(dx, dy) {
+    return {
+        grid: {
+            top: 40,
+            bottom: 40,
+            left: '60',
+        },
+        xAxis: {
+            type: 'category',
+            data: dx,
+            axisTick: {
+                show: false,
+                lineStyle: {
+                    color: 'rgba(101, 198, 231, .1)',
+                },
+            },
+            axisLabel: {
+                color: '#C9DAFF',
+                fontSize: 12,
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#65C6E7', // 设置轴线颜色为红色
+                },
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name: '次数',
+            // nameLocation: 'end', // 将单位名称位置设置为起始位置
+            // nameGap: 10,
+            // nameRotate: 0, // 设置旋转角度，0 表示水平
+            nameTextStyle: {
+                fontSize: 12,
+                color: '#65C6E7',
+                left: 100,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(101, 198, 231, .1)',
+                    width: 1,
+                    type: 'solid',
+                },
+            },
+            interval: 25, // 步长
+            min: 0, // 起始 - 设置y轴刻度的最小值
+            max: 100, // 终止 - 设置y轴刻度的最大值
+            axisLabel: {
+                color: '#65C6E7',
+                formatter: function (value, index) {
+                    return value;
+                },
+            },
+        },
+        series: [
+            {
+                data: dy.map((item) => {
+                    return {
+                        value: item,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: '#5ABFFF' },
+                                { offset: 0.2, color: 'rgba(30, 166, 253, .5)' },
+                                { offset: 0.5, color: 'rgba(30, 166, 253, .1)' },
+                                { offset: 0.8, color: 'rgba(30, 166, 253, .5)' },
+                                { offset: 1, color: '#5ABFFF' },
+                            ]),
+                            borderColor: '#51caf5', // 黑色边框
+                            borderWidth: item ? 1 : 0,
+                        },
+                    };
+                }),
+                label: {
+                    show: true, // 显示标签
+                    position: 'top', // 标签显示在柱子顶部
+                    color: '#51caf5', // 设置字体颜色
+                    fontSize: 12, // 设置字体大小
+                },
+                type: 'bar',
+                barWidth: 18,
+            },
+        ],
+    };
+}
+export enum TabType {
+    all = '', //所有资源
+    youTianYiYuan = '1', //油田医院
+    jianKangXiaoWu = '2', //健康小屋
+    jiuHuChe = '5', //救护车
+}
+export const tabList = [
+    {
+        name: '所有资源',
+        type: TabType.all,
+    },
+    {
+        name: '健康小屋',
+        type: TabType.jianKangXiaoWu,
+    },
+    {
+        name: '油田医院',
+        type: TabType.youTianYiYuan,
+    },
+    {
+        name: '救护车',
+        type: TabType.jiuHuChe,
+    },
+    {
+        name: '急救路线',
+    },
+];
+export const legendList = [
+    { img: legend1, text: '油田医院', color: '#D86AF7' },
+    { img: legend2, text: '医疗点', color: '#39D78B' },
+    { img: legend3, text: '救护车', color: '#EE7E31' },
+    { img: legend4, text: '合作医院', color: '#3BAAFA' },
+    { img: legend5, text: '地方医院', color: '#1BEFF6' },
+];