JLC Docs
PIG
AI
PIG
AI

前端图表功能

组件预览

图表组件示例

Vue Echarts 是一个 Vue.js 的 ECharts 图表组件，对 EChart 进行了封装，简化了 Echart 图表的使用。

pigx-ui 默认引入了 vue-echarts，业务代码中可以非常方便地使用相关的 EChart 图表组件，例如日志管理等页面。

快速使用

步骤 1：获取图表配置

访问 ECharts 官网，选择目标类型的图表组件，获取图表的 option 配置 JSON。

ECharts 官网示例

步骤 2：生成 Vue 代码

访问 vue-echarts 代码生成器，粘贴从 ECharts 官网复制的 option 配置，生成 Vue 代码。

vue-echarts 代码生成器
代码生成器

vue-echarts 官方提供的代码生成器可以自动将 ECharts option 转换为 Vue 组件代码，大大简化开发流程。

业务页面使用

将代码生成器生成的代码复制到业务页面中即可使用：

<template>
  <v-chart class="h-80 w-full" :option="option" />
</template>

<script setup lang="ts" name="demo-chart">
// 直接复制 vue-echart codegen 生成的 vue 代码部分
import { use, reactive } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([
  GridComponent,
  BarChart,
  CanvasRenderer
]);

// 定义 option 配置
const option = reactive({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});
</script>
按需引入

为了减小打包体积，vue-echarts 采用按需引入的方式。需要使用哪些图表类型或组件，就在代码中 import 相应的模块。

图表类型

柱状图

<script setup lang="ts">
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';

use([
  GridComponent,
  TooltipComponent,
  BarChart,
  CanvasRenderer
]);
</script>

折线图

<script setup lang="ts">
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';

use([
  GridComponent,
  TooltipComponent,
  LineChart,
  CanvasRenderer
]);
</script>

饼图

<script setup lang="ts">
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer
]);
</script>

动态数据更新

使用 reactive 或 ref 定义 option，可以实现图表数据的动态更新：

<template>
  <v-chart class="h-80 w-full" :option="option" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([GridComponent, BarChart, CanvasRenderer]);

const option = reactive({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});

// 动态更新数据
const updateData = () => {
  option.series[0].data = [150, 230, 224, 218, 135, 147, 260];
};
</script>
响应式更新

使用 reactive 定义的 option 具有响应式特性，修改数据后图表会自动重新渲染。

图表样式配置

设置图表尺寸

通过 class 或 style 设置图表容器的尺寸：

<template>
  <!-- 使用 Tailwind CSS 类名 -->
  <v-chart class="h-96 w-full" :option="option" />

  <!-- 或使用 style -->
  <v-chart style="height: 400px; width: 100%;" :option="option" />
</template>

主题配置

可以通过 theme 属性设置图表主题：

<template>
  <v-chart :option="option" theme="dark" />
</template>

响应式图表

图表会自动响应容器尺寸的变化，无需手动调用 resize 方法。

<template>
  <div class="chart-container">
    <v-chart class="h-full w-full" :option="option" />
  </div>
</template>

<style scoped>
.chart-container {
  height: 100%;
  min-height: 300px;
}
</style>
自动响应

vue-echarts 内置了 ResizeObserver，可以自动监听容器尺寸变化并调整图表大小，无需手动处理。

常用组件引入

以下是常用的 ECharts 组件模块：

// 图表类型
import {
  BarChart,      // 柱状图
  LineChart,     // 折线图
  PieChart,      // 饼图
  ScatterChart,  // 散点图
  RadarChart,    // 雷达图
  MapChart,      // 地图
  TreeChart,     // 树图
  GraphChart,    // 关系图
  GaugeChart,    // 仪表盘
  FunnelChart,   // 漏斗图
  ParallelChart, // 平行坐标
  SankeyChart,   // 桑基图
  BoxplotChart,  // 箱线图
  CandlestickChart, // K线图
  EffectScatterChart, // 涟漪散点图
  LinesChart,    // 路径图
  HeatmapChart,  // 热力图
  PictorialBarChart, // 象形柱图
  ThemeRiverChart, // 主题河流图
  SunburstChart, // 旭日图
  CustomChart    // 自定义系列
} from 'echarts/charts';

// 组件
import {
  GridComponent,        // 网格
  PolarComponent,       // 极坐标系
  GeoComponent,         // 地理坐标系
  TooltipComponent,     // 提示框
  LegendComponent,      // 图例
  TitleComponent,       // 标题
  ToolboxComponent,     // 工具栏
  DataZoomComponent,    // 数据区域缩放
  VisualMapComponent,   // 视觉映射
  TimelineComponent,    // 时间线
  CalendarComponent,    // 日历
  GraphicComponent,     // 图形元素
  MarkPointComponent,   // 标注点
  MarkLineComponent,    // 标注线
  MarkAreaComponent,    // 标注区域
  DatasetComponent,     // 数据集
  TransformComponent,   // 数据转换
  AriaComponent,        // 无障碍
  ParallelComponent,    // 平行坐标系
  RadarComponent,       // 雷达坐标系
  SingleAxisComponent,  // 单轴
  BrushComponent,       // 刷选
} from 'echarts/components';

// 渲染器
import { CanvasRenderer } from 'echarts/renderers';
// 或使用 SVG 渲染器
// import { SVGRenderer } from 'echarts/renderers';
模块引入

使用图表前必须先通过 use() 函数注册所需的组件和渲染器，否则图表无法正常显示。

本页目录