Biểu Đồ Tròn

Hiển thị dữ liệu tỷ lệ dưới dạng biểu đồ tròn với nhãn và chú thích tùy chỉnh.

Loading chart...

Cài Đặt

npm

npx @galaxy-stack/nebula-cli@latest add pie-chart

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add pie-chart

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add pie-chart

bun

bunx @galaxy-stack/nebula-cli@latest add pie-chart

global

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add pie-chart

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 Đồ Tròn Cơ Bản

Biểu đồ tròn đơn giản với một dataset:

Vue

<script setup lang="ts">
import { PieChart } from '@/components/ui/charts'

const data = {
  labels: ['Direct', 'Email', 'Social', 'Referral'],
  datasets: [{
    label: 'Nguồn Truy Cập',
    data: [30, 25, 20, 25],
    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444']
  }]
}
</script>

<template>
  <PieChart :data="data" :height="300" />
</template>

React

import { PieChart } from "@/components/ui/charts"

const data = {
  labels: ['Direct', 'Email', 'Social', 'Referral'],
  datasets: [{
    label: 'Nguồn Truy Cập',
    data: [30, 25, 20, 25],
    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444']
  }]
}

export default function App() {
  return <PieChart data={data} height={300} />
}

Biểu Đồ Tròn Với Chú Thích Bên Ngoài

Vue

<PieChart :data="data" :height="300" labelPosition="outside" />

React

<PieChart data={data} height={300} labelPosition="outside" />

Biểu Đồ Tròn Với Phần Trăm

Vue

<PieChart :data="data" :height="300" :showPercentage="true" />

React

<PieChart data={data} height={300} showPercentage={true} />

Biểu Đồ Tròn Với Custom Colors

Vue

<script setup lang="ts">
const customData = {
  labels: ['Chrome', 'Safari', 'Firefox', 'Edge'],
  datasets: [{
    label: 'Trình Duyệt',
    data: [45, 25, 15, 15],
    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
  }]
}
</script>

<template>
  <PieChart :data="customData" :height="300" />
</template>

React

const customData = {
  labels: ['Chrome', 'Safari', 'Firefox', 'Edge'],
  datasets: [{
    label: 'Trình Duyệt',
    data: [45, 25, 15, 15],
    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
  }]
}

<PieChart data={customData} height={300} />

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
legend	boolean	true	Hiển thị/ẩn chú thích
legendPosition	'top' | 'bottom' | 'left' | 'right'	'right'	Vị trí chú thích
showPercentage	boolean	true	Hiển thị phần trăm trong nhãn
labelPosition	'inside' | 'outside' | 'center'	'outside'	Vị trí nhãn
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

interface ChartData {
  labels: string[]
  datasets: ChartDataset[]
}

interface ChartDataset {
  label: string
  data: number[]
  backgroundColor?: string[]
}

Use Cases

• Phân Tích Thị Phần - Hiển thị tỷ lệ thị trường
• Ngân Sách Phân Bổ - Trực quan hóa chi tiêu hoặc phân bổ nguồn lực
• Kết Quả Khảo Sát - Hiển thị dữ liệu khảo sát hoặc poll
• Thành Phần Dữ Liệu - Hiển thị breakdown của tổng số
• KPI Dashboard - Hiển thị số liệu quan trọng với tác động trực quan

Best Practices

1. Giới Hạn Số Lượng Phần

<!-- ✅ Tốt: 3-6 phần -->
<PieChart :data="data" />

<!-- ❌ Tránh: Quá nhiều phần gây khó đọc -->
<PieChart :data="tooManySegments" />

2. Sử Dụng Màu Sắc Tương Phản

// ✅ Sử dụng palette có sẵn
const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444']

// ❌ Tránh màu sắc quá giống nhau
const colors = ['#3b82f6', '#3a81f5', '#3980f4']

3. Sắp Xếp Theo Thứ Tự

// ✅ Sắp xếp giảm dần để dễ đọc
const data = {
  labels: ['Largest', 'Medium', 'Small', 'Smallest'],
  datasets: [{ data: [50, 30, 15, 5] }]
}

4. Responsive Design

<template>
  <div class="w-full aspect-square">
    <PieChart :data="data" />
  </div>
</template>

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 Đồ Tròn Với Center Label

Vue

<PieChart :data="data" :height="300" labelPosition="center" />

React

<PieChart data={data} height={300} labelPosition="center" />

Biểu Đồ Tròn Với Legend Bottom

Vue

<PieChart :data="data" :height="300" legendPosition="bottom" />

React

<PieChart data={data} height={300} legendPosition="bottom" />

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 đồ bánh rán - Biến thể của biểu đồ tròn với tâm rỗng
• Biểu đồ vùng - Trực quan hóa tích lũy
• Tổng quan biểu đồ - Giới thiệu tất cả các loại biểu đồ