基于Echarts的鸢尾花数据可视化
打开工具HbuilderX，选择新建项目-普通项目-基本HTML项目；
在index.html页面的< head >和标签之间引入echarts.min.js和d3.min.js，注意需在对应的位置创建相关文件夹。代码如下所示；
<head>
<meta charset="utf-8">
<title>鸢尾花数据可视化</title>
<script src="echarts/echarts.min.js"></script>
<script src="echarts/d3.min.js"></script>
</head>
创建Dom和初始化echarts实例
在index.html页面的和标签之间，下边一行创建一个宽800高600的Dom，代码如下所示：
<div id="main" style="width: 800px;height:600px;"></div>
基于准备好的Dom，在index.html页面的< script >和标签之间初始化echarts实例，代码如下所示：
var myChart = echarts.init(document.getElementById('main'));
读取csv数据
先打开csv数据查看，共150行6列，前50行数据为山鸢尾的花萼和花瓣的长宽，51-100行的数据为杂色鸢尾的花萼和花瓣的长宽，101-150行为维吉尼亚鸢尾的花萼和花瓣的长宽，了解数据后，在加载完数据后，对数据进行处理。
通过D3在index.html页面的< script >和标签之间读取csv数据，并做相应的整理，代码如下所示：
<script>
d3.csv("Data/iris.csv",function(error,data){
console.log(data);
});
</script>
整理数据
在d3.csv()之间继续添加代码,将数据安装花的类别整理成3组，为后面绘制散点图做准备。数据整理后，每种花各50个，都是以[[length,width],[ length,width],[ length,width],……]形式的数组保存。
var setosa = [];
var versicolor = [];
var virginica = [];
var petal_length = [];
for (i=
最低0.47元/天 解锁文章
扫一扫
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
