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

最新推荐文章于 2024-01-25 15:29:18 发布

沙漠真有鱼

最新推荐文章于 2024-01-25 15:29:18 发布

阅读量640

点赞数 3

分类专栏：可视化文章标签： echarts 前端 javascript

By-ショーさん

本文链接：https://blog.csdn.net/weixin_65950231/article/details/127869353

版权

可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、准备

在我们进行鸢尾花数据可视化之前，这里我选择使用HbuilderX，个人而言做一些可视化HbuilderX会比VSCode更好用。工具准备好了之后我们可以进入到Echarts官网，该可视化我们会使用到2个js包。

官网路径：https://echarts.apache.org/zh/index.htmlhttps://echarts.apache.org/zh/index.html

进入官网，我们可以选择案例进行查看，这是一个很好的类似于组件的东西，可以直接进行调用。

当进入到官网之后，我们这个可视化会用到2个js包

Echarts下载：

Echarts下载路径：

https://echarts.apache.org/zh/download.htmlhttps://echarts.apache.org/zh/download.html

我们在下载的时候可以选择自己喜欢的方式，本人在此使用最后一个方法进行下载：

我们选择在线定制后会跳转到下面这个界面:

版本可以自己选择，本人使用的是最新版本的前一个。因为不是专业的，对于版本更新也不是很关注，但是一般新的版本都会有很多的bug。在选择版本之后，就可以选择你想用的东西了，这里建议全选，方便之后使用的时候不会出现依赖缺失的情况。选好想要的依赖之后，在最后会有其他选项：

我们这里全选，全选之后就可以进行下载了。

D3下载：

在下载d3.js包之前，我们先来看一下排名：

对于很多人来讲，jquery是一个耳熟的框架，在现实中也是很非常受欢迎的，但在榜单上面，d3却在d3之上，这足以见得d3的强大。

D3官网地址：https://d3js.org/https://d3js.org/

在进入官网之后，如果对这个有兴趣的话可以进行一定的学习：

对于D3，如果有想更深入的学习的话，可以去GitHub里面查看。

二、编码实现

在进行编码之前，我们一定要建好文件夹，方便后面进行修改。将我们的csv文件放入到Data包里面，新建js放入我们需要的依赖。

最后，也是你们最想要的东西来了，我们的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鸢尾花数据可视化</title>
		<script src="js/d3.min.js"></script>
		<script src="js/echarts.min (1).js" ></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 600px;"></div>
		
		<script type="text/javascript">
			var myCharts = echarts.init(document.getElementById('main'));
			
			d3.csv("Data/iris.csv",function(error,data){
				// 3组数据提取及分类
				var setosa=[],versicolor=[],virginica=[],petal_length=[];
				for(var i=0;i<=149;i++){
					petal_length.push(parseFloat(data[i]["PetalLength"]));
					if(setosa.length<50){
						setosa.push([parseFloat(data[i]["PetalLength"]),parseFloat(data[i]["PetalWidth"])]);
					}else if(versicolor.length<50){
						versicolor.push([parseFloat(data[i]["PetalLength"]),parseFloat(data[i]["PetalWidth"])]);
					}else{
						virginica.push([parseFloat(data[i]["PetalLength"]),parseFloat(data[i]["PetalWidth"])]);
					}	
				}
				// 计算三种花的花瓣长度平均值
				var setosa_mean = d3.mean(petal_length.slice(0,50));
				var versicolor_mean = d3.mean(petal_length.slice(50,100));
				var virginica_mean = d3.mean(petal_length.slice(100,150));
				console.table([setosa_mean,versicolor_mean,virginica_mean]);
				
				// 设置图形的配置项
				option = {
				    title: {
				        text: '鸢尾花数据可视化',
				        subtext: 'Data from: Heinz 2003'
				    },
				    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'
				            },
				            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: '平均值'},
				                    { xAxis: setosa_mean }
				                ]
				            }
				        },
				        {
				            name: 'versicolor',
				            type: 'scatter',
				            emphasis: {
				                focus: 'series'
				            },
				            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: '平均值'},
				                    { xAxis: versicolor_mean }
				                ]
				            }
				        },
						{
						    name: 'virginica',
						    type: 'scatter',
						    emphasis: {
						        focus: 'series'
						    },
						    data: virginica,
							
						    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: '平均值'},
						            { xAxis: virginica_mean }
						        ]
						    }
						}
				    ]
				};
			myCharts.setOption(option);
				
			});
			
		</script>
	</body>
</html>

最后放上运行截图：