数据可视化--ECharts图--HBuilderX--散点图2

最新推荐文章于 2024-05-31 17:00:21 发布

凤枭香

最新推荐文章于 2024-05-31 17:00:21 发布

阅读量744

点赞数 1

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

本文链接：https://blog.csdn.net/yangzheng_520/article/details/116059924

版权

可视化-Echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鸢尾花</title>
<script src="echarts/echarts.min.js"></script>
<script src="echarts/d3.min.js"></script>
</head>
<body>
	<div id="main" style="width: 800px;height:600px;"></div>
	<script type="text/javascript">
	    // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('main'));
		
		
		d3.csv("Data/iris.csv",
			function(error,data){
				var petal_length=[];
				var setosa=[];
				var versicolor=[];
				var virginica=[];
				// console.log(data);				
				for(var i=0;i<data.length;i++){					
					var PetalLength = data[i].PetalLength
					var PetalWidth = data[i].PetalWidth
					petal_length.push(PetalLength)
					if(i<50){
						setosa[i]=[parseFloat(PetalLength),parseFloat(PetalWidth)]
					}
					else if(i>=100){					
						virginica[i-100]=[parseFloat(PetalLength),parseFloat(PetalWidth)]
					}
					else{
						versicolor[i-50]=[parseFloat(PetalLength),parseFloat(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));
					
				var option = {
				    title: {
				        text: '鸢尾花数据可视化',
				    },
				    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,
							itemStyle:{
								color:'red'
							},
				            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: '最大值'},
				                    {type: 'min', name: '最小值'}
				                ]
				            },
				            markLine: {
				                lineStyle: {
				                    type: 'solid'
				                },
				                data: [
				                    {type: 'average', name: '平均值'},
				                    { xAxis: setosa_mean }
				                ]
				            }
				        },
						{
						    name: 'versicolor',
						    type: 'scatter',
						    emphasis: {
						        focus: 'series'
						    },
						    data: versicolor,
							itemStyle:{
								color:'#001734',
							},
						    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: '最大值'},
						            {type: 'min', name: '最小值'}
						        ]
						    },
						    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: '最大值'},
						            {type: 'min', name: '最小值'}
						        ]
						    },
						    markLine: {
						        lineStyle: {
						            type: 'solid'
						        },
						        data: [
						            {type: 'average', name: '平均值'},
						            { xAxis: virginica_mean }
						        ]
						    }
						},		        
				    ]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
							
				}
			); 
			
			
	</script>
</body>
<html>

在这里插入图片描述

参考网址：Echarsts官网
注：查看数据，需要在网页上进行----右键（查看源码或者检查源码或者审查元素）也可以按F12

如果HBuilderX在浏览器看不到我们写好的图像，那么请使用内置浏览器查看。数据的获取并不是一成不变的，我们可以自己考虑循环。

var petal_length=[]
		for(var i =0;i<data.length;i++){
			var height=data[i].PetalLength
			var tep=[height]
			petal_length.push(tep)
		};
// 		console.log(); 查看内容
// console.log(petal_length);
		// 求三种花瓣长度的平均值
		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));
				
		var setosa=[]
		for(var i=0;i<50;i++){
			var height=data[i].PetalLength
			var weight=data[i].PetalWidth
			var tep=[height,weight]
			setosa.push(tep)
		};
		
		var versicolor=[]
		for(var i =50;i<100;i++){
			var height=data[i].PetalLength
			var weight=data[i].PetalWidth
			var tep=[height,weight]
			versicolor.push(tep)
		};

		
		var virginica=[]
		for(var i =100;i<150;i++){
			var height=data[i].PetalLength
			var weight=data[i].PetalWidth
			var tep=[height,weight]
			virginica.push(tep)
		};

关注一下，谢谢

凤枭香

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
数据可视化--ECharts图--HBuilderX--散点图2

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鸢尾花</title><script src="echarts/echarts.min.js"></script><script src="echarts/d3.min.js"></script></head><body> &l
复制链接

扫一扫

专栏目录