| <!DOCTYPE html> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| |
| <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> |