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

浅浅的花香味﹌ 2023-09-30 16:44 6阅读 0赞

## 一、准备 ##

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

官网路径：[https://echarts.apache.org/zh/index.html![icon-default.png?t=M85B][icon-default.png_t_M85B]https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html_icon-default.png_t_M85B_icon-default.png_t_M85B_https_echarts.apache.org_zh_index.html]

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

![0afda356dc4c4600974b35f78ce98cee.bmp][]

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

![7e1d580451834f94b7a03264ee78399b.bmp][]

### Echarts下载： ###

#### Echarts下载路径： ####

[https://echarts.apache.org/zh/download.html![icon-default.png?t=M85B][icon-default.png_t_M85B]https://echarts.apache.org/zh/download.html][https_echarts.apache.org_zh_download.html_icon-default.png_t_M85B_icon-default.png_t_M85B_https_echarts.apache.org_zh_download.html]

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

![bba1a38400d8485692f121bf600b0366.bmp][]

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

![cd731a31fdbf471d8beb54de0c3c40e3.bmp][]

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

![fa785bf19347405d88612b27c511c307.bmp][]

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

### D3下载： ###

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

![9842a80d22d3413ab087ed83d5b0039c.bmp][]

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

D3官网地址：[https://d3js.org/![icon-default.png?t=M85B][icon-default.png_t_M85B]https://d3js.org/][https_d3js.org_icon-default.png_t_M85B_icon-default.png_t_M85B_https_d3js.org]

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

![708c9c4cce064b358caa73c3e03626f7.bmp][]

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

## 二、编码实现 ##

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

![5ccd4aadedd84997abda3f8ecc5b14d1.bmp][]

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

<!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>

最后放上运行截图：

![c241d4f0c5d84d5e9579c1efd16ef450.bmp][]

最后，祝大家学业有成！

[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[https_echarts.apache.org_zh_index.html_icon-default.png_t_M85B_icon-default.png_t_M85B_https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[0afda356dc4c4600974b35f78ce98cee.bmp]: https://img-blog.csdnimg.cn/0afda356dc4c4600974b35f78ce98cee.bmp
[7e1d580451834f94b7a03264ee78399b.bmp]: https://img-blog.csdnimg.cn/7e1d580451834f94b7a03264ee78399b.bmp
[https_echarts.apache.org_zh_download.html_icon-default.png_t_M85B_icon-default.png_t_M85B_https_echarts.apache.org_zh_download.html]: https://echarts.apache.org/zh/download.html
[bba1a38400d8485692f121bf600b0366.bmp]: https://img-blog.csdnimg.cn/bba1a38400d8485692f121bf600b0366.bmp
[cd731a31fdbf471d8beb54de0c3c40e3.bmp]: https://img-blog.csdnimg.cn/cd731a31fdbf471d8beb54de0c3c40e3.bmp
[fa785bf19347405d88612b27c511c307.bmp]: https://img-blog.csdnimg.cn/fa785bf19347405d88612b27c511c307.bmp
[9842a80d22d3413ab087ed83d5b0039c.bmp]: https://img-blog.csdnimg.cn/9842a80d22d3413ab087ed83d5b0039c.bmp
[https_d3js.org_icon-default.png_t_M85B_icon-default.png_t_M85B_https_d3js.org]: https://d3js.org/
[708c9c4cce064b358caa73c3e03626f7.bmp]: https://img-blog.csdnimg.cn/708c9c4cce064b358caa73c3e03626f7.bmp
[5ccd4aadedd84997abda3f8ecc5b14d1.bmp]: https://img-blog.csdnimg.cn/5ccd4aadedd84997abda3f8ecc5b14d1.bmp
[c241d4f0c5d84d5e9579c1efd16ef450.bmp]: https://img-blog.csdnimg.cn/c241d4f0c5d84d5e9579c1efd16ef450.bmp