图表

使用

Hucky 选用 Echarts + Vue Echarts 组件库来为项目绘制图表。首先您需要熟悉如何使用 Echarts 的 option 来绘制一个图表，您可以前往 Echarts 官方示例站点先选择一个参考图表，然后复制其 option 代码。

然后您需要前往 Vue Echarts 站点并使用其提供的引入代码生成器来生成 import 代码。将您的 option 对象粘贴并获取对应的 import 代码。注意这里粘贴的是具体的 option 对象，而不是以 option = 开头的赋值语句。

接下来在您需要用到图表的组件中引入 vue echarts 提供的 VChart 组件。并动态绑定 option 到 VChart 组件的 props 中。可参考如下代码。

<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 文档查看更多使用方法。 :::

1.6 KiB Raw Blame History

图表

使用

1.6 KiB

Raw Blame History