xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <div id="main"></div>
        <script>
            require([
                'echarts'
                // 'echarts/chart/tree',
                // 'echarts/component/tooltip'
                ], function (echarts) {
                    var chart = echarts.init(document.getElementById('main'), null, {

                    });

                    window.onresize = function () {
                        chart.resize();
                    };

                    $.getJSON('./data/flare.json')
                    .done(function (data) {
                        chart.setOption({

                            tooltip: {
                                trigger: 'item',
                                triggerOn: 'mousemove'
                            },

                            series:[
                                {
                                    type: 'tree',

                                    data: [data],

                                    left: '2%',
                                    right: '2%',
                                    top: '8%',
                                    bottom: '20%',

                                    symbol: 'emptyCircle',

                                    orient: 'vertical',

                                    expandAndCollapse: true,

                                    label: {
                                        normal: {
                                            position: 'top',
                                            rotate: -90,
                                            verticalAlign: 'middle',
                                            align: 'right'
                                        }
                                    },

                                    leaves: {
                                        label: {
                                            normal: {
                                                position: 'bottom',
                                                rotate: -90,
                                                verticalAlign: 'middle',
                                                align: 'left'
                                            }
                                        }
                                    },

                                    animationDurationUpdate: 750
                                }
                            ]
                        });
                    });
                });
        </script>
    </body>
</html>