新增三个 useEcharts hooks 示例

随便整了个首页

src/App.vue

@@ -1,10 +1,12 @@
 <template>
   <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars">
-    <router-view v-slot="{ Component }">
+    <routerView v-slot="{ Component }">
       <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" />
+        <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
+          <component :is="Component" />
+        </keep-alive>
       </transition>
-    </router-view>
+    </routerView>
   </vanConfigProvider>
 </template>
 
@@ -12,9 +14,14 @@
   import { computed } from 'vue';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { darken, lighten } from '@/utils/index';
+  import { useRouteStore } from '@/store/modules/route';
 
+  const routeStore = useRouteStore();
   const designStore = useDesignSettingStore();
 
+  // 需要缓存的路由组件
+  const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
+
   const getDarkMode = computed(() => designStore.getDarkMode);
 
   const getThemeVars = computed(() => {

src/layout/DefaultLayout.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>

src/layout/components/Header.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="ignore-nav-header">
-    <van-nav-bar fixed :title="getTitle" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { useRoute } from 'vue-router';
-
-  const currentRoute = useRoute();
-
-  const getTitle = computed(() => currentRoute.meta.title as string);
-</script>
-
-<style scoped lang="less">
-  .ignore-nav-header {
-    height: @header-height;
-  }
-</style>

src/layout/components/Main.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="flex-1 nav-body">
-    <router-view>
-      <template #default="{ Component, route }">
-        <transition name="zoom-fade" mode="out-in" appear>
-          <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
-            <component :is="Component" :key="route.fullPath" />
-          </keep-alive>
-          <component v-else :is="Component" :key="route.fullPath" />
-        </transition>
-      </template>
-    </router-view>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { useRouteStore } from '@/store/modules/route';
-
-  const routeStore = useRouteStore();
-  // 需要缓存的路由组件
-  const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
-</script>
-
-<style scoped lang="less">
-  .nav-body {
-    overflow-x: auto;
-  }
-</style>

src/layout/components/Menu.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="ignore-nav-footer">
-    <van-tabbar route>
-      <van-tabbar-item
-        fixed
-        replace
-        v-for="menu in getMenus"
-        :key="menu.name"
-        :to="menu.path"
-        :icon="(menu.meta?.icon as string)"
-        >{{ menu.meta?.title }}
-      </van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-  import { useRouteStore } from '@/store/modules/route';
-
-  const routeStore = useRouteStore();
-  const getMenus = computed(() => routeStore.menus);
-</script>
-
-<style scoped lang="less">
-  .nav-footer {
-    height: @footer-height;
-  }
-</style>

src/layout/index.vue

@@ -3,6 +3,14 @@
     <van-nav-bar v-if="getShowHeader" fixed placeholder :title="getTitle" />
     <routerView class="flex-1 overflow-x-hidden">
       <template #default="{ Component, route }">
+        <!--
+          keep-alive 标签的 include 属性是根据组件的 name 判断的，
+          所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
+          并且与 router 路由表中使用的 name 属性 一致，否则无效
+          本项目使用了 vite-plugin-vue-setup-extend 插件
+          可直接在 script 标签上书写 name 如：
+          <script setup lang="ts" name="DashboardPage">
+        -->
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
@@ -46,12 +54,3 @@
 </script>
 
 <style scoped lang="less"></style>
-
-<!--
-  keep-alive 标签的 include 属性是根据组件的 name 判断的，
-  所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
-  并且与 router 路由表中使用的 name 属性 一致，否则无效
-  本项目使用了 vite-plugin-vue-setup-extend 插件
-  可直接在 script 标签上书写 name 如：
-  <script setup lang="ts" name="DashboardPage">
--->

src/router/modules.ts

@@ -17,7 +17,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
         path: 'index',
         name: 'DashboardPage',
         meta: {
-          keepAlive: true,
+          keepAlive: false,
         },
         component: () => import('@/views/dashboard/index.vue'),
       },
@@ -81,6 +81,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
     meta: {
       title: '修改昵称',
       innerPage: true,
+      keepAlive: false,
     },
     component: () => import('@/views/my/EditNickname.vue'),
   },

src/styles/common.less

@@ -96,3 +96,16 @@ a:hover {
     height: 100% !important;
   }
 }
+
+.my-card {
+  backdrop-filter: blur(10px);
+  /* stylelint-disable-next-line color-function-notation */
+  background: rgba(255, 255, 255, 70%);
+}
+
+html[data-theme='dark'] {
+  .my-card {
+    /* stylelint-disable-next-line color-function-notation */
+    background: rgba(30, 30, 30, 70%);
+  }
+}

src/views/dashboard/index.vue

@@ -1,117 +1,66 @@
 <template>
-  <div>
+  <div class="flex flex-col justify-center items-center h-screen p-60px">
-    <van-field name="radio" label="单选框">
+    <div class="wel-box flex flex-col items-center justify-between w-full">
-      <template #input>
+      <SvgIcon class="logo enter-y" :size="130" name="logo" />
-        <van-radio-group v-model="checked" direction="horizontal">
+      <div
-          <van-radio name="1">单选框 1</van-radio>
+        class="text-darkBlue dark:text-garyWhite text-2xl font-black mt-12 mb-4 text-center enter-y"
-          <van-radio name="2">单选框 2</van-radio>
+        >欢迎来到 {{ title }}</div
-        </van-radio-group>
+      >
-      </template>
+      <div class="w-full mt-4 mb-6 enter-y">
-    </van-field>
+        <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
-    <van-field name="checkbox" label="复选框">
+          <van-swipe-item
-      <template #input>
+            class="text-gray-700 dark:text-gray-400 leading-relaxed text-center"
-        <van-checkbox v-model="checked2" shape="square" />
+            v-for="(text, index) in getSwipeText"
-      </template>
+            :key="index"
-    </van-field>
+          >
-    <van-field name="checkboxGroup" label="复选框组">
+            <p class="text-lg">{{ text.title }}</p>
-      <template #input>
+            <p class="text-sm">{{ text.details }}</p>
-        <van-checkbox-group v-model="groupChecked" direction="horizontal">
+          </van-swipe-item>
-          <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
+        </van-swipe>
-          <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
+      </div>
-        </van-checkbox-group>
+    </div>
-      </template>
-    </van-field>
-    <van-field name="slider" label="滑块">
-      <template #input>
-        <van-slider v-model="value" />
-      </template>
-    </van-field>
-    <van-field
-      v-model="result"
-      is-link
-      readonly
-      name="calendar"
-      label="日历"
-      placeholder="点击选择日期"
-      @click="showCalendar = true"
-    />
-    <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
-    <van-field
-      v-model="fieldValue"
-      is-link
-      readonly
-      label="地区"
-      placeholder="请选择所在地区"
-      @click="show = true"
-    />
-    <van-popup v-model:show="show" round position="bottom">
-      <van-cascader
-        v-model="cascaderValue"
-        title="请选择所在地区"
-        :options="options"
-        @close="show = false"
-        @finish="onFinish"
-      />
-    </van-popup>
-    <van-switch v-model="checked" />
-    <van-notice-bar
-      left-icon="volume-o"
-      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
-    />
-    <van-steps direction="vertical" :active="0">
-      <van-step>
-        <h3>【城市】物流状态1</h3>
-        <p>2016-07-12 12:40</p>
-      </van-step>
-      <van-step>
-        <h3>【城市】物流状态2</h3>
-        <p>2016-07-11 10:00</p>
-      </van-step>
-      <van-step>
-        <h3>快件已发货</h3>
-        <p>2016-07-10 09:30</p>
-      </van-step>
-    </van-steps>
-    <div style="height: 300px; background: #000"></div>
   </div>
 </template>
 
 <script setup lang="ts" name="DashboardPage">
-  import { ref } from 'vue';
+  import { computed } from 'vue';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import SvgIcon from '@/components/SvgIcon.vue';
+  import { useGlobSetting } from '@/hooks/setting';
 
-  const checked2 = ref('1');
+  const designStore = useDesignSettingStore();
-  const checked = ref(false);
+  const globSetting = useGlobSetting();
-  const groupChecked = ref([]);
-  const value = ref(50);
 
-  const result = ref('');
+  const { title } = globSetting;
-  const showCalendar = ref(false);
-  const onConfirm = (date) => {
-    result.value = `${date.getMonth() + 1}/${date.getDate()}`;
-    showCalendar.value = false;
-  };
 
-  const show = ref(false);
+  const getSwipeText = computed(() => {
-  const fieldValue = ref('');
+    return [
-  const cascaderValue = ref('');
+      {
-  // 选项列表，children 代表子选项，支持多级嵌套
+        title: '💡 最新技术栈',
-  const options = [
+        details: '基于Vue3、Vant4、Vite、TypeScript、windiCss等最新技术栈开发',
-    {
+      },
-      text: '浙江省',
+      {
-      value: '330000',
+        title: '⚡️ 轻量快速的热重载',
-      children: [{ text: '杭州市', value: '330100' }],
+        details: '无论应用程序大小如何，都始终极快的模块热重载（HMR）',
-    },
+      },
-    {
+      {
-      text: '江苏省',
+        title: '🔩 主题配置',
-      value: '320000',
+        details: '具备主题配置及黑暗主题适配，且持久化保存',
-      children: [{ text: '南京市', value: '320100' }],
+      },
-    },
+      {
-  ];
+        title: '🛠️ 丰富的 Vite 插件',
-  // 全部选项选择完毕后，会触发 finish 事件
+        details: '集成大部分 Vite 插件，无需繁琐配置，开箱即用',
-  const onFinish = ({ selectedOptions }) => {
+      },
-    show.value = false;
+      {
-    fieldValue.value = selectedOptions.map((option) => option.text).join('/');
+        title: '📊 内置 useEcharts hooks',
-  };
+        details: '满足大部分图表展示，只需要写你的 options',
+      },
+      {
+        title: '🥳 完善的登录系统、路由、Axios配置',
+        details: '所有架构已搭建完毕，你可以直接开发你的业务需求',
+      },
+    ];
+  });
 </script>
 
 <style scoped lang="less"></style>

src/views/message/barChart.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
+    <div ref="chartRef" :style="{ height: '350px' }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { onMounted, ref, Ref } from 'vue';
+  import type { EChartsOption } from 'echarts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const chartOptions: EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+      },
+    },
+    legend: {},
+    grid: {
+      left: '1%',
+      right: '7%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+    },
+    yAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    series: [
+      {
+        name: 'Direct',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [320, 302, 301, 334, 390, 330, 320],
+      },
+      {
+        name: 'Mail Ad',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [120, 132, 101, 134, 90, 230, 210],
+      },
+      {
+        name: 'Affiliate Ad',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [220, 182, 191, 234, 290, 330, 310],
+      },
+      {
+        name: 'Video Ad',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [150, 212, 201, 154, 190, 330, 410],
+      },
+      {
+        name: 'Search Engine',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: [820, 832, 901, 934, 1290, 1330, 1320],
+      },
+    ],
+  };
+
+  onMounted(() => {
+    setOptions(chartOptions);
+  });
+</script>
+
+<style scoped></style>

src/views/message/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <p class="text-30px mb-50px"> vue3 v-model 的变化</p>
+    <lineChart />
-    input: <input v-model="name" />
+    <barChart />
-    <p> {{ name }}</p>
+    <pieChart />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import lineChart from './lineChart.vue';
-
+  import barChart from './barChart.vue';
-  const name = ref('Alice');
+  import pieChart from './pieChart.vue';
 </script>
 
 <style scoped></style>

src/views/message/lineChart.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
+    <div ref="chartRef" :style="{ height: '350px' }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { onMounted, ref, Ref } from 'vue';
+  import type { EChartsOption } from 'echarts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const chartOptions: EChartsOption = {
+    title: {
+      text: 'Stacked Area Chart',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
+      top: '10%',
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: 'Email',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [120, 132, 101, 134, 90, 230, 210],
+      },
+      {
+        name: 'Union Ads',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [220, 182, 191, 234, 290, 330, 310],
+      },
+      {
+        name: 'Video Ads',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [150, 232, 201, 154, 190, 330, 410],
+      },
+      {
+        name: 'Direct',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [320, 332, 301, 334, 390, 330, 320],
+      },
+      {
+        name: 'Search Engine',
+        type: 'line',
+        stack: 'Total',
+        label: {
+          show: true,
+          position: 'top',
+        },
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+      },
+    ],
+  };
+
+  onMounted(() => {
+    setOptions(chartOptions);
+  });
+</script>
+
+<style scoped></style>

src/views/message/pieChart.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
+    <div ref="chartRef" :style="{ height: '350px' }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { onMounted, ref, Ref } from 'vue';
+  import type { EChartsOption } from 'echarts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const chartOptions: EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '5%',
+      left: 'center',
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['50%', '60%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '40',
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' },
+        ],
+      },
+    ],
+  };
+
+  onMounted(() => {
+    setOptions(chartOptions);
+  });
+</script>
+
+<style scoped></style>

src/views/my/index.vue

@@ -111,23 +111,14 @@
       opacity: 0.9;
     }
   }
-  .my-card {
+  .van-cell {
-    backdrop-filter: blur(10px);
+    align-items: center;
-    background: rgba(255, 255, 255, 0.7);
+    background: transparent;
-    .van-cell {
+    &:active {
-      align-items: center;
+      background-color: var(--van-cell-active-color);
-      background: transparent;
-      &:active {
-        background-color: var(--van-cell-active-color);
-      }
-      .xicon {
-        margin-right: 10px;
-      }
     }
-  }
+    .xicon {
-  html[data-theme='dark'] {
+      margin-right: 10px;
-    .my-card {
-      background: rgba(30, 30, 30, 0.7);
     }
   }
 </style>