Mybatis tree형식 결과 만들기 + eCharts 사용

MenuInfo.Vo

@Getter
@Setter
public class MenuInfoVo {
    private int menuSeq;
    private String name;
    private List<MenuInfoVo> children;

sql.xml

<resultMap id="menuInfoHierarchyMap" type="smartView.boardTest.model.MenuInfoVo">
	        <id column="m_menu_seq" property="menuSeq" javaType="int"/>
	        <result column="m_menu_nm" property="name" javaType="String"/>
	  <collection property="children" ofType="smartView.boardTest.model.MenuInfoVo">
	        	<id column="i_menu_seq" property="menuSeq" javaType="int"/>
	        	<result column="i_menu_nm" property="name" javaType="String"/>
	  </collection>
</resultMap>
//--------------
<select id="selectVolumeUseList" resultMap="menuInfoHierarchyMap">
        SELECT 
            m.menu_seq m_menu_seq, m.menu_nm m_menu_nm,
             i.menu_seq i_menu_seq, i.menu_nm i_menu_nm
        FROM
            tb_menu_info m
        inner JOIN
        	 tb_menu_info i 
        ON (m.menu_seq = i.up_menu_seq)
        ORDER BY m.menu_seq ASC, i.menu_seq ASC;
    </select>

jsp

$.get("/practice/selectVolumeUseList.do", function (data) {
	data = data.result.result
	var temp = {};
 	temp.name = 'Menu Info';
 	temp.children = data;
	// option 선언
	var option = {
			tooltip: {
			// show: true,
			trigger: 'item',
			triggerOn: 'mousemove'
			},
			series: [
				{
				type: 'tree',
				data: [temp],
				top: '1%',
				left: '7%',
				bottom: '1%',
				right: '20%',
				symbolSize: 7,
				label: {
					position: 'left',
					verticalAlign: 'middle',
                    align: 'right',
					fontSize: 9,
					initialTreeDepth: 3
				},
				leaves: {
					label: {
					  position: 'right',
					  verticalAlign: 'middle',
					  align: 'left'
					 }
				},
				emphasis: {
					focus: 'descendant'
                },
				expandAndCollapse: true,
				animationDuration: 550,
				animationDurationUpdate: 750
				}
			]      
	}
		myChart.setOption(option);
		});
		});

-> data 형식이 [ ] 로시작해야됨. 아니면 그래프가 안그려짐. 그래프 안그려지면 데이터 형식에 문제없는지 샘플데이터 확인해서 고쳐보기.
-> echarts 홈페이지에서 edit code에 반환데이터 넣어서 고치면서 실시간으로 확인하기!

출처

• 계층형 쿼리 : https://jolly-sally.tistory.com/53
• echarts 형식 : https://echarts.apache.org/examples/en/editor.html?c=tree-basic