新增about页面

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.4.0",
     "buzz": "^1.2.1",
     "core-js": "^3.8.3",
+    "echarts": "^5.4.3",
     "howler": "^2.2.3",
     "js-cookie": "^3.0.5",
     "moment": "^2.29.4",

src/router/index.ts

@@ -2,14 +2,14 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import Login from '../views/login/index.vue'
 import Error404 from '../views/error404/index.vue'
 const routes: Array<RouteRecordRaw> = [
-  // {
-  //   path: '/about',
-  //   name: 'about',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  // },
+  {
+    path: '/about',
+    name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/about/index.vue')
+  },
   {
     path: '/',
     name: '',

src/views/about/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="W-full pr30 pl30 pt30">
+    <canvas width="500" height="500" id="fuzhou"></canvas>
+  </div>
+</template>
+  
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import api from '@/api'
+import router from "@/router";
+import fuzhouJson from '@/assets/json/福州市.json'
+import echarts from 'echarts'
+const logOut = () => {
+  api.login.logout().then(res => {
+    router.push('/login')
+  })
+}
+const renderMap = () => {
+echarts.registerMap("fz",fuzhouJson as any)
+  let Chart = echarts.init(document.getElementById("fuzhou"));
+  // 颜色或文字的配置
+  let option = {
+    geo: {
+      type: "map",
+      aspectScale: 1, // 横向拉伸
+      // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
+      map: "SC",
+      label: {
+        show: true,
+        normal: {
+          show: true, // 默认地图文字字号和字体颜色
+          fontSize: 10,
+          color: "#ffffff",
+        },
+        emphasis: {
+          show: true,
+          fontSize: 10, // 选中地图文字字号和字体颜色
+          color: "#CFCFCF",
+        },
+      },
+      itemStyle: {
+        normal: {
+          areaColor: "#040c3c", //地图本身的颜色
+          borderColor: "#00feda", //省份边框颜色
+          borderWidth: 1, // 省份边框宽度
+          opacity: 1, //图形透明度
+        },
+        emphasis: {
+          areaColor: "#040c3c", // 高亮时候地图显示的颜色
+          borderWidth: 0, // 高亮时的边框宽度
+        },
+      },
+      textFixed: {
+        Alaska: [20, -20],
+      }
+    },
+    series: [
+      {
+        type: "effectScatter",
+        coordinateSystem: "geo",
+        symbolSize: 12,
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+        itemStyle: {
+          normal: {
+            shadowBlur: 10,
+            color: "#00ECC8",
+          },
+          emphasis: {
+            borderColor: "#fff",
+            borderWidth: 1,
+          },
+        },
+      },
+    ],
+  };
+  Chart.setOption(option);
+}
+
+
+
+
+export default defineComponent({
+  setup() {
+    onMounted(() => {
+      console.log("123")
+      renderMap()
+    })
+    return {
+      logOut,
+      renderMap
+    };
+  },
+});
+</script>
+  
+<style scoped>
+.bg-primary-yellow {
+  background-color: #f9de5b;
+}
+
+.select-border1:hover {
+  border: 1px solid #f9de5b;
+  background-color: #f9de5b;
+  cursor: pointer;
+}
+</style>

tsconfig.json

@@ -12,6 +12,7 @@
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
     "sourceMap": true,
+    "resolveJsonModule":true,
     "baseUrl": ".",
     "types": [
       "webpack-env"