272 lines
8.7 KiB
HTML
272 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>鸢尾花</title>
|
|
<script src="js/echarts.min.js"></script>
|
|
<script src="js/d3.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="main" style="width: 800px; height: 600px;"></div>
|
|
|
|
<script>
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
d3.csv("task3/data/iris.csv", function (error, data) {
|
|
console.log(data);
|
|
|
|
var setosa = [];
|
|
var versicolor = [];
|
|
var virgincica = [];
|
|
var sepal_length = [];
|
|
|
|
for (i = 0; i < data.length; i++) {
|
|
sepal_length.push(parseFloat(data[i].SepalLength));
|
|
if (i < 50) {
|
|
setosa[i] = [
|
|
parseFloat(data[i].SepalLength),
|
|
parseFloat(data[i].SepalWidth)
|
|
];
|
|
} else if (i >= 100) {
|
|
virgincica[i - 100] = [
|
|
parseFloat(data[i].SepalLength),
|
|
parseFloat(data[i].SepalWidth)
|
|
]
|
|
} else {
|
|
versicolor[i - 50] = [
|
|
parseFloat(data[i].SepalLength),
|
|
parseFloat(data[i].SepalWidth)
|
|
]
|
|
}
|
|
}
|
|
console.log(setosa);
|
|
console.log(versicolor);
|
|
console.log(virgincica);
|
|
|
|
var setosa_mean = d3.mean(sepal_length.slice(0, 50))
|
|
var versicolor_mean = d3.mean(sepal_length.slice(50, 100))
|
|
var virginica_mean = d3.mean(sepal_length.slice(100, 150))
|
|
|
|
|
|
var option = {
|
|
title: {
|
|
text: '鸢尾花花萼数据可视化'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '7%',
|
|
bottom: '7%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
// trigger: 'axis',
|
|
showDelay: 0,
|
|
formatter: function (params) {
|
|
if (params.value.length > 1) {
|
|
return (
|
|
params.seriesName +
|
|
' :<br/>' +
|
|
params.value[0] +
|
|
'cm ' +
|
|
params.value[1] +
|
|
'cm '
|
|
);
|
|
} else {
|
|
return (
|
|
params.seriesName +
|
|
' :<br/>' +
|
|
params.name +
|
|
' : ' +
|
|
params.value +
|
|
'cm '
|
|
);
|
|
}
|
|
},
|
|
axisPointer: {
|
|
show: true,
|
|
type: 'cross',
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
width: 1
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {},
|
|
brush: {
|
|
type: ['rect', 'polygon', 'clear']
|
|
}
|
|
}
|
|
},
|
|
brush: {},
|
|
legend: {
|
|
data: ['setosa', 'versicolor', 'virginica'],
|
|
left: 'center',
|
|
bottom: 10
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'value',
|
|
scale: true,
|
|
axisLabel: {
|
|
formatter: '{value} cm'
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
scale: true,
|
|
axisLabel: {
|
|
formatter: '{value} cm'
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'setosa',
|
|
type: 'scatter',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
// prettier-ignore
|
|
data: setosa,
|
|
markArea: {
|
|
silent: true,
|
|
itemStyle: {
|
|
color: 'transparent',
|
|
borderWidth: 1,
|
|
borderType: 'dashed'
|
|
},
|
|
data: [
|
|
[
|
|
{
|
|
name: 'setosa分布区间',
|
|
xAxis: 'min',
|
|
yAxis: 'min'
|
|
},
|
|
{
|
|
xAxis: 'max',
|
|
yAxis: 'max'
|
|
}
|
|
]
|
|
]
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: 'Max'},
|
|
{type: 'min', name: 'Min'}
|
|
]
|
|
},
|
|
markLine: {
|
|
lineStyle: {
|
|
type: 'solid'
|
|
},
|
|
data: [{type: 'average', name: 'AVG'}, {xAxis: setosa_mean}]
|
|
}
|
|
},
|
|
{
|
|
name: 'versicolor',
|
|
type: 'scatter',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
// prettier-ignore
|
|
data: versicolor,
|
|
markArea: {
|
|
silent: true,
|
|
itemStyle: {
|
|
color: 'transparent',
|
|
borderWidth: 1,
|
|
borderType: 'dashed'
|
|
},
|
|
data: [
|
|
[
|
|
{
|
|
name: 'versicolor分布区间',
|
|
xAxis: 'min',
|
|
yAxis: 'min'
|
|
},
|
|
{
|
|
xAxis: 'max',
|
|
yAxis: 'max'
|
|
}
|
|
]
|
|
]
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: 'Max'},
|
|
{type: 'min', name: 'Min'}
|
|
]
|
|
},
|
|
markLine: {
|
|
lineStyle: {
|
|
type: 'solid'
|
|
},
|
|
data: [{type: 'average', name: 'Average'}, {xAxis: versicolor_mean}]
|
|
}
|
|
},
|
|
{
|
|
name: 'virginica',
|
|
type: 'scatter',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
// prettier-ignore
|
|
data: virgincica,
|
|
markArea: {
|
|
silent: true,
|
|
itemStyle: {
|
|
color: 'transparent',
|
|
borderWidth: 1,
|
|
borderType: 'dashed'
|
|
},
|
|
data: [
|
|
[
|
|
{
|
|
name: 'virginica分布区间',
|
|
xAxis: 'min',
|
|
yAxis: 'min'
|
|
},
|
|
{
|
|
xAxis: 'max',
|
|
yAxis: 'max'
|
|
}
|
|
]
|
|
]
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: 'Max'},
|
|
{type: 'min', name: 'Min'}
|
|
]
|
|
},
|
|
markLine: {
|
|
lineStyle: {
|
|
type: 'solid'
|
|
},
|
|
data: [{type: 'average', name: 'AVG'}, {xAxis: virginica_mean}]
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |