Giới thiệu

Khi bạn sử dụng Apache ECharts với React, chắc chắn bạn đã trải nghiệm sức mạnh của nó trong việc hiển thị các biểu đồ đẹp mắt. Tuy nhiên, có một vấn đề mà nhiều người dùng gặp phải: khi dữ liệu quá lớn, biểu đồ có thể không hiển thị đúng cách. Trong bài viết này, tôi sẽ chia sẻ một giải pháp đơn giản nhưng hiệu quả để khắc phục tình trạng biểu đồ không cuộn được khi dữ liệu quá nhiều.

Vấn Đề

Khi bạn cố gắng hiển thị một lượng lớn dữ liệu, mặc định ECharts sẽ cố gắng vừa đủ tất cả dữ liệu vào chiều rộng hiển thị của biểu đồ. Kết quả là nếu bạn có hơn 200 thanh, thay vì cuộn, bạn sẽ thấy điều gì đó giống như đầu ra của máy quét mã vạch. Điều này không chỉ gây khó khăn cho việc xem biểu đồ mà còn làm mất đi tính thẩm mỹ.

Giải Pháp (Mẹo Tăng Kích Thước Div Bên Ngoài) 🪄

Thay vì phải cấu hình lại ECharts, tôi đã nghĩ rằng:

“Tại sao không thay đổi kích thước chiều rộng của biểu đồ một cách động và để div cha cuộn?”

Và đó chính xác là những gì tôi đã làm. Kết quả thật tuyệt vời. 🎉

Mã React Cụ Thể

Dưới đây là mã của component React mà tôi đã sử dụng:

javascript Copy

import EChartsReact from "echarts-for-react";
import { Card } from "flowbite-react";
import { useEffect, useRef, useState } from "react";
import { graphSeries } from 'src/lib/constant';

export const ScrollableChart = ({ chartData }) => {
  const [barchartWidth, setBarChartWidth] = useState(window.innerWidth);
  const [option, setOption] = useState({
    ...graphSeries,
  });

  const containerRef = useRef(null);

  const resizeWidth = (dataLength, barCount) => {
    const windowWidth = containerRef?.current?.offsetWidth ?? window.innerWidth;
    const paddingNMargin = window.innerWidth > 1660 ? 200 : 100;

    const barchartWidth =
      (barCount * (windowWidth > 2550 ? 40 : 40) + 60) * dataLength +
      paddingNMargin;

    setBarChartWidth(
      Math.max(barchartWidth + paddingNMargin + 100, windowWidth - 70)
    );
  };

  useEffect(() => {
    resizeWidth(chartData?.length, 1);

    setOption({
      ...option,
      xAxis: {
        ...option.xAxis,
        data: chartData?.map((item) => item?.name),
      },
      series: {
        data: chartData?.map((item) => item?.value),
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    });
  }, [chartData]);

  return (
    <Card ref={containerRef} className="h-full w-full px-12">
      <h1>Biểu Đồ Có Thể Cuộn</h1>
      <div className="h-full w-full p-4 overflow-scroll">
        <EChartsReact
          option={option}
          style={{ height: "100%", width: `${barchartWidth}px` }}
        />
      </div>
    </Card>
  );
};

Giải Thích Cách Hoạt Động

Tôi tính toán barchartWidth một cách động dựa trên độ dài dữ liệu.
Tôi đặt chiều rộng biểu đồ rất lớn (style={{ width: barchartWidth }}) để các thanh không bị thu nhỏ.
Tôi bọc nó trong một div với overflow-scroll.
Kết quả là biểu đồ cuộn theo chiều ngang mà không mất đi tính dễ đọc.

Demo 🚀

🔗 GitHub Repo: Liên kết đến repo

🔗 Demo Trực Tuyến:

Tại Sao Tôi Thích Cách Tiếp Cận Này

✅ Không cần phải điều chỉnh dataZoom (mặc dù điều đó cũng có thể giúp ích).
✅ Giữ cho biểu đồ trông tự nhiên.
✅ Giải pháp nhanh chóng khi sếp nói: “Biểu đồ này trông bị hỏng với dữ liệu lớn.”
✅ Hoạt động cho biểu đồ cột, đường và ngay cả các biểu đồ tùy chỉnh.

Những Lưu Ý Quan Trọng

Kiểm tra và điều chỉnh kích thước của div cha: Đảm bảo rằng div chứa biểu đồ có thể cuộn được bằng cách thiết lập các thuộc tính CSS phù hợp.
Theo dõi hiệu suất: Khi dữ liệu tăng lên, hãy theo dõi hiệu suất của biểu đồ và có thể cần tối ưu hóa thêm.

Câu Hỏi Thường Gặp

Tại sao biểu đồ của tôi không cuộn được?

Biểu đồ không cuộn được thường là do kích thước của nó không đủ lớn để hiển thị dữ liệu. Hãy thử điều chỉnh chiều rộng của biểu đồ như hướng dẫn trên.

Tôi có thể sử dụng giải pháp này cho loại biểu đồ nào?

Phương pháp này có thể được áp dụng cho các loại biểu đồ khác nhau như biểu đồ cột, biểu đồ đường và biểu đồ tùy chỉnh.

Kết Luận

Thỉnh thoảng, những giải pháp tốt nhất không nằm trong tài liệu của thư viện. Đôi khi, bạn chỉ cần tăng kích thước của container và để nó cuộn. Vì vậy, lần sau khi biểu đồ ECharts của bạn chuyển sang chế độ “barcode”, đừng hoảng loạn. Hãy mở rộng div bên ngoài, kích hoạt cuộn và rời khỏi đó như một người anh hùng. 🦸

✨ Nếu bạn thấy bài viết này hữu ích (hoặc khiến bạn cười), hãy vỗ tay vài lần 👏 và chia sẻ nó với đồng đội của bạn. Chúc các biểu đồ của bạn luôn có thể cuộn và khiến sếp của bạn hài lòng.

Giải Pháp Đơn Giản Khi ECharts Không Cuộn Được