SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/dat.gui.min.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
            }
        </style>
        <div id="info"></div>
        <div id="main"></div>
        <script>

            var chart;
            var data;

            require([
                'echarts',
                'extension/dataTool/prepareBoxplotData',
                'echarts/chart/boxplot',
                'echarts/chart/scatter',
                'echarts/component/title',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/dataZoom'
            ], function (echarts, prepareBoxplotData) {

                chart = echarts.init(document.getElementById('main'), null, {
                    renderer: 'canvas'
                });

                function update(layout) {

                    // Generate data.
                    data = [];
                    for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
                        var seriesData = [];
                        for (var i = 0; i < 18; i++) {
                            var cate = [];
                            for (var j = 0; j < 100; j++) {
                                cate.push(Math.random() * 200);
                            }
                            seriesData.push(cate);
                        }
                        data.push(prepareBoxplotData(seriesData, {
                            layout: layout
                        }));
                    }

                    var categoryAxis = {
                        type: 'category',
                        data: data[0].axisData,
                        boundaryGap: true,
                        nameGap: 30,
                        splitArea: {
                            show: true
                        },
                        axisLabel: {
                            formatter: 'expr {value}'
                        },
                        splitLine: {
                            show: false
                        }
                    };
                    var valueAxis = {
                        type: 'value',
                        name: 'Value',
                        splitArea: {
                            show: false
                        }
                    };

                    chart.setOption({
                        title: [
                            {
                                text: 'Multiple Categories',
                                left: 'center',
                            }
                        ],
                        legend: {
                            top: '10%',
                            data: ['category0', 'category1', 'category2', 'category3']
                        },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '10%',
                            top: '20%',
                            right: '10%',
                            bottom: '15%'
                        },
                        xAxis: layout === 'horizontal' ? categoryAxis : valueAxis,
                        yAxis: layout === 'vertical' ? categoryAxis : valueAxis,
                        dataZoom: [
                            {
                                type: 'inside',
                                start: 0,
                                end: 20
                            },
                            {
                                show: true,
                                height: 20,
                                type: 'slider',
                                bottom: 50,
                                xAxisIndex: layout === 'horizontal' ? [0] : [],
                                yAxisIndex: layout === 'horizontal' ? [] : [0],
                                start: 0,
                                end: 20
                            }
                        ],
                        series: [
                            {
                                name: 'category0',
                                type: 'boxplot',
                                data: data[0].boxData,
                                tooltip: {formatter: formatter}
                            },
                            {
                                name: 'category1',
                                type: 'boxplot',
                                data: data[1].boxData,
                                tooltip: {formatter: formatter}
                            },
                            {
                                name: 'category2',
                                type: 'boxplot',
                                data: data[2].boxData,
                                tooltip: {formatter: formatter}
                            }
                        ]
                    });
                }

                function formatter(param) {
                    return [
                        'Experiment ' + param.name + ': ',
                        'upper: ' + param.data[0],
                        'Q1: ' + param.data[1],
                        'median: ' + param.data[2],
                        'Q3: ' + param.data[3],
                        'lower: ' + param.data[4]
                    ].join('<br/>')
                }


                // var gui = new dat.GUI();
                // var config = {
                //     layout: 'horizontal'
                // };
                // gui
                //     .add(config, 'layout', ['horizontal', 'vertical'])
                //     .onChange(update);

                update('horizontal');
            })

        </script>
    </body>
</html>