🧱
搭积木式布局
h-panel + h-main + h-left + h-right 嵌套即页面结构，告别手写 CSS Grid/Flex 调试
了解布局系统
Hamster Charts
大屏可视化，像搭积木一样简单
Vue3 + Vite + ECharts · 25+ 组件开箱即用
Skip to content 
🏗️ 架构设计
Hamster Charts 采用分层架构，从底层依赖到顶层页面逐层封装：
| 层级 | 说明 |
|---|---|
| 依赖层 | Vue 3 响应式驱动 + ECharts 图表渲染 + VueUse 工具集 |
| 组件层 | 布局容器 → 面板区 → 图表/数据/交互组件，25+ 个独立包 |
| 应用层 | 引入即用，嵌套组合，一套代码适配多种大屏分辨率 |
🚀 三分钟上手
测试标题 📊 数据监控中心
月度营收趋势
月度营收趋势
月度营收趋势
总交易额
↑ 12.5%
区域销售排行
区域销售排行
区域销售排行
bash
# 安装
npm i hamster-chartsjs
// main.js
import HamsterCharts from 'hamster-charts'
import '/node_modules/hamster-charts/dist/hamster-charts.css'
app.use(HamsterCharts)html
<!-- 上面的完整大屏 = 也就这几行组件嵌套 -->
<template>
<h-panel :url="bg">
<h-header>📊 数据监控中心</h-header>
<h-main height="44px" display="flex">
<h-left><h-chart :option="lineOption" title="月度营收趋势" /></h-left>
<h-center><h-counter :data="1568920" digitColor="#409EFF" /></h-center>
<h-right>
<h-chart :option="barOption" title="区域销售排行" />
<h-list :data="listData" />
</h-right>
</h-main>
</h-panel>
</template>📦 技术栈
Vue 3ViteECharts 5VueUseGeoJSONTree Shaking