diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 0000000000000000000000000000000000000000..8d6591c0530cf453cdd231556355574c3f13e455
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,12 @@
+{
+  "systemParams": "win32-x64-115",
+  "modulesFolders": [
+    "node_modules"
+  ],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 100f19964ba02477814fcfcbec821abc79329a04..91b4792cc372c01d97da50fbd6fc1d24a56c3806 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "axios": "^1.6.0",
+    "echarts": "^5.4.3",
     "element-plus": "^2.4.1",
     "esbuild": "^0.19.10",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
@@ -24,4 +26,4 @@
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/components/barChart.vue b/web/src/components/barChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db6b7c639e3725f9e94f46a15cc61122091ac4fd
--- /dev/null
+++ b/web/src/components/barChart.vue
@@ -0,0 +1,102 @@
+<template>
+  <div id="main">
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts/core';
+import {
+  BarChart
+} from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  // 数据集组件
+  DatasetComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption
+} from 'echarts/charts';
+import type {
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  LegendComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  DatasetComponentOption
+} from 'echarts/components';
+import type {
+  ComposeOption,
+} from 'echarts/core';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = ComposeOption<
+  | BarSeriesOption
+  | TitleComponentOption
+  | LegendComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LabelLayout,
+  LegendComponent,
+  UniversalTransition,
+  CanvasRenderer
+]);
+var myChart: any;
+onMounted(() => {
+  myChart = echarts.init(document.getElementById('main'), null, {
+    width: 600,
+    height: 400
+  });
+
+
+  var option;
+
+  option = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+      source: [
+        ['product', '2015', '2016', '2017'],
+        ['Matcha Latte', 43.3, 85.8, 93.7],
+        ['Milk Tea', 83.1, 73.4, 55.1],
+        ['Cheese Cocoa', 86.4, 65.2, 82.5],
+        ['Walnut Brownie', 72.4, 53.9, 39.1]
+      ]
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+  };
+
+  option && myChart.setOption(option);
+
+
+  window.addEventListener('resize', function () {
+    myChart.resize();
+  });
+})
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/web/src/main.ts b/web/src/main.ts
index 168077c42882631321b7eb57921a0ac8bed8ba56..5e9ce2977a3a3b1dcb6464b4c6ebd94e2353ae39 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -8,16 +8,16 @@ import MyButton from "@/components/myButton.vue";
 import { ElDialog } from "element-plus";
 import "element-plus/dist/index.css";
 import router from "./router";
-import { createPinia } from "pinia";
+import pinia from '@/store'
 
 const app = createApp(App);
 // 设置全局变量
-// app.config.globalProperties.$router = router;
+// app.config.globalProperties.echarts = echarts;
 app.component("el-dialog", ElDialog);
 app.component("my-table", MyTable);
 app.component("my-button", MyButton);
 
-app.use(createPinia());
+app.use(pinia);
 app.use(router);
 app.use(ElementPlus);
 
diff --git a/web/src/store/atune.ts b/web/src/store/atune.ts
index 6a241c63797fe1620f90c63c1b8c577c05f5fcec..035f1a7a6ccd85417a920f96ecc70e9ae0a20aed 100644
--- a/web/src/store/atune.ts
+++ b/web/src/store/atune.ts
@@ -12,4 +12,5 @@ export const useAtuneStore = defineStore("atune", {
     },
 
   },
+  persist: true
 });
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b9a4bbfe66dac23e4c862fe1920478c18f24cf46
--- /dev/null
+++ b/web/src/store/index.ts
@@ -0,0 +1,7 @@
+// store数据持久化
+import { createPinia } from 'pinia'
+import piniaPersisted from 'pinia-plugin-persistedstate'
+const pinia = createPinia();
+pinia.use(piniaPersisted);
+
+export default pinia;
\ No newline at end of file
diff --git a/web/yarn.lock b/web/yarn.lock
index edb0a883fe423e9b480619f8b7f463679490c856..9063510dc09ff12381feeebcf77116184a6075ad 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -525,6 +525,14 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 element-plus@^2.4.1:
   version "2.4.4"
   resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz#962be40b4843381af04b8f799bfc142072184b8b"
@@ -792,6 +800,11 @@ pify@^4.0.1:
   resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia-plugin-persistedstate@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz#66780602aecd6c7b152dd7e3ddc249a1f7a13fe5"
+  integrity sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==
+
 pinia@^2.1.7:
   version "2.1.7"
   resolved "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
@@ -858,6 +871,11 @@ source-map@~0.6.0:
   resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.3.0:
   version "2.6.2"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
@@ -928,3 +946,10 @@ yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"