How to use rectangular treemap to display data hierarchy in ECharts-JS Tutorial-php.cn

How to use rectangular treemap to display data hierarchy in ECharts

How to use a rectangular tree diagram to display the data hierarchical structure in ECharts

Introduction:
In data visualization, the rectangular tree diagram is a very common chart Type, which displays the hierarchical structure of data in a rectangular form, allowing users to intuitively understand and analyze the data. ECharts is a powerful data visualization library that provides a variety of chart types and flexible configuration items, making it easy to display rectangular tree diagrams. This article will introduce in detail how to use a rectangular tree diagram to display the data hierarchical structure in ECharts, and provide specific code examples.

1. Preparation
Before starting, you need to ensure that ECharts has been installed and the necessary resource files have been introduced. The specific steps are as follows:

Download ECharts: Go to the ECharts official website (http://echarts.apache.org/zh/index.html) to download the latest version of the ECharts compressed package.
Decompress the compressed package: Decompress the downloaded compressed package and you will get an echarts-x.x.x directory.
Introduce resource files: Copy the echarts.min.js file in the echarts-x.x.x directory to the project directory, and introduce the resource file in the HTML file.

2. Create a rectangular tree diagram
The process of creating a rectangular tree diagram in ECharts is mainly divided into the following steps:

Create a container: in the HTML file Add a div container to host the generated rectangular tree map. For example, you can add the following code within the tag:

Initialize the instance: Create an ECharts instance in the JavaScript file and bind it to the specified container. For example, you can add the following code within the <script> tag: </script>

var chart = echarts.init(document.getElementById('chart'));

Configuration Data: Prepare the data to be presented and organize it according to your needs. For example, a data object can be defined as follows:

var data = {
name: 'Root Node',
children: [

{
  name: '子节点1',
  children: [
    { name: '子节点1.1' },
    { name: '子节点1.2' }
  ]
},
{
  name: '子节点2',
  children: [
    { name: '子节点2.1' },
    { name: '子节点2.2' }
  ]
}

Copy after login

]
};

Configuration options: Set various options for the rectangular treemap, including layout, style, interaction, etc. For specific configuration items, please refer to the official ECharts documentation (http://echarts.apache.org/zh/option.html). For example, you can set up the layout as follows:

var option = {
series: {

type: 'treemap',
data: [data]

Copy after login

}
};

Render the chart: By calling the setOption method of the ECharts instance, apply the configuration items to the chart and render a rectangular tree chart. For example, you can add the following code:

chart.setOption(option);

3. Sample code
The following is a complete sample code for display in ECharts A simple rectangular treemap:

Rectangular Treemap Example