📄 前端图表功能

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

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

1. 快速使用

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

• 访问 vue-echarts 代码生成器 (opens new window)。

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)