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

最新推荐文章于 2023-06-08 19:34:32 发布

蛋蛋 666

最新推荐文章于 2023-06-08 19:34:32 发布

阅读量951

点赞数

分类专栏：数据可视化文章标签：可视化

本文链接：https://blog.csdn.net/weixin_45818372/article/details/118466816

版权

本文介绍如何使用Echarts进行数据可视化，通过加载鸢尾花csv数据，绘制花瓣长度与宽度的散点图。实验步骤包括引入Echarts库，准备DOM，整理数据，计算平均值，设置图表配置项，以及最终显示图表。

摘要由CSDN通过智能技术生成

一、实验（实训）目的与要求；
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