Add charts (#30)

* 优化图表页面 * 优化图标功能 * fix bug
admin8756 · May 6, 2024 · a82b136 · a82b136 · vercel · May 6, 2024
1 parent e93259b
commit a82b136
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 33 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,14 +2,16 @@
   "i18n-ally.localesPaths": ["locales"],
   "cSpell.words": [
     "daisyui",
+    "echarts",
     "intlify",
     "leelaa",
     "nprogress",
     "pinia",
     "rushstack",
     "tailwindcss",
     "unplugin",
-    "vueuse"
+    "vueuse",
+    "Xdata"
   ],
   "i18n-ally.keystyle": "nested",
   "css.lint.unknownAtRules": "ignore",

diff --git a/index.html b/index.html
@@ -7,12 +7,9 @@
   </head>
   <body>
     <noscript>
-      <strong
-        >We're sorry but
-        doesn't work properly without JavaScript enabled. Please enable it to continue.</strong
-      >
+      <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app">
+    <main id="app">
       <div class="loading-view">
         <div class="orbit-spinner">
           <div class="orbit"></div>
@@ -21,7 +18,7 @@
         </div>
         <span class="loading-text">Loading...</span>
       </div>
-    </div>
+    </main>
     <style type="text/css">
       body {
         margin: 0;

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.6.8",
+    "echarts": "^5.5.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "theme-change": "^2.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/api/index.js b/src/api/index.js
@@ -17,8 +17,10 @@ export const request = async (url, options = {}) => {
     });
 };
 
+// 聊天接口
 export const chat = (text) => request(`api/ai?text=${text}`);
 
+// 登录接口
 export const login = (postData) => {
   return request(`api/user`, {
     method: 'POST',

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -7,7 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    BarView: typeof import('./components/charts/BarView.vue')['default']
+    ChartBar: typeof import('./components/charts/ChartBar.vue')['default']
     DropdownView: typeof import('./components/DropdownView.vue')['default']
+    LineView: typeof import('./components/charts/LineView.vue')['default']
     MessageBox: typeof import('./components/MsgBox/MessageBox.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

diff --git a/src/components/charts/BarView.vue b/src/components/charts/BarView.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="chart-bar" ref="chartBar" :style="style"></div>
+</template>
+<script setup>
+import * as echarts from "echarts/core";
+import { GridComponent } from "echarts/components";
+import { BarChart } from "echarts/charts";
+import { TitleComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { ref, onMounted, computed, watch } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { watchThrottled } from "@vueuse/core";
+const chartBar = ref(null);
+let myChart = "";
+const props = defineProps({
+  // x轴数据
+  xData: {
+    type: Object,
+    default: () => {},
+  },
+  // 数据
+  yData: {
+    type: Object,
+    default: () => {},
+  },
+  // 标题
+  title: {
+    type: String,
+    default: "",
+  },
+  // 样式
+  style: {
+    type: Object,
+    default: () => {},
+  },
+  // 颜色
+  color: {
+    type: String,
+    default: "",
+  },
+});
+// 更新图表
+const updateChart = () => {
+  const option = {
+    title: {
+      text: props.title,
+    },
+    xAxis: {
+      type: "category",
+      data: props.xData,
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: props.yData,
+        type: "bar",
+      },
+    ],
+  };
+  myChart.setOption(option);
+};
+// 组件加载
+onMounted(() => {
+  const window = computed(() => {
+    const { width, height } = useWindowSize();
+    return width.value * height.value;
+  });
+  echarts.use([GridComponent, BarChart, CanvasRenderer, TitleComponent]);
+  myChart = echarts.init(chartBar.value);
+  updateChart();
+
+  watchThrottled(
+    window,
+    () => {
+      myChart.resize();
+    },
+    { throttle: 800 }
+  );
+});
+
+// 监听数据发生变化
+
+watch(
+  [props.xData, props.yData],
+  () => {
+    updateChart();
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+.chart-bar {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/components/charts/LineView.vue b/src/components/charts/LineView.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="line-view"></div>
+</template>