feat: add echarts

docs/.vitepress/config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
           { text: "自动路由", link: "/cli-feature/auto-router" },
           { text: "组件库", link: "/cli-feature/component-lib" },
           { text: "国际化", link: "/cli-feature/international" },
+          { text: "图表", link: "/cli-feature/chart" },
         ],
       },
     ],

docs/cli-feature/chart.md

@@ -0,0 +1,42 @@
+# 图表
+
+## 使用
+
+Hucky 选用 Echarts + Vue Echarts 组件库来为项目绘制图表。首先您需要熟悉如何使用 Echarts 的 option 来绘制一个图表，您可以前往 [Echarts 官方示例站点](https://echarts.apache.org/examples/zh/index.html) 先选择一个参考图表，然后复制其 option 代码。
+
+然后您需要前往 [Vue Echarts 站点](https://vue-echarts.dev/#codegen) 并使用其提供的引入代码生成器来生成 import 代码。将您的 option 对象粘贴并获取对应的 import 代码。注意这里粘贴的是具体的 option 对象，而不是以 option = 开头的赋值语句。
+
+接下来在您需要用到图表的组件中引入 vue echarts 提供的 VChart 组件。并动态绑定 option 到 VChart 组件的 props 中。可参考如下代码。
+
+```vue
+<script setup lang="ts">
+import VChart from "vue-echarts";
+import { type EChartsOption } from "echarts";
+
+// 自动生成的 import 代码
+import { use } from "echarts/core";
+import { PieChart } from "echarts/charts";
+import { TooltipComponent, LegendComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+
+use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);
+
+const option = ref<EChartsOption>({
+  // 此处为您复制的 Echarts 官方示例站点的 option 代码
+});
+</script>
+
+<template>
+  <!-- 必须设置图表容器的高度和宽度 -->
+  <div class="h-96 w-96">
+    <VChart :option="option" />
+  </div>
+</template>
+
+<style scoped></style>
+
+```
+
+:::tip 提示
+您可以前往 [Vue Echarts 文档](https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md) 查看更多使用方法。
+:::