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 方便二开广告

PIGX 技术指南

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

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端图表功能

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

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

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

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

访问 vue-echarts 代码生成器。

[](#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

2.md 2.2 KB パーマリンク 履歴 Raw