xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>

        <script>

            // Schema:
            // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
            var schema = [
                {name: 'date', index: 0, text: '日期'},
                {name: 'AQIindex', index: 1, text: 'AQI指数'},
                {name: 'PM25', index: 2, text: 'PM2.5'},
                {name: 'PM10', index: 3, text: 'PM10'},
                {name: 'CO', index: 4, text: '一氧化碳 (CO)'},
                {name: 'NO2', index: 5, text: '二氧化氮 (NO2)'},
                {name: 'SO2', index: 6, text: '二氧化硫 (SO2)'}
            ];

            require([
                'data/aqi/BJdata',
                'data/aqi/GZdata',
                'data/aqi/SHdata',
                'echarts'
                // 'echarts/chart/scatter',
                // 'echarts/component/tooltip'
            ], function (dataBJ, dataGZ, dataSH, echarts) {

                var chart = echarts.init(document.getElementById('main'));

                var dimSize = 6;
                var nameList = ['北京', '广州', '上海'];

                var color = ['#5793f3', '#d14a61', '#fd9c35'];

                function update(isLazy) {
                    var idx = 0;
                    var axisPointerLinkList = [];
                    var axisPointerLinkMap = {};
                    for (var i = 1; i < dimSize; i++) {
                        for (var j = 1; j < dimSize; j++) {
                            var id = i + '-' + j;

                            var linkItem = axisPointerLinkMap['x' + i];
                            if (!linkItem) {
                                linkItem = axisPointerLinkMap['x' + i] = {xAxisId: []};
                                axisPointerLinkList.push(linkItem);
                            }
                            linkItem.xAxisId.push(id);

                            var linkItem = axisPointerLinkMap['y' + j];
                            if (!linkItem) {
                                linkItem = axisPointerLinkMap['y' + j] = {yAxisId: []};
                                axisPointerLinkList.push(linkItem);
                            }
                            linkItem.yAxisId.push(id);

                            chart.setOption({
                                tooltip: {
                                    trigger: 'none'
                                },
                                axisPointer: {
                                    show: true,
                                    snap: true,
                                    lineStyle: {
                                        type: 'dashed'
                                    },
                                    link: axisPointerLinkList
                                },
                                grid: [{
                                    id: id,
                                    left: ((i - 1) / dimSize * 100 + 7) + '%',
                                    top: ((j - 1) / dimSize * 100 + 7) + '%',
                                    width: '15%',
                                    height: '15%'
                                }],
                                xAxis: [{
                                    id: id,
                                    gridId: id,
                                    // gridIndex: idx,
                                    axisLabel: {
                                        show: j === dimSize - 1
                                    },
                                    axisTick: {
                                        show: j === dimSize - 1
                                    },
                                    name: j === dimSize - 1 ? schema[i].text : '',
                                    nameLocation: 'middle',
                                    nameGap: 30,
                                    splitNumber: 3
                                }],
                                yAxis: [{
                                    id: id,
                                    gridId: id,
                                    // gridIndex: idx,
                                    axisLabel: {
                                        show: i === 1
                                    },
                                    axisTick: {
                                        show: i === 1
                                    },
                                    name: i === 1 ? schema[j].text : '',
                                    nameLocation: 'middle',
                                    nameGap: 30,
                                    splitNumber: 4
                                }],
                                series: [dataBJ, dataGZ, dataSH].map(function (data, dataIdx) {
                                    return {
                                        id: id + '-' + dataIdx,
                                        hoverAnimation: false,
                                        name: nameList[dataIdx],
                                        type: 'scatter',
                                        xAxisId: id,
                                        yAxisId: id,
                                        // xAxisIndex: idx,
                                        // yAxisIndex: idx,
                                        data: data.map(function (item) {
                                            return [item[i], item[j]];
                                        }),
                                        itemStyle: {
                                            normal: {
                                                color: color[dataIdx]
                                            }
                                        }
                                    };
                                })
                            }, false, isLazy);

                            idx++;
                        }
                    }
                }

                // console.time('update immediate');
                // update(false);
                // console.timeEnd('update immediate');

                // chart.clear();

                setTimeout(function () {
                    console.time('update lazy');
                    update(true);
                    console.timeEnd('update lazy');
                }, 1000);
            });

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