43 lines
1.6 KiB
Markdown
43 lines
1.6 KiB
Markdown
# 图表
|
|
|
|
## 使用
|
|
|
|
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) 查看更多使用方法。
|
|
:::
|