Biểu Đồ Cột
Hiển thị dữ liệu dưới dạng cột dọc hoặc ngang với hỗ trợ bố cục xếp chồng và nhóm.
Loading chart...
Cài Đặt
bash
npx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
pnpm dlx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
yarn dlx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
bunx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add bar-chart1
2
2
Dependencies
Component này tự động cài đặt các dependencies sau:
- Vue:
vue-echarts@^7.0.3,echarts@^5.5.1 - React:
echarts-for-react@^3.0.2,echarts@^5.5.1 - Angular:
ngx-echarts@^18.0.0,echarts@^5.5.1 - React Native:
@wuba/react-native-echarts@^3.0.1,echarts@^5.5.1,@shopify/react-native-skia@^1.6.4 - Flutter:
fl_chart@^0.68.0
Không cần cài đặt thủ công!
Sử Dụng
Biểu Đồ Cột Cơ Bản
Biểu đồ cột dọc đơn giản với một dataset:
vue
<script setup lang="ts">
import { BarChart } from '@/components/ui/charts'
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [{
label: 'Doanh thu',
data: [120, 190, 300, 500, 420],
color: '#3b82f6'
}]
}
</script>
<template>
<BarChart :data="data" :height="300" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
tsx
import { BarChart } from "@/components/ui/charts"
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [{
label: 'Doanh thu',
data: [120, 190, 300, 500, 420],
color: '#3b82f6'
}]
}
export default function App() {
return <BarChart data={data} height={300} />
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Biểu Đồ Cột Ngang
Sử dụng orientation="horizontal" để hiển thị cột ngang:
vue
<BarChart :data="data" :height="300" orientation="horizontal" />1
tsx
<BarChart data={data} height={300} orientation="horizontal" />1
Biểu Đồ Cột Nhóm
So sánh nhiều dataset song song:
vue
<script setup lang="ts">
const groupedData = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{ label: '2023', data: [100, 150, 200, 250], color: '#3b82f6' },
{ label: '2024', data: [120, 180, 220, 280], color: '#10b981' }
]
}
</script>
<template>
<BarChart :data="groupedData" :height="300" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
tsx
const groupedData = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{ label: '2023', data: [100, 150, 200, 250], color: '#3b82f6' },
{ label: '2024', data: [120, 180, 220, 280], color: '#10b981' }
]
}
<BarChart data={groupedData} height={300} />1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Biểu Đồ Cột Xếp Chồng
Sử dụng stacked để xếp chồng các dataset:
vue
<BarChart :data="groupedData" :height="300" stacked />1
tsx
<BarChart data={groupedData} height={300} stacked />1
API Reference
Props
| Prop | Type | Default | Mô Tả |
|---|---|---|---|
data | ChartData | required | Dữ liệu biểu đồ với labels và datasets |
height | number | 300 | Chiều cao biểu đồ (pixels) |
width | number | string | '100%' | Chiều rộng biểu đồ |
theme | 'light' | 'dark' | 'light' | Chủ đề màu sắc |
orientation | 'vertical' | 'horizontal' | 'vertical' | Hướng cột |
stacked | boolean | false | Xếp chồng các dataset |
rounded | boolean | true | Bo góc cột |
showLabel | boolean | true | Hiển thị giá trị trên cột |
legend | boolean | true | Hiển thị chú thích |
legendPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | Vị trí chú thích |
animation | boolean | true | Bật/tắt animation |
loading | boolean | false | Hiển thị trạng thái loading |
emptyText | string | 'Không có dữ liệu' | Thông báo khi không có dữ liệu |
ChartData Interface
typescript
interface ChartData {
labels: string[]
datasets: ChartDataset[]
}
interface ChartDataset {
label: string
data: number[]
color?: string
backgroundColor?: string
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Use Cases
- Dashboard KPIs - Hiển thị số liệu quan trọng với tác động trực quan
- So Sánh Theo Thời Gian - Theo dõi xu hướng qua các khoảng thời gian
- Phân Tích Danh Mục - So sánh giá trị qua các danh mục
- Theo Dõi Tiến Độ - Hiển thị trạng thái hoàn thành
- Kết Quả Khảo Sát - Hiển thị dữ liệu khảo sát
Accessibility
- Screen Reader: Mô tả văn bản thay thế cho dữ liệu
- Keyboard Navigation: Điều hướng bằng bàn phím
- Color Contrast: Tỷ lệ tương phản màu sắc đạt chuẩn
- Focus Indicators: Chỉ báo focus rõ ràng
Các Ví Dụ Khác
Biểu Đồ Cột Với Target Line
vue
<script setup lang="ts">
const targetData = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{ label: 'Actual', data: [95, 110, 125, 140], color: '#3b82f6' },
{ label: 'Target', data: [100, 120, 130, 150], color: '#10b981', type: 'line' }
]
}
</script>
<template>
<BarChart :data="targetData" :height="300" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Biểu Đồ Cột 100% Stacked
vue
<BarChart :data="groupedData" :height="300" stacked="100%" />1
tsx
<BarChart data={groupedData} height={300} stacked="100%" />1
Best Practices
1. Giới Hạn Số Lượng Cột
vue
<!-- ✅ Tốt: 5-10 cột -->
<BarChart :data="data" />
<!-- ❌ Tránh: Quá nhiều cột gây khó đọc -->
<BarChart :data="tooManyData" />1
2
3
4
5
2
3
4
5
2. Sử Dụng Màu Sắc Phù Hợp
typescript
// ✅ Sử dụng palette có sẵn
const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444']
// ❌ Tránh màu sắc không tương phản
const colors = ['#000000', '#0a0a0a', '#141414']1
2
3
4
5
2
3
4
5
3. Responsive Design
vue
<template>
<div class="w-full aspect-video">
<BarChart :data="data" />
</div>
</template>1
2
3
4
5
2
3
4
5
Framework Support
| Framework | Thư Viện | Version |
|---|---|---|
| Vue | ECharts | ^5.5.1 |
| React | ECharts for React | ^3.0.2 |
| Angular | ngx-echarts | ^18.0.0 |
| React Native | @wuba/react-native-echarts | ^3.0.1 |
| Flutter | fl_chart | ^0.68.0 |
Các Trang Liên Quan
- Biểu đồ đường - Hiển thị xu hướng theo thời gian
- Biểu đồ vùng - Trực quan hóa tích lũy
- Biểu đồ kết hợp - Kết hợp nhiều loại biểu đồ