직사각형 트리맵을 사용하여 ECharts에 데이터 계층 구조를 표시하는 방법

사각형 트리맵을 사용하여 ECharts에서 데이터 계층 구조를 표시하는 방법

소개:
데이터 시각화에서 직사각형 트리맵은 사용자에게 직사각형 형태로 데이터의 계층 구조를 표시하는 매우 일반적인 차트 유형입니다. 데이터를 직관적으로 이해하고 분석합니다. ECharts는 다양한 차트 유형과 유연한 구성 항목을 제공하여 직사각형 트리 다이어그램을 쉽게 표시할 수 있는 강력한 데이터 시각화 라이브러리입니다. 이 기사에서는 직사각형 트리 다이어그램을 사용하여 ECharts에서 데이터 계층 구조를 표시하는 방법을 자세히 소개하고 특정 코드 예제를 제공합니다.

1. 준비
시작하기 전에 ECharts가 설치되어 있고 필요한 리소스 파일이 도입되었는지 확인해야 합니다. 구체적인 단계는 다음과 같습니다.

1. ECharts 다운로드: ECharts 공식 웹사이트(http://echarts.apache.org/zh/index.html)로 이동하여 최신 버전의 ECharts 압축 패키지를 다운로드하세요.
2. 압축 패키지 압축 해제: 다운로드한 압축 패키지의 압축을 풀면 echarts-x.x.x 디렉터리가 생성됩니다.
3. 리소스 파일 도입: echarts-x.x.x 디렉터리에 있는 echarts.min.js 파일을 프로젝트 디렉터리에 복사하고 HTML 파일에 리소스 파일을 도입합니다.

2. 직사각형 트리 맵 만들기
ECharts에서 직사각형 트리 맵을 만드는 과정은 주로 다음 단계로 나뉩니다.

1. 컨테이너 만들기: 생성된 직사각형 트리를 호스팅하기 위해 HTML 파일에 div 컨테이너를 추가합니다. 지도 . 예를 들어, 태그 내에 다음 코드를 추가할 수 있습니다.

2. 초기화 인스턴스: JavaScript 파일에서 ECharts 인스턴스를 생성하고 이를 지정된 컨테이너에 바인딩합니다. 예를 들어 <script> 태그 내에 다음 코드를 추가할 수 있습니다. </script>

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

3. 데이터 구성: 표시할 데이터를 준비하고 필요에 따라 구성하십시오. 예를 들어 데이터 객체는 다음과 같이 정의할 수 있습니다:

var data = {
name: 'root node',
children: [

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

]
};

4. 구성 옵션: 다양한 직사각형 트리 다이어그램 설정 옵션 , 레이아웃, 스타일, 상호 작용 등을 포함합니다. 구체적인 구성 항목은 ECharts 공식 문서(http://echarts.apache.org/zh/option.html)를 참조하세요. 예를 들어 다음과 같이 레이아웃을 설정할 수 있습니다.

var option = {
series: {

type: 'treemap',
data: [data]

}
};

5. 차트 렌더링: 의 setOption 메소드를 호출하여 구성 항목을 차트에 적용합니다. ECharts 인스턴스 및 직사각형 트리맵을 렌더링합니다. 예를 들어 다음 코드를 추가할 수 있습니다.

chart.setOption(option);

3. 샘플 코드
다음은 ECharts에 간단한 직사각형 트리 차트를 표시하기 위한 완전한 샘플 코드입니다:

< ;script>
var 차트 = echarts.init(document.getElementById('chart'));

var 데이터 = {
이름: '루트 노드',
하위: [

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

]
};

var 옵션 = {
시리즈: {

type: 'treemap',
data: [data]

}
};

chart.setOption(option);

위 내용은 직사각형 트리맵을 사용하여 ECharts에 데이터 계층 구조를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!