可视化组件库

安装依赖

  npm install 
  yarn install

使用说明

安装

npm install ag-chart-ui echarts vue-echarts

基本使用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import AgPlugin from 'ag-chart-ui'
import 'ag-chart-ui/style.css'

const app = createApp(App)
app.use(AgPlugin) // 注册所有组件
app.mount('#app')

使用组件

<template>
  <div>
    <!-- 水球图 -->
    <ag-water-polo :series-data="waterData" />
    
    <!-- 柱状图 -->
    <ag-rect-bar :series-data="barData" />
  </div>
</template>

<script setup>
const waterData = [
  {
    name: '完成率',
    value: 75.5,
    unit: '%'
  }
]

const barData = [
  { name: '周一', value: 120 },
  { name: '周二', value: 200 },
  { name: '周三', value: 150 }
]
</script>

按需引入

import { AgWaterPolo, AgRectBar } from 'ag-chart-ui'
import 'ag-chart-ui/style.css'

const app = createApp(App)
app.component('AgWaterPolo', AgWaterPolo)
app.component('AgRectBar', AgRectBar)
app.mount('#app')

开发新组件

npm run gen

根据提示填写组件名称，描述等。

打包组件库

  npm run build:lib

发布

  npm publish