技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/tCsMFF956EX0JzAB8kkMuGpAUwWcW7KoJnzN1fY5.jpg)
](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)

[🛒 B2B2C商家入驻平台系统java版 **Java+vue+uniapp** 功能强大 稳定 支持diy 方便二开](https://wwads.cn/click/bundle?code=9jhZ2FXcnCRpk9xUn1XCDu9dgxbnga)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端图表功能
======

![](https://minio.pigx.top/oss/202311/1700887610.png)

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

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

[](#1-快速使用)1\. 快速使用
-------------------

*   访问 [ECharts 官网](https://echarts.apache.org/examples/zh/index.html#chart-type-bar)，选择目标类型的图表组件，获取图表的 option 配置 JSON。

![](https://minio.pigx.top/oss/202311/1700888098.png)

*   访问 [vue-echarts 代码生成器](https://vue-echarts.dev/#codegen)。

![](https://minio.pigx.top/oss/202311/1700888283.png)

[](#2-业务页面使用-vue-echarts)2\. 业务页面使用 vue-echarts
-----------------------------------------------

```


`<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
])

// 定义 JSON
const option = reactive(复制 EChart option JSON)`




```

### 本页导航

1\. 快速使用

2\. 业务页面使用 vue-echarts