311 lines
14 KiB
HTML
311 lines
14 KiB
HTML
|
<!DOCTYPE>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<script src="esl.js"></script>
|
||
|
|
<script src="config.js"></script>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<link rel="stylesheet" href="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 = [];
|
||
|
|
|
||
|
|
for (var i = 0; i < CROSS_DIM_NUMBER; i++) {
|
||
|
|
for (var j = 0; j < CROSS_DIM_NUMBER; j++) {
|
||
|
|
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({
|
||
|
|
axisLine: {
|
||
|
|
onZero: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: j === 0
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: j === 0
|
||
|
|
},
|
||
|
|
type: 'value',
|
||
|
|
gridIndex: i * CROSS_DIM_NUMBER + j,
|
||
|
|
scale: true
|
||
|
|
});
|
||
|
|
yAxisList.push({
|
||
|
|
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'
|
||
|
|
},
|
||
|
|
visualMap: {
|
||
|
|
type: 'piecewise',
|
||
|
|
categories: getCategories(rawData),
|
||
|
|
dimension: 2,
|
||
|
|
orient: 'horizontal',
|
||
|
|
top: 0,
|
||
|
|
left: 'center',
|
||
|
|
inRange: {
|
||
|
|
color: ['#c23531','#2f4554', '#61a0a8']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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>
|