373 lines
17 KiB
HTML
Generated
373 lines
17 KiB
HTML
Generated
<!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/simpleRequire.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'
|
|
], 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> |