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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
							<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <link rel="stylesheet" href="reset.css">
        <style>
            #main {
                position: relative;
                min-width: 1080px;
            }
            .block {
                text-align: center;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                position: relative;
                height: 400px;
                margin: 20px;
            }
            .block .ec {
                float: left;
                width: 600px;
                height: 100%;
                border: 3px solid #777;
            }
            .block label {
                margin-left: 500px;
                display: block;
                width: 400px;
                height: 100%;
                background: #777;
                color: #fff;
                font-size: 12px;
                line-height: 18px;
                border: 3px solid #777;
                text-align: left;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script>


            require([
                'echarts',
                'zrender/core/util',
                'echarts/chart/scatter',
                'echarts/component/grid',
                'echarts/component/visualMap'
            ], function (echarts, zrUtil) {

                makeChart({
                    show: true,
                    splitNumber: 7,
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    left: 200,
                    backgroundColor: '#eee',
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    splitNumber: 5,
                    right: 0,
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'symbol',
                        data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 0,
                    left: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorSaturation'
                    }
                });
                makeChart({
                    splitNumber: 5,
                    top: 20,
                    right: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorLightness'
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 40,
                    orient: 'horizontal',
                    align: 'right',
                    dimension: 3,
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorAlpha'
                    }
                });

                // -------------------------------------------

                makeChart({
                    show: true,
                    splitNumber: 7,
                    text: ['高1', '低'],
                    inverse: true,
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    left: 200,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        data: ['red', 'pink']
                    }
                });
                makeChart({
                    splitNumber: 5,
                    right: 0,
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'symbol',
                        data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 0,
                    left: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorSaturation'
                    }
                });
                makeChart({
                    splitNumber: 5,
                    top: 20,
                    right: 0,
                    orient: 'horizontal',
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorLightness'
                    }
                });
                makeChart({
                    splitNumber: 6,
                    top: 40,
                    orient: 'horizontal',
                    dimension: 3,
                    text: ['高', '低'],
                    backgroundColor: '#eee',
                    visualSelected: {
                        type: 'colorAlpha'
                    }
                });

                // -------------------------------------------


                makeChart({
                    show: true,
                    splitNumber: 0,
                    backgroundColor: '#eee',
                    padding: [10, 30, 5, 40],
                    calculable: true,
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 200,
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    inverse: true,
                    calculable: true,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    right: 0,
                    splitNumber: 5,
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 0,
                    top: 0,
                    orient: 'horizontal',
                    splitNumber: 6,
                    calculable: true,
                    inverse: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorSaturation'
                });
                makeChart({
                    right: 0,
                    top: 20,
                    orient: 'horizontal',
                    splitNumber: 5,
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorLightness'
                });
                makeChart({
                    top: 40,
                    splitNumber: 6,
                    orient: 'horizontal',
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorAlpha'
                });
                makeChart({
                    left: 'center',
                    top: 'bottom',
                    orient: 'horizontal',
                    splitNumber: 6,
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorAlpha'
                });


                // -------------------------------------------


                makeChart({
                    show: true,
                    splitNumber: 7,
                    text: ['高2', '低'],
                    backgroundColor: '#eee',
                    inverse: true,
                    padding: [10, 30, 5, 40],
                    calculable: true,
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 200,
                    show: true,
                    pieces: [
                        {min: 10, max: 15, color: 'green'},
                        {min: 15, max: 25, visualValue: 'blue'},
                        {min: 25, max: 35},
                        {min: 35, max: 55},
                        {min: 55}
                    ],
                    inverse: true,
                    text: ['高', '低'],
                    calculable: true,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    right: 0,
                    splitNumber: 5,
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: {
                        color: ['red', 'pink']
                    }
                });
                makeChart({
                    left: 0,
                    top: 0,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    splitNumber: 6,
                    calculable: true,
                    inverse: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorSaturation'
                });
                makeChart({
                    right: 0,
                    top: 20,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    splitNumber: 5,
                    align: 'bottom',
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorLightness'
                });
                makeChart({
                    top: 40,
                    splitNumber: 6,
                    orient: 'horizontal',
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorAlpha'
                });
                makeChart({
                    left: 'center',
                    bottom: 0,
                    orient: 'horizontal',
                    splitNumber: 6,
                    text: ['高', '低'],
                    calculable: true,
                    dimension: 3,
                    backgroundColor: '#eee',
                    inRange: 'colorAlpha'
                });


                function makeChart(opt) {
                    var label = JSON.stringify(opt, null, 4);
                    opt = {visualMap: opt || {}};
                    var containerEl = document.getElementById('main');
                    var el = document.createElement('div');
                    el.className = 'block';
                    el.innerHTML = '<div class="ec"></div><label><pre>' + encodeHTML(label) + '</pre></label>';
                    containerEl.appendChild(el);

                    var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
                    chart.setOption(zrUtil.merge(opt, getOption()));
                }

                function encodeHTML(source) {
                    return source == null
                        ? ''
                        : String(source)
                            .replace(/&/g, '&amp;')
                            .replace(/</g, '&lt;')
                            .replace(/>/g, '&gt;')
                            .replace(/"/g, '&quot;')
                            .replace(/'/g, '&#39;');
                };

                function getOption() {
                    return {
                        grid: {top: 'center', left: 'center', width: 50, height: 50},
                        xAxis: {type: 'value', splitLine: {show: false}},
                        yAxis: {type: 'value', splitLine: {show: false}},
                        series: [
                            {
                                name: 'scatter',
                                type: 'scatter',
                                itemStyle: {
                                    normal: {
                                        opacity: 0.8,
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                symbolSize: 20,
                                data: [[50, 50, 50, 50, 50]]
                            }
                        ]
                    };
                }


            });


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