初始化数据可视化项目
This commit is contained in:
272
experiment_5/task3.html
Normal file
272
experiment_5/task3.html
Normal file
@@ -0,0 +1,272 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user