ECharts 트리 다이어그램: 데이터 계층 구조를 표시하는 방법

ECharts 트리 다이어그램: 데이터 계층 구조를 표시하려면 특정 코드 예제가 필요합니다.

소개: 데이터 시각화의 급속한 발전으로 사람들의 데이터 이해 및 분석 능력도 향상되었습니다. 일반적으로 사용되는 데이터 시각화 방법으로 ECharts 트리 다이어그램은 데이터의 계층 구조를 직관적으로 표시할 수 있습니다. 이 기사에서는 ECharts 트리 다이어그램의 기본 사용법을 소개하고 특정 코드 예제를 제공합니다.

1. ECharts 트리 차트 소개
ECharts는 Baidu에서 개발한 JavaScript 기반 프런트엔드 차트 라이브러리로, 다양한 차트, 지도 등 풍부한 데이터 시각화 효과를 제공할 수 있습니다. ECharts 트리 다이어그램은 데이터의 계층적 관계를 표시하는 데 사용되는 핵심 다이어그램 중 하나이며 조직 구조 및 분류 관계와 같은 시나리오에 적합합니다.

2. ECharts 트리 다이어그램의 기본 사용법

1. ECharts 라이브러리 소개
   ECharts 트리 다이어그램을 사용하려면 먼저 HTML 파일에 ECharts 라이브러리를 도입해야 합니다. 이는 다음 코드로 달성할 수 있습니다.

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>

2. 컨테이너 만들기
   HTML 파일에 트리 다이어그램을 표시하기 위한 컨테이너를 만듭니다. 예:

   <div id="tree-chart" style="width: 800px; height: 600px;"></div>

3. ECharts 인스턴스 초기화
   JavaScript 파일에서 다음 코드 인스턴스를 사용하여 ECharts를 작성하고 이를 컨테이너에 바인딩합니다.

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

4. 트리맵 매개변수 구성
   ECharts 구성 항목을 통해 데이터 및 스타일과 같은 매개변수를 지정합니다. 다음은 간단한 예시입니다.

   var option = {
    series: [
        {
            type: 'tree',
            data: [
                {
                    name: 'A',
                    children: [
                        {
                            name: 'B',
                            children: [
                                { name: 'C' },
                                { name: 'D' }
                            ]
                        },
                        { name: 'E' }
                    ]
                }
            ]
        }
    ]
   };

   그 중 data 매개변수는 트리맵의 데이터를 지정하는 데 사용됩니다. 각 노드는 name 및 children 속성으로 구성됩니다. name은 노드 이름을 나타내고 children은 자식 컬렉션을 나타냅니다. 노드. data参数用于指定树图的数据。每个节点由name和children属性组成，name表示节点名称，children表示子节点的集合。

5. 渲染树图
   最后，通过调用ECharts实例的setOption

트리 맵 렌더링

마지막으로 ECharts 인스턴스의 setOption 메서드를 호출하고 구성 항목 매개변수를 전달하면 트리 맵이 페이지에 렌더링됩니다.

treeChart.setOption(option);

3 . 예제 데모

다음 코드를 사용하여 간단한 조직 트리 다이어그램을 생각해 보세요.

    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>


    <div id="tree-chart" style="width: 800px; height: 600px;"></div>
    <script>
        var treeChart = echarts.init(document.getElementById('tree-chart'));

        var option = {
            series: [
                {
                    type: 'tree',
                    data: [
                        {
                            name: 'CEO',
                            children: [
                                {
                                    name: 'CTO',
                                    children: [
                                        { name: 'Engineer' },
                                        { name: 'Designer' }
                                    ]
                                },
                                {
                                    name: 'CFO',
                                    children: [
                                        { name: 'Accountant' },
                                        { name: 'Treasury' }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        };

        treeChart.setOption(option);
    </script>

위 코드에서는 간단한 조직 트리 다이어그램을 만들었습니다. 루트 노드는 CEO이며 CTO와 CFO라는 두 개의 하위 노드를 포함합니다. CTO 노드 아래에는 엔지니어와 디자이너라는 두 개의 하위 노드가 있습니다. 위의 코드를 통해 조직 구조를 보여주는 트리 다이어그램을 얻을 수 있습니다. 🎜🎜결론: 🎜이 글에서는 ECharts 트리 다이어그램의 기본 사용법을 소개하고 예제를 제공합니다. ECharts의 구성 항목을 통해 트리 맵의 데이터와 스타일을 유연하게 정의하여 다양한 시나리오에서 데이터 수준 표시 요구 사항을 달성할 수 있습니다. 이 기사가 독자들이 ECharts 트리 다이어그램을 이해하고 사용하는 데 도움이 되기를 바랍니다. 🎜

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