xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
							<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>

            var echarts;
            var chart;
            var myChart;

            require([
                'echarts'
                // 'echarts/chart/scatter',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/markLine',
                // 'echarts/component/markPoint',
                // 'echarts/component/dataZoom',
                // 'echarts/component/visualMap',
                // 'echarts/component/brush'
            ], function (ec) {

                echarts = ec;

                var rawData = [
                    [5.1, 3.5, 1.4, 0.2, "setosa"],
                    [4.9, 3.0, 1.4, 0.2, "setosa"],
                    [4.7, 3.2, 1.3, 0.2, "setosa"],
                    [4.6, 3.1, 1.5, 0.2, "setosa"],
                    [5.0, 3.6, 1.4, 0.2, "setosa"],
                    [5.4, 3.9, 1.7, 0.4, "setosa"],
                    [4.6, 3.4, 1.4, 0.3, "setosa"],
                    [5.0, 3.4, 1.5, 0.2, "setosa"],
                    [4.4, 2.9, 1.4, 0.2, "setosa"],
                    [4.9, 3.1, 1.5, 0.1, "setosa"],
                    [5.4, 3.7, 1.5, 0.2, "setosa"],
                    [4.8, 3.4, 1.6, 0.2, "setosa"],
                    [4.8, 3.0, 1.4, 0.1, "setosa"],
                    [4.3, 3.0, 1.1, 0.1, "setosa"],
                    [5.8, 4.0, 1.2, 0.2, "setosa"],
                    [5.7, 4.4, 1.5, 0.4, "setosa"],
                    [5.4, 3.9, 1.3, 0.4, "setosa"],
                    [5.1, 3.5, 1.4, 0.3, "setosa"],
                    [5.7, 3.8, 1.7, 0.3, "setosa"],
                    [5.1, 3.8, 1.5, 0.3, "setosa"],
                    [5.4, 3.4, 1.7, 0.2, "setosa"],
                    [5.1, 3.7, 1.5, 0.4, "setosa"],
                    [4.6, 3.6, 1.0, 0.2, "setosa"],
                    [5.1, 3.3, 1.7, 0.5, "setosa"],
                    [4.8, 3.4, 1.9, 0.2, "setosa"],
                    [5.0, 3.0, 1.6, 0.2, "setosa"],
                    [5.0, 3.4, 1.6, 0.4, "setosa"],
                    [5.2, 3.5, 1.5, 0.2, "setosa"],
                    [5.2, 3.4, 1.4, 0.2, "setosa"],
                    [4.7, 3.2, 1.6, 0.2, "setosa"],
                    [4.8, 3.1, 1.6, 0.2, "setosa"],
                    [5.4, 3.4, 1.5, 0.4, "setosa"],
                    [5.2, 4.1, 1.5, 0.1, "setosa"],
                    [5.5, 4.2, 1.4, 0.2, "setosa"],
                    [4.9, 3.1, 1.5, 0.2, "setosa"],
                    [5.0, 3.2, 1.2, 0.2, "setosa"],
                    [5.5, 3.5, 1.3, 0.2, "setosa"],
                    [4.9, 3.6, 1.4, 0.1, "setosa"],
                    [4.4, 3.0, 1.3, 0.2, "setosa"],
                    [5.1, 3.4, 1.5, 0.2, "setosa"],
                    [5.0, 3.5, 1.3, 0.3, "setosa"],
                    [4.5, 2.3, 1.3, 0.3, "setosa"],
                    [4.4, 3.2, 1.3, 0.2, "setosa"],
                    [5.0, 3.5, 1.6, 0.6, "setosa"],
                    [5.1, 3.8, 1.9, 0.4, "setosa"],
                    [4.8, 3.0, 1.4, 0.3, "setosa"],
                    [5.1, 3.8, 1.6, 0.2, "setosa"],
                    [4.6, 3.2, 1.4, 0.2, "setosa"],
                    [5.3, 3.7, 1.5, 0.2, "setosa"],
                    [5.0, 3.3, 1.4, 0.2, "setosa"],
                    [7.0, 3.2, 4.7, 1.4, "versicolor"],
                    [6.4, 3.2, 4.5, 1.5, "versicolor"],
                    [6.9, 3.1, 4.9, 1.5, "versicolor"],
                    [5.5, 2.3, 4.0, 1.3, "versicolor"],
                    [6.5, 2.8, 4.6, 1.5, "versicolor"],
                    [5.7, 2.8, 4.5, 1.3, "versicolor"],
                    [6.3, 3.3, 4.7, 1.6, "versicolor"],
                    [4.9, 2.4, 3.3, 1.0, "versicolor"],
                    [6.6, 2.9, 4.6, 1.3, "versicolor"],
                    [5.2, 2.7, 3.9, 1.4, "versicolor"],
                    [5.0, 2.0, 3.5, 1.0, "versicolor"],
                    [5.9, 3.0, 4.2, 1.5, "versicolor"],
                    [6.0, 2.2, 4.0, 1.0, "versicolor"],
                    [6.1, 2.9, 4.7, 1.4, "versicolor"],
                    [5.6, 2.9, 3.6, 1.3, "versicolor"],
                    [6.7, 3.1, 4.4, 1.4, "versicolor"],
                    [5.6, 3.0, 4.5, 1.5, "versicolor"],
                    [5.8, 2.7, 4.1, 1.0, "versicolor"],
                    [6.2, 2.2, 4.5, 1.5, "versicolor"],
                    [5.6, 2.5, 3.9, 1.1, "versicolor"],
                    [5.9, 3.2, 4.8, 1.8, "versicolor"],
                    [6.1, 2.8, 4.0, 1.3, "versicolor"],
                    [6.3, 2.5, 4.9, 1.5, "versicolor"],
                    [6.1, 2.8, 4.7, 1.2, "versicolor"],
                    [6.4, 2.9, 4.3, 1.3, "versicolor"],
                    [6.6, 3.0, 4.4, 1.4, "versicolor"],
                    [6.8, 2.8, 4.8, 1.4, "versicolor"],
                    [6.7, 3.0, 5.0, 1.7, "versicolor"],
                    [6.0, 2.9, 4.5, 1.5, "versicolor"],
                    [5.7, 2.6, 3.5, 1.0, "versicolor"],
                    [5.5, 2.4, 3.8, 1.1, "versicolor"],
                    [5.5, 2.4, 3.7, 1.0, "versicolor"],
                    [5.8, 2.7, 3.9, 1.2, "versicolor"],
                    [6.0, 2.7, 5.1, 1.6, "versicolor"],
                    [5.4, 3.0, 4.5, 1.5, "versicolor"],
                    [6.0, 3.4, 4.5, 1.6, "versicolor"],
                    [6.7, 3.1, 4.7, 1.5, "versicolor"],
                    [6.3, 2.3, 4.4, 1.3, "versicolor"],
                    [5.6, 3.0, 4.1, 1.3, "versicolor"],
                    [5.5, 2.5, 4.0, 1.3, "versicolor"],
                    [5.5, 2.6, 4.4, 1.2, "versicolor"],
                    [6.1, 3.0, 4.6, 1.4, "versicolor"],
                    [5.8, 2.6, 4.0, 1.2, "versicolor"],
                    [5.0, 2.3, 3.3, 1.0, "versicolor"],
                    [5.6, 2.7, 4.2, 1.3, "versicolor"],
                    [5.7, 3.0, 4.2, 1.2, "versicolor"],
                    [5.7, 2.9, 4.2, 1.3, "versicolor"],
                    [6.2, 2.9, 4.3, 1.3, "versicolor"],
                    [5.1, 2.5, 3.0, 1.1, "versicolor"],
                    [5.7, 2.8, 4.1, 1.3, "versicolor"],
                    [6.3, 3.3, 6.0, 2.5, "virginica"],
                    [5.8, 2.7, 5.1, 1.9, "virginica"],
                    [7.1, 3.0, 5.9, 2.1, "virginica"],
                    [6.3, 2.9, 5.6, 1.8, "virginica"],
                    [6.5, 3.0, 5.8, 2.2, "virginica"],
                    [7.6, 3.0, 6.6, 2.1, "virginica"],
                    [4.9, 2.5, 4.5, 1.7, "virginica"],
                    [7.3, 2.9, 6.3, 1.8, "virginica"],
                    [6.7, 2.5, 5.8, 1.8, "virginica"],
                    [7.2, 3.6, 6.1, 2.5, "virginica"],
                    [6.5, 3.2, 5.1, 2.0, "virginica"],
                    [6.4, 2.7, 5.3, 1.9, "virginica"],
                    [6.8, 3.0, 5.5, 2.1, "virginica"],
                    [5.7, 2.5, 5.0, 2.0, "virginica"],
                    [5.8, 2.8, 5.1, 2.4, "virginica"],
                    [6.4, 3.2, 5.3, 2.3, "virginica"],
                    [6.5, 3.0, 5.5, 1.8, "virginica"],
                    [7.7, 3.8, 6.7, 2.2, "virginica"],
                    [7.7, 2.6, 6.9, 2.3, "virginica"],
                    [6.0, 2.2, 5.0, 1.5, "virginica"],
                    [6.9, 3.2, 5.7, 2.3, "virginica"],
                    [5.6, 2.8, 4.9, 2.0, "virginica"],
                    [7.7, 2.8, 6.7, 2.0, "virginica"],
                    [6.3, 2.7, 4.9, 1.8, "virginica"],
                    [6.7, 3.3, 5.7, 2.1, "virginica"],
                    [7.2, 3.2, 6.0, 1.8, "virginica"],
                    [6.2, 2.8, 4.8, 1.8, "virginica"],
                    [6.1, 3.0, 4.9, 1.8, "virginica"],
                    [6.4, 2.8, 5.6, 2.1, "virginica"],
                    [7.2, 3.0, 5.8, 1.6, "virginica"],
                    [7.4, 2.8, 6.1, 1.9, "virginica"],
                    [7.9, 3.8, 6.4, 2.0, "virginica"],
                    [6.4, 2.8, 5.6, 2.2, "virginica"],
                    [6.3, 2.8, 5.1, 1.5, "virginica"],
                    [6.1, 2.6, 5.6, 1.4, "virginica"],
                    [7.7, 3.0, 6.1, 2.3, "virginica"],
                    [6.3, 3.4, 5.6, 2.4, "virginica"],
                    [6.4, 3.1, 5.5, 1.8, "virginica"],
                    [6.0, 3.0, 4.8, 1.8, "virginica"],
                    [6.9, 3.1, 5.4, 2.1, "virginica"],
                    [6.7, 3.1, 5.6, 2.4, "virginica"],
                    [6.9, 3.1, 5.1, 2.3, "virginica"],
                    [5.8, 2.7, 5.1, 1.9, "virginica"],
                    [6.8, 3.2, 5.9, 2.3, "virginica"],
                    [6.7, 3.3, 5.7, 2.5, "virginica"],
                    [6.7, 3.0, 5.2, 2.3, "virginica"],
                    [6.3, 2.5, 5.0, 1.9, "virginica"],
                    [6.5, 3.0, 5.2, 2.0, "virginica"],
                    [6.2, 3.4, 5.4, 2.3, "virginica"],
                    [5.9, 3.0, 5.1, 1.8, "virginica"]
                ];

                var GRID_WIDTH = 220;
                var GRID_HEIGHT = 220;
                var GAP = 20;
                var CATEGORY_DIM = 4;
                var CROSS_DIM_NUMBER = 4;
                var BASE_LEFT = 30;
                var BASE_TOP = 20;
                var SYMBOL_SIZE = 8;

                function genData(data, dimX, dimY) {
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result.push([data[i][dimX], data[i][dimY], data[i][CATEGORY_DIM]]);
                    }
                    return result;
                }

                function getCategories(data) {
                    var map = {};
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        if (!map[data[i][CATEGORY_DIM]]) {
                            map[data[i][CATEGORY_DIM]] = 1;
                        }
                    }
                    for (var cate in map) {
                        if (map.hasOwnProperty(cate)) {
                            result.push(cate);
                        }
                    }
                    return result;
                }

                function genGrids(option) {
                    var gridList = option.grid = [];
                    var xAxisList = option.xAxis = [];
                    var yAxisList = option.yAxis = [];
                    var seriesList = option.series = [];
                    var visualMapSeriesIndices = option.visualMap.seriesIndex = [];
                    var axisPointerLinkList = option.axisPointer.link = [];
                    var axisPointerLinkMap = {};

                    for (var i = 0; i < CROSS_DIM_NUMBER; i++) {
                        for (var j = 0; j < CROSS_DIM_NUMBER; 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);

                            gridList.push({
                                left: BASE_LEFT + i * (GRID_WIDTH + GAP),
                                top: BASE_TOP + (CROSS_DIM_NUMBER - 1 - j) * (GRID_HEIGHT + GAP),
                                width: GRID_WIDTH,
                                height: GRID_HEIGHT
                            });
                            xAxisList.push({
                                id: id,
                                axisLine: {
                                    onZero: false
                                },
                                axisTick: {
                                    show: j === 0
                                },
                                axisLabel: {
                                    show: j === 0
                                },
                                type: 'value',
                                gridIndex: i * CROSS_DIM_NUMBER + j,
                                scale: true
                            });
                            yAxisList.push({
                                id: id,
                                axisLine: {
                                    onZero: false
                                },
                                axisTick: {
                                    show: i === 0
                                },
                                axisLabel: {
                                    show: i === 0
                                },
                                type: 'value',
                                gridIndex: i * CROSS_DIM_NUMBER + j,
                                scale: true
                            });
                            seriesList.push({
                                type: 'scatter',
                                symbolSize: SYMBOL_SIZE,
                                xAxisIndex: i * CROSS_DIM_NUMBER + j,
                                yAxisIndex: i * CROSS_DIM_NUMBER + j,
                                data: genData(rawData, i, j)
                            });
                            visualMapSeriesIndices.push(i * CROSS_DIM_NUMBER + j);
                        }
                    }
                }

                var option = {
                    legend: {
                        data: ['scatter', 'scatter2', 'scatter3']
                    },
                    animation: false,
                    brush: {
                        brushLink: 'all'
                    },
                    axisPointer: {
                        show: true,
                        snap: true,
                        link: [],
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        categories: getCategories(rawData),
                        dimension: 2,
                        orient: 'horizontal',
                        top: 0,
                        left: 'center',
                        inRange: {
                            color: ['#c23531','#2f4554', '#61a0a8']
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        extraCssText: 'max-width:400px; white-space: normal;',
                        formatter: function (params) {
                            if (echarts.util.isArray(params)) {
                                var map = {
                                    x: {items: []},
                                    y: {items: []}
                                };
                                echarts.util.each(params, function (param) {
                                    var dim = param.axisDim;
                                    var mapItem = map[dim];
                                    mapItem.axisValueLabel = param.axisValueLabel;
                                    mapItem.items.push(
                                        param.value[dim === 'x' ? 1 : 0]
                                        + ' ' + param.value[2]
                                    );
                                });
                                return map.x.axisValueLabel + '<br>(' + map.x.items.join(') (') + ')'
                                    + '<br><br>'
                                    + map.y.axisValueLabel + '<br>(' + map.y.items.join(') (') + ')';
                            }
                            else {
                                return params.name + ' ' + params.value;
                            }
                        }
                    }
                };

                genGrids(option);

                var mainEl = document.getElementById('main');
                mainEl.style.height = BASE_TOP * 2 + CROSS_DIM_NUMBER * (GRID_HEIGHT + GAP) + 'px';
                chart = myChart = echarts.init(mainEl);
                chart.setOption(option);
            });

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