xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<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>
        <script src="lib/facePrint.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            #snapshot {
                position: fixed;
                right: 10;
                bottom: 10;
                width: 200;
                height: 200;
                background: #fff;
                border: 5px solid rgba(0,0,0,0.5);
            }
        </style>
        <div id="main"></div>
        <img id="snapshot"/>
        <script>

            var chunkMax = 4;
            var chunkCount = 0;

            function genData1(len, offset) {
                // console.profile('gen');
                var lngRange = [-10.781327, 131.48];
                var latRange = [18.252847, 52.33];

                var arr = new Float32Array(len * 2);
                var off = 0;

                // var data = [];
                for (var i = 0; i < len; i++) {
                    var x = +Math.random() * 10;
                    var y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10;
                    arr[off++] = x;
                    arr[off++] = y;
                    // data.push([
                    //     x,
                    //     y
                    // ]);
                }
                // console.profileEnd('gen');
                return arr;
                // return data;
            }

            function genData2(count) {
                var lngRange = [-10.781327, 31.48];
                var latRange = [-18.252847, 30.33];
                return genData(count, lngRange, latRange);
            }

            function genData(count, lngRange, latRange) {
                lngRange[1] += 5;
                lngRange[0] -= 10;
                latRange[1] += 4;
                var lngExtent = lngRange[1] - lngRange[0];
                var latExtent = latRange[1] - latRange[0];
                var data = [];
                for (var i = 0; i < count; i++) {
                    data.push([
                        Math.random() * lngExtent + lngRange[0],
                        Math.random() * latExtent + latRange[0],
                        Math.random() * 1000
                    ]);
                }
                return data;
            }

            require([
                'echarts'
                // 'echarts/chart/map',
                // 'echarts/chart/scatter',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/geo',
                // 'echarts/component/visualMap',
                // 'echarts/component/markPoint',
                // 'echarts/component/tooltip'
            ], function (echarts) {

                require(['map/js/china'], function () {
                    var chart = echarts.init(document.getElementById('main'));

                    chart.setOption({
                        tooltip: {},
                        toolbox: {
                            left: 'center',
                            feature: {
                                dataZoom: {}
                            }
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['pm2.5' /* ,'pm10' */]
                        },
                        // ???
                        // visualMap: {
                        //     min: 0,
                        //     max: 1500,
                        //     left: 'left',
                        //     top: 'bottom',
                        //     text: ['High','Low'],
                        //     seriesIndex: [1, 2, 3],
                        //     inRange: {
                        //         color: ['#006edd', '#e0ffff']
                        //     },
                        //     calculable : true
                        // },
                        xAxis: [{
                        }],
                        yAxis: [{
                        }],
                        dataZoom: [{
                            type: 'inside'
                        }, {
                            type: 'slider'
                        }],
                        animation: false,
                        series : [{
                            name: 'pm2.5',
                            type: 'scatter',
                            data: genData1(5e5),
                            dimensions: ['x', 'y'],
                            // symbol: 'rect',
                            symbolSize: 3,
                            // symbol: 'rect',
                            itemStyle: {
                                color: '#128de3',
                                opacity: 0.4
                            },
                            large: true,
                            // large: {
                            //     symbolSize: 2
                            // },
                            // large: function (params) {
                            //     if (params.dataCount > 30000) {
                            //         return {symbolSize: 1};
                            //     }
                            //     else if (params.dataCount > 3000) {
                            //         return {symbolSize: 5};
                            //     }
                            // },
                            largeThreshold: 500,
                            progressive: 500
                        // }, {
                        //     name: 'pm10',
                        //     type: 'scatter',
                        //     data: genData2(2001),
                        //     xAxisIndex: 0,
                        //     yAxisIndex: 0,
                        //     symbolSize: 2,
                        //     // symbol: 'rect',
                        //     itemStyle: {
                        //         normal: {
                        //             borderWidth: 0.5,
                        //             borderColor: '#e01',
                        //             color: '#128de3'
                        //         }
                        //     },
                        //     progressive: 3000
                        }]
                    });

                    chart.on('click', function (param) {
                        alert('asdf');
                    });

                    chart.on('finished', function () {
                        // console.log('Render finished');
                        var url = chart.getDataURL();
                        var snapshotEl = document.getElementById('snapshot');
                        snapshotEl.src = url;
                    });

                    window.onresize = chart.resize;

                    // next();

                    function next() {
                        if (chunkCount++ < chunkMax) {
                            var newData = genData1(100000, chunkCount);
                            chart.appendData({seriesIndex: 0, data: newData});
                            // console.log('Data loaded');
                            setTimeout(next, 3000);
                        }
                    }

                });
            });

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