<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Option View</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        html, body, #charts-builder-count-chart, #components-builder-count-chart {
            height: 100%;
        }
        #charts-builder-count-chart, #components-builder-count-chart {
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>

    <div id="charts-builder-count-chart"></div>
    <div id="components-builder-count-chart"></div>
    <script src="../dist/echarts.js"></script>
    <script src="../dist/echarts.js"></script>
    <script src="../theme/vintage.js"></script>
    <script src="../vendors/jquery/jquery.min.js"></script>
    <script src="../vendors/lodash.js"></script>

    <script>
        var chart1 = echarts.init($('#charts-builder-count-chart')[0], 'vintage');
        var chart2 = echarts.init($('#components-builder-count-chart')[0], 'vintage');
        chart1.showLoading();
        chart2.showLoading();
        $.getJSON('./out/builder.json', function (data) {
            chart1.hideLoading();
            chart2.hideLoading();

            _.each([chart1, chart2], function (chart, idx) {
                chart.setOption({
                    title: {
                        text: idx === 0 ? '图表分布' : '组件分布' ,
                        left: 'center'
                    },
                    tooltip: {},
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        max: data.all
                    },
                    yAxis: {
                        type: 'category',
                        data: _.keys(idx === 0 ? data.charts : data.components),
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        name: idx === 0 ? 'charts' : 'components',
                        type: 'bar',
                        stack: 'all',
                        data: _.values(idx === 0 ? data.charts : data.components),
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        }
                    }, {
                        name: 'placeholder',
                        type: 'bar',
                        stack: 'all',
                        data: _.map(_.values(idx === 0 ? data.charts : data.components), function (val) {
                            return data.all - val;
                        }),
                        tooltip: {
                            showContent: false
                        },
                        itemStyle: {
                            normal: {
                                color: '#eee'
                            },
                            emphasis: {
                                color: '#eee'
                            }
                        }
                    }]
                });
            });
        });
    </script>
</body>
</html>