XUM Chart Widget

一个专为低代码平台设计的图表组件，支持柱状图、折线图和饼图。

🚀 特性

• 📊 支持多种图表类型：柱状图、折线图、饼图
• 🎨 可自定义主题色和样式
• 📱 响应式设计，适配不同屏幕尺寸
• ⚡ 轻量级，无外部依赖
• 🔧 专为低代码平台优化

📦 安装

npm install @xum-lowcode/chart-widget

🎯 CDN 使用

<!-- 从 unpkg CDN 加载 -->
<script src="https://unpkg.com/@xum-lowcode/[email protected]/dist/index.js"></script>

<!-- 从 jsdelivr CDN 加载 -->
<script src="https://cdn.jsdelivr.net/npm/@xum-lowcode/[email protected]/dist/index.js"></script>

🔧 Vue 3 使用

import XumChartWidget from '@xum-lowcode/chart-widget'

// 注册组件
app.component('XumChartWidget', XumChartWidget)

<template>
  <XumChartWidget
    type="bar"
    title="销售数据"
    :data="chartData"
    color="#67c23a"
    width="500px"
    height="300px"
  />
</template>

<script setup>
const chartData = [
  { name: '一月', value: 120 },
  { name: '二月', value: 200 },
  { name: '三月', value: 150 },
  { name: '四月', value: 80 }
]
</script>

📋 属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | String | 'bar' | 图表类型：'bar', 'line', 'pie' | | title | String | '数据图表' | 图表标题 | | data | Array | [] | 数据数组，格式：[{name, value}] | | width | String/Number | '100%' | 组件宽度 | | height | String/Number | '300px' | 组件高度 | | color | String | '#409eff' | 主题色 |

🎨 数据格式

const data = [
  { name: '分类1', value: 100 },
  { name: '分类2', value: 200 },
  { name: '分类3', value: 150 }
]

📄 License

MIT

👥 作者

XUM LowCode Team