Biểu Đồ Kết Hợp

Kết hợp nhiều loại biểu đồ (đường, cột, vùng) trong một trực quan hóa mạnh mẽ để phân tích dữ liệu đa chiều.

Loading chart...

Cài Đặt

bash

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

bash

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

bash

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

bash

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

bash

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add mixed-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 Đồ Kết Hợp Cơ Bản

VueReact

vue

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

const data = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [
    { label: 'Doanh Thu', data: [100, 150, 200, 250], type: 'line', color: '#3b82f6' },
    { label: 'Chi Phí', data: [80, 100, 120, 150], type: 'bar', color: '#10b981' }
  ]
}
</script>

<template>
  <MixedChart :data="data" :height="350" />
</template>

tsx

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

const data = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [
    { label: 'Doanh Thu', data: [100, 150, 200, 250], type: 'line', color: '#3b82f6' },
    { label: 'Chi Phí', data: [80, 100, 120, 150], type: 'bar', color: '#10b981' }
  ]
}

export default function App() {
  return <MixedChart data={data} height={350} />
}

Biểu Đồ Kết Hợp Line + Bar

VueReact

vue

<script setup lang="ts">
const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    { label: 'Lượng Mưa', data: [50, 60, 70, 80, 90], type: 'bar', color: '#3b82f6' },
    { label: 'Nhiệt Độ', data: [20, 22, 25, 28, 30], type: 'line', color: '#f59e0b' }
  ]
}
</script>

<template>
  <MixedChart :data="data" :height="350" />
</template>

tsx

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    { label: 'Lượng Mưa', data: [50, 60, 70, 80, 90], type: 'bar', color: '#3b82f6' },
    { label: 'Nhiệt Độ', data: [20, 22, 25, 28, 30], type: 'line', color: '#f59e0b' }
  ]
}

<MixedChart data={data} height={350} />

Biểu Đồ Kết Hợp Line + Bar + Area

VueReact

vue

<script setup lang="ts">
const data = {
  labels: ['2020', '2021', '2022', '2023', '2024'],
  datasets: [
    { label: 'Users', data: [1000, 1500, 2000, 2500, 3000], type: 'bar', color: '#3b82f6' },
    { label: 'Revenue', data: [500, 750, 1000, 1250, 1500], type: 'line', color: '#10b981' },
    { label: 'Profit', data: [200, 300, 400, 500, 600], type: 'area', color: '#f59e0b' }
  ]
}
</script>

<template>
  <MixedChart :data="data" :height="350" />
</template>

tsx

const data = {
  labels: ['2020', '2021', '2022', '2023', '2024'],
  datasets: [
    { label: 'Users', data: [1000, 1500, 2000, 2500, 3000], type: 'bar', color: '#3b82f6' },
    { label: 'Revenue', data: [500, 750, 1000, 1250, 1500], type: 'line', color: '#10b981' },
    { label: 'Profit', data: [200, 300, 400, 500, 600], type: 'area', color: '#f59e0b' }
  ]
}

<MixedChart data={data} height={350} />

Biểu Đồ Với Dual Y-Axis

VueReact

vue

<MixedChart
  :data="data"
  :height="350"
  :dualYAxis="true"
  yAxisLeftLabel="Doanh Thu ($)"
  yAxisRightLabel="Tăng Trưởng (%)"
/>

tsx

<MixedChart
  data={data}
  height={350}
  dualYAxis
  yAxisLeftLabel="Doanh Thu ($)"
  yAxisRightLabel="Tăng Trưởng (%)"
/>

API Reference

Props

Prop	Type	Default	Mô Tả
`data`	`ChartData`	required	Dữ liệu biểu đồ với labels và datasets
`height`	`number`	`350`	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
`dualYAxis`	`boolean`	`false`	Hiển thị hai trục Y
`yAxisLeftLabel`	`string`	`''`	Nhãn trục Y trái
`yAxisRightLabel`	`string`	`''`	Nhãn trục Y phải
`showLabel`	`boolean`	`true`	Hiển thị giá trị trên biểu đồ
`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[]
  type: 'line' | 'bar' | 'area'
  color?: string
  yAxisIndex?: number // 0 for left, 1 for right
}

Use Cases

Dashboard Tài Chính - Hiển thị revenue, costs, profit cùng lúc
Phân Tích Hiệu Suất - So sánh multiple metrics
Theo Dõi KPIs - Trực quan hóa nhiều chỉ số quan trọng
Báo Cáo Bán Hàng - Kết hợp sales volume và revenue
Phân Tích Thời Tiết - Hiển thị temperature và precipitation

Best Practices

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

vue

<!-- ✅ Tốt: 2-4 datasets -->
<MixedChart :data="data" />

<!-- ❌ Tránh: Quá nhiều datasets gây rối -->
<MixedChart :data="tooManyDatasets" />

2. Sử Dụng Dual Y-Axis Cho Different Scales

vue

<!-- ✅ Sử dụng dual axis cho khác scale -->
<MixedChart
  :data="data"
  :dualYAxis="true"
  yAxisLeftLabel="Doanh Thu ($)"
  yAxisRightLabel="Tăng Trưởng (%)"
/>

3. Phân Biệt Chart Types Rõ Ràng

typescript

// ✅ Sử dụng chart types phân biệt
const datasets = [
  { label: 'Revenue', type: 'line', color: '#3b82f6' },
  { label: 'Costs', type: 'bar', color: '#10b981' },
  { label: 'Profit', type: 'area', color: '#f59e0b' }
]

// ❌ Tránh cùng type
const datasets = [
  { label: 'Revenue', type: 'line' },
  { label: 'Costs', type: 'line' },
  { label: 'Profit', type: 'line' }
]

4. Responsive Design

vue

<template>
  <div class="w-full aspect-video">
    <MixedChart :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 Đồ Với Smooth Line

VueReact

vue

<MixedChart :data="data" :height="350" :smooth="true" />

tsx

<MixedChart data={data} height={350} smooth />

Biểu Đồ Với Stacked Bar

VueReact

vue

<MixedChart :data="data" :height="350" :stacked="true" />

tsx

<MixedChart data={data} height={350} stacked />

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 đồ cột](/vi/ch

Biểu Đồ Kết Hợp ​

Cài Đặt ​

Sử Dụng ​

Biểu Đồ Kết Hợp Cơ Bản ​

Biểu Đồ Kết Hợp Line + Bar ​

Biểu Đồ Kết Hợp Line + Bar + Area ​

Biểu Đồ Với Dual Y-Axis ​

API Reference ​

Props ​

ChartData Interface ​

Use Cases ​

Best Practices ​

1. Giới Hạn Số Lượng Datasets ​

2. Sử Dụng Dual Y-Axis Cho Different Scales ​

3. Phân Biệt Chart Types Rõ Ràng ​

4. Responsive Design ​

Accessibility ​

Các Ví Dụ Khác ​

Biểu Đồ Với Smooth Line ​

Biểu Đồ Với Stacked Bar ​

Framework Support ​

Các Trang Liên Quan ​

Biểu Đồ Kết Hợp

Cài Đặt

Sử Dụng

Biểu Đồ Kết Hợp Cơ Bản

Biểu Đồ Kết Hợp Line + Bar

Biểu Đồ Kết Hợp Line + Bar + Area

Biểu Đồ Với Dual Y-Axis

API Reference

Props

ChartData Interface

Use Cases

Best Practices

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

2. Sử Dụng Dual Y-Axis Cho Different Scales

3. Phân Biệt Chart Types Rõ Ràng

4. Responsive Design

Accessibility

Các Ví Dụ Khác

Biểu Đồ Với Smooth Line

Biểu Đồ Với Stacked Bar

Framework Support

Các Trang Liên Quan