<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Option View</title>
    <style type="text/css">
        body {
            margin: 0;
            background: #555;
        }
        html, body, #option-view-chart {
            height: 100%;
        }
    </style>
</head>
<body>

    <div id="option-view-chart"></div>
    <script src="../dist/echarts.js"></script>
    <script src="../vendors/jquery/jquery.min.js"></script>

    <script>
        var chart = echarts.init($('#option-view-chart')[0]);
        chart.showLoading();
        $.getJSON('./out/option-view.json', function (rawData) {
            chart.hideLoading();
            chart.setOption({
                title: {
                    text: '配置项查询分布',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {},
                series: [{
                    name: 'option',
                    type: 'treemap',
                    visibleMin: 300,
                    data: data.children,
                    itemStyle: {
                        normal: {
                            // gapWidth: 1
                            // borderWidth: 1
                        }
                    },
                    levels: [
                        {},
                        {
                            colorSaturation: [0.2, 0.7]
                        }
                    ]
                }]
            });
        });
    </script>
</body>
</html>