基于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数据，并做相应的整理，代码如下图所示： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210704202208830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4u