基于Echarts的鸢尾花数据可视化

一、实验（实训）目的与要求；
1.理解数据可视化的绘图方法；
2.掌握Echarts可视化步骤、原理和效果；
3.掌握使用D3读取csv数据的方法；
二、实验（实训）原理与内容；
加载鸢尾花的csv数据，将鸢尾花花瓣（Petal）的长和宽按照花的分类做一份数据可视化
1、引入Echarts；
2、为ECharts准备一个具备大小的Dom；
3、加载数据和整理数据；
4、设定图表的配置项；
5、使用指定的配置项和数据显示图表；
6、添加和修改图表样式；
三、实验（实训）仪器设备、器材、工具、软件等；
设备：4G内存、i3处理器、512GB硬盘、HBuilderX
四、实验（实训）方法、步骤、过程记录与处理；
1、引入Echarts
1）打开工具HbuilderX，选择新建项目-普通项目-基本HTML项目

2）在index.html页面的< head >和标签之间引入echarts.min.js和d3.min.js，注意需在对应的位置创建相关文件夹。代码如下所示：

鸢尾花数据可视化 标签之间读取csv数据，并做相应的整理，代码如下图所示： 

4.整理数据
在d3.csv()之间继续添加代码,将数据安装花的类别整理成3组，为后面绘制散点图做准备。数据整理后，每种花各50个，都是以[[length,width],[ length,width],[ length,width],……]形式的数组保存。
5.计算三种花的花瓣长度平均值
计算三种花的花瓣长度平均值是为了后面配置项中用到，在d3.csv()之间继续添加如下代码：

6.设置配置项
1）通用配置项设置，设置标题、网格等，具体代码如下图：

2）设置xAxis和yAxis，代码如下图：

3）设置series里面的内容，使三张散点图在同一个坐标系中显示出来，并设置其中的配置信息，具体代码如下图：

7、将上面设置的内容显示出来，将数据加载出来，显示图形，具体代码如下：
myChart.setOption(option);