📝 新增全球统计

docs/.vuepress/client.js

@@ -1,12 +1,23 @@
 import {defineClientConfig} from "vuepress/client";
+import { defineEChartsConfig } from "vuepress-plugin-md-enhance/client";
 
 import resourceStoreComp from "./components/ResStore.vue";
 import pluginStoreComp from "./components/PluginStore.vue";
 import dashComp from "./components/Dash.vue";
 import homeComp from "./components/Home.vue";
+import geoComp from "./components/Geo.vue";
 
+// import ElementPlus from 'element-plus';
 
-import ElementPlus from 'element-plus';
+defineEChartsConfig({
+  options: {
+    // 全局 ECharts 配置
+  },
+  setup: async () => {
+    // ECharts 设置
+    // 例如: await import("echarts-wordcloud")
+  },
+});
 
 
 export default defineClientConfig({
@@ -15,6 +26,7 @@ export default defineClientConfig({
         app.component("dashComp", dashComp);
         app.component("resourceStoreComp", resourceStoreComp);
         app.component("pluginStoreComp", pluginStoreComp);
-        app.use(ElementPlus);
+        app.component("geoComp", geoComp);
+        // app.use(ElementPlus);
     },
 });

docs/.vuepress/components/Geo.vue

@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+<template>
+  <div>
+    <div style="text-align: center">
+      <h2>地理分布</h2>
+      <p>数据来源于Liteyuki API</p>
+    </div>
+    <div id="main-chart" style="width: 100%; height: 600px;"></div>
+  </div>
+
+</template>
+
+<style scoped>
+#main-chart {
+  width: 100px;
+  height: 600px;
+}
+</style>

docs/.vuepress/public/js/geo.js

@@ -0,0 +1,93 @@
+echart = require('echarts');
+let chart = echarts.init(document.getElementById('main-chart'));
+const color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
+console.log("加载图标");
+// 在地图加载完成后设置所有地区不可选
+function setAllRegionsUnselectable(geoModel) {
+    const regions = geoModel.get('regions');
+
+    // 遍历所有地区并设置selected为false
+    for (let i = 0; i < regions.length; i++) {
+        const region = regions[i];
+        region.selected = false;
+    }
+
+    // 更新模型以反映更改
+    geoModel.set('regions', regions);
+
+    // 更新图表以显示更改
+    chart.setOption({
+        geo: {
+            regions: regions
+        }
+    });
+}
+
+// 获取数据并初始化图表
+fetch('https://api.liteyuki.icu/distribution')
+    .then(response => response.json())
+    .then(data => {
+        // 构造 ECharts 需要的数据格式
+        const locations = data.locations;
+        const seriesData = locations.map(location => ({
+            value: [location[1], location[0]] // 直接使用经纬度数组
+        }));
+        console.log(seriesData);
+        // 初始化图表选项
+        chart.setOption({
+            backgroundColor: '#454545',
+            title: {
+                text: 'LiteyukiBot分布demo',
+                subtext: 'LiteyukiBot分布',
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 20
+                },
+                top: '10px',
+                left: '10px'
+            },
+            geo: {
+                map: 'world',
+                roam: false,
+                itemStyle: {
+                    normal: {
+                        areaColor: '#000',
+                        borderType: null, // 设置边界线类型为无
+                        borderColor: '#000', // 设置边界线颜色
+
+                    },
+                    emphasis: {
+                        areaColor: '#000',
+                        borderType: null, // 设置边界线类型为无
+                        borderColor: '#000', // 设置边界线颜色
+                    }
+                },
+                regions: [] // 先保留为空
+            },
+            series: [{
+                // 散点效果
+                type: 'scatter',
+                coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
+                symbolSize: 5, // 设置散点的大小为20
+                itemStyle: {
+                    color: '#ffeb3b', // 黄色
+                },
+                data: seriesData
+            }],
+            textStyle: {
+                fontSize: 1
+            }
+        });
+
+        // 在地图加载完成后设置所有地区不可选
+        chart.on('ready', function () {
+            const geoModel = chart.getModel().componentModels.geo[0];
+            setAllRegionsUnselectable(geoModel);
+        });
+
+        // 自适应窗口大小变化
+        window.addEventListener("resize", function () {
+            chart.resize();
+        });
+    })
+    .catch(error => console.error('Error fetching data:', error));

docs/.vuepress/sidebar.ts

@@ -20,6 +20,11 @@ export default sidebar({
             icon: "store",
             prefix: "store/",
             children: "structure",
+        },{
+            text: "其他",
+            icon: "question-circle",
+            prefix: "other/",
+            children: "structure",
         }
     ],
 });

docs/.vuepress/theme.js

@@ -62,6 +62,7 @@ export default hopeTheme({
 
         // 此处开启了很多功能用于演示，你应仅保留用到的功能。
         mdEnhance: {
+            echarts: true,
             alert: true,
             align: true,
             attrs: true,