Convert ECharts Circle Packing to React: A Step-by-Step Guide (2026)

ECharts is a powerful visualization library that allows developers to create dynamic and interactive charts. One of the popular chart types is the circle packing chart, which displays hierarchical data as circles. In this tutorial, we will learn how to convert an ECharts circle packing example to a React component. This is crucial for developers looking to integrate complex data visualizations into React applications seamlessly.

Key Takeaways

• Understand the basics of ECharts and React integration.
• Convert ECharts circle packing example to a React component.
• Handle hierarchical data structures in React effectively.
• Troubleshoot common errors during the conversion process.

Introduction

Integrating ECharts with React can enhance your applications by providing rich, interactive data visualizations. This tutorial will guide you through converting a circle packing chart from JavaScript to a React component. Understanding this process is important for developers who need to display hierarchical data in a visually appealing way.

We will use ECharts, which is known for its flexibility and ease of use, to create a circle packing chart. Then, we'll integrate it into a React application to demonstrate how you can leverage these tools to enhance user experience. By the end of this tutorial, you'll be able to convert any ECharts example into a React component with confidence.

Prerequisites

• Basic understanding of JavaScript and React.
• Node.js and npm installed on your machine.
• Familiarity with ECharts and its documentation.

Step 1: Set Up Your React Environment

First, ensure that you have Node.js and npm installed. If not, download and install them from the official Node.js website. Once you have them set up, create a new React application using Create React App:

npx create-react-app echarts-circle-packing

This command will generate a new React application in a folder named echarts-circle-packing.

Step 2: Install ECharts

Next, navigate to your project directory and install ECharts:

cd echarts-circle-packing
npm install echarts

ECharts will be added to your project dependencies, allowing you to use it within your React components.

Step 3: Create the Circle Packing Component

Create a new component file named CirclePacking.js in your src directory. This file will contain the logic for rendering the circle packing chart.

import React, { useEffect } from 'react';
import * as echarts from 'echarts';

const CirclePacking = ({ data }) => {
  useEffect(() => {
    const chartDom = document.getElementById('circle-packing');
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {},
      series: [{
        type: 'circlePacking',
        data: data,
        radius: [0, '80%'],
        label: {
          show: true,
          formatter: '{b}'
        }
      }]
    };
    myChart.setOption(option);
  }, [data]);

  return ;
};

export default CirclePacking;

In the above code, useEffect is used to initialize the ECharts instance. The chart is configured with a basic circle packing series using the data prop passed to the component.

Step 4: Pass Hierarchical Data to the Component

In your App.js, import the CirclePacking component and pass hierarchical data to it. Here's an example of how your data might be structured:

import React from 'react';
import CirclePacking from './CirclePacking';

const data = [{
  name: 'root',
  children: [
    {
      name: 'Category 1',
      children: [
        { name: 'Subcategory 1.1', value: 10 },
        { name: 'Subcategory 1.2', value: 20 }
      ]
    },
    {
      name: 'Category 2',
      children: [
        { name: 'Subcategory 2.1', value: 30 }
      ]
    }
  ]
}];

function App() {
  return (
    
      Circle Packing Chart
      
    
  );
}

export default App;

This data structure reflects a typical hierarchical dataset, which is suitable for a circle packing chart.

Common Errors/Troubleshooting

Here are some common issues you might encounter:

• ECharts not rendering: Ensure that the DOM element ID matches the one used in echarts.init().
• Data not displaying correctly: Verify that your data structure matches the expected format for circle packing.
• Chart size: Ensure the style attributes on the div are set correctly, as ECharts requires explicit dimensions.

Frequently Asked Questions

Can I use ECharts with other React frameworks?

Yes, ECharts can be integrated with any React-based framework, such as Next.js or Gatsby.

Is ECharts suitable for large datasets?

Yes, ECharts is optimized for performance and can handle large datasets efficiently.

How do I customize the chart's appearance?

You can customize the chart by modifying the option object passed to setOption().

Frequently Asked Questions

Can I use ECharts with other React frameworks?

Yes, ECharts can be integrated with any React-based framework, such as Next.js or Gatsby.

Is ECharts suitable for large datasets?

Yes, ECharts is optimized for performance and can handle large datasets efficiently.

How do I customize the chart's appearance?

You can customize the chart by modifying the option object passed to setOption().