Trong các ứng dụng quản trị hiện đại, khả năng trực quan hóa dữ liệu đóng vai trò then chốt. Với Vue 3, việc tích hợp các thư viện biểu đồ như Chart.js hoặc hiển thị dữ liệu địa lý qua bản đồ trở nên đơn giản và hiệu quả hơn bao giờ hết.

Sử dụng Chart.js trong Vue 3

Chart.js là một thư viện nhẹ, linh hoạt và hỗ trợ nhiều loại biểu đồ phổ biến như cột, đường, tròn, radar... Để sử dụng trong dự án Vue 3, trước tiên cài đặt thư viện:

npm install chart.js

Tạo một component biểu đồ cơ bản bằng cách kết hợp ref và lifecycle hook onMounted:

<template>
  <canvas ref="chartCanvas"></canvas>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Chart } from 'chart.js/auto';

const chartCanvas = ref<HTMLCanvasElement | null>(null);
let chartInstance: Chart | null = null;

onMounted(() => {
  if (chartCanvas.value) {
    chartInstance = new Chart(chartCanvas.value, {
      type: 'bar',
      data: {
        labels: ['Tháng 1', 'Tháng 2', 'Tháng 3'],
        datasets: [{
          label: 'Doanh thu',
          data: [120, 190, 150],
          backgroundColor: '#4f86f7'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  }
});
</script>

Tích hợp bản đồ với ECharts

Mặc dù tiêu đề đề cập đến Chart.js, nhưng nhiều trường hợp cần biểu diễn dữ liệu theo vùng địa lý — lúc này ECharts lại phù hợp hơn nhờ hỗ trợ bản đồ tích hợp sẵn.

Đầu tiên, cài đặt ECharts:

npm install echarts

Sau đó, đăng ký dữ liệu bản đồ (ví dụ: Việt Nam hoặc Trung Quốc) và khởi tạo biểu đồ dạng map:

<template>
  <div ref="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import vietnamGeo from './vietnam.json'; // Dữ liệu GeoJSON

const mapContainer = ref<HTMLDivElement | null>(null);

onMounted(() => {
  echarts.registerMap('vietnam', vietnamGeo);

  const myChart = echarts.init(mapContainer.value!);
  myChart.setOption({
    tooltip: { show: true },
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['Cao', 'Thấp'],
      calculable: true
    },
    series: [{
      name: 'Dân số',
      type: 'map',
      map: 'vietnam',
      data: [
        { name: 'Hà Nội', value: 800 },
        { name: 'TP.HCM', value: 950 }
      ]
    }]
  });
});
</script>

Tích hợp dịch vụ bản đồ bên thứ ba

Đối với nhu cầu tương tác cao hơn (như tìm đường, đánh dấu vị trí thực), có thể tích hợp API từ Google Maps, Mapbox hoặc OpenStreetMap.

Ví dụ tích hợp Mapbox (không yêu cầu khóa API cho môi trường phát triển):

<template>
  <div ref="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const mapContainer = ref<HTMLDivElement | null>(null);

onMounted(async () => {
  const mapboxgl = await import('mapbox-gl');
  import('mapbox-gl/dist/mapbox-gl.css');

  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

  new mapboxgl.Map({
    container: mapContainer.value!,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [106.6297, 10.8231], // TP.HCM
    zoom: 10
  });
});
</script>

Tối ưu hiệu năng và trải nghiệm người dùng

• Lazy load thư viện bản đồ: Chỉ tải script khi component được mount để giảm kích thước bundle ban đầu.
• Resize tự động: Lắng nghe sự kiện resize của cửa sổ và gọi phương thức resize() của biểu đồ để đảm bảo hiển thị đúng trên mọi thiết bị.
• Hủy khởi tạo khi component unmount: Gọi chartInstance.destroy() hoặc map.remove() để tránh rò rỉ bộ nhớ.

Lưu ý: Khi sử dụng dữ liệu bản đồ GeoJSON, hãy đảm bảo định dạng chuẩn và tên vùng khớp với dữ liệu hiển thị để tránh lỗi không render.