分享一下如何使用echarts绘制散点图

最新推荐文章于 2024-04-28 13:46:58 发布

帅帅的Python

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/weixin_42060598/article/details/130932765

版权

数据分析同时被 3 个专栏收录

25 篇文章 3 订阅

订阅专栏

数据可视化

8 篇文章 1 订阅

订阅专栏

echarts

6 篇文章 0 订阅

订阅专栏

文章目录

散点图
源码地址

散点图

今天我来分享一下如何使用echarts绘制散点图
首先，我们需要引入echarts库。可以通过以下代码在HTML文件中引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>

或者引入下载好的js文件：

<script src="echarts.min.js"> </script>

然后，我们需要准备好数据。散点图需要至少两个数据集，分别表示x轴和y轴的坐标。我们可以使用JavaScript数组来存储数据。

// 数据内容
data: [
    [10.0, 8.04],
    [8.07, 6.95],
    [13.0, 7.58],
    [9.05, 8.81],
    [11.0, 8.33],
    [14.0, 7.66],
    [13.4, 6.81],
    [10.0, 6.33],
    [14.0, 8.96],
    [12.5, 6.82],
    [9.15, 7.2],
    [11.5, 7.2],
    [3.03, 4.23],
    [12.2, 7.83],
    [2.02, 4.47],
    [1.05, 3.33],
    [4.05, 4.96],
    [6.03, 7.24],
    [12.0, 6.26],
    [12.0, 8.84],
    [7.08, 5.82],
    [5.02, 5.68]
]

接下来，我们可以创建一个div元素来容纳echarts图表，并设置其宽度和高度。

<div id="main" style="width:600px;height:400px;"></div>

然后，我们可以使用echarts的init方法初始化图表，并将其绑定到我们创建的div元素上。

var myChart=echarts.init(document.getElementById('main'));

接下来，我们需要配置图表。散点图的配置项包括x轴和y轴的坐标轴类型、坐标轴刻度、散点大小和颜色等。

var option={
	// 图表标题配置
	title:{
		text:'散点图'
	},
	// X 轴配置项
	xAxis:{
	},
	// y 轴配置项
	yAxis:{
	},
	// 系列配置，根据不同图表有不同的配置
	series:[
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			symbolSize:20,
			// 图表类型
			type:'scatter',
			// 数据内容
			data: [
			        [10.0, 8.04],
			        [8.07, 6.95],
			        [13.0, 7.58],
			        [9.05, 8.81],
			        [11.0, 8.33],
			        [14.0, 7.66],
			        [13.4, 6.81],
			        [10.0, 6.33],
			        [14.0, 8.96],
			        [12.5, 6.82],
			        [9.15, 7.2],
			        [11.5, 7.2],
			        [3.03, 4.23],
			        [12.2, 7.83],
			        [2.02, 4.47],
			        [1.05, 3.33],
			        [4.05, 4.96],
			        [6.03, 7.24],
			        [12.0, 6.26],
			        [12.0, 8.84],
			        [7.08, 5.82],
			        [5.02, 5.68]
			      ],
		}
	]
};

最后，我们可以使用setOption方法将配置应用到图表上。

//使用刚指定的配置项和数据显示图像
myChart.setOption(option);

到这里，我们已经成功地使用echarts绘制了一个散点图。完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flask+echarts项目</title>
	<!-- 导入下载的 echarts.min.js -->
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));

// 自定义图表的宽高
// var myChart=echarts.init(document.getElementById('main'),null,{width:500,height:400});

// 跟随浏览器的宽度自适应图表大小
// var myChart=echarts.init(document.getElementById('main'));
// window.addEventListener('resize',function(){myChart.resize();});

// 指定图表的配置项和数据
var option={
	// 图表标题配置
	title:{
		text:'散点图'
	},
	// X 轴配置项
	xAxis:{
	},
	// y 轴配置项
	yAxis:{
	},
	// 系列配置，根据不同图表有不同的配置
	series:[
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			symbolSize:20,
			// 图表类型
			type:'scatter',
			// 数据内容
			data: [
			        [10.0, 8.04],
			        [8.07, 6.95],
			        [13.0, 7.58],
			        [9.05, 8.81],
			        [11.0, 8.33],
			        [14.0, 7.66],
			        [13.4, 6.81],
			        [10.0, 6.33],
			        [14.0, 8.96],
			        [12.5, 6.82],
			        [9.15, 7.2],
			        [11.5, 7.2],
			        [3.03, 4.23],
			        [12.2, 7.83],
			        [2.02, 4.47],
			        [1.05, 3.33],
			        [4.05, 4.96],
			        [6.03, 7.24],
			        [12.0, 6.26],
			        [12.0, 8.84],
			        [7.08, 5.82],
			        [5.02, 5.68]
			      ],
		}
	]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

效果如下：

在这里插入图片描述

希望这篇文章能够帮助你了解如何使用echarts绘制散点图。

源码地址

链接：https://pan.baidu.com/s/1jwiBNf-qwadbNg9FJu8UOw?pwd=pd43
提取码：pd43

帅帅的Python

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
分享一下如何使用echarts绘制散点图

散点图的配置项包括x轴和y轴的坐标轴类型、坐标轴刻度、散点大小和颜色等。然后，我们可以使用echarts的init方法初始化图表，并将其绑定到我们创建的div元素上。接下来，我们可以创建一个div元素来容纳echarts图表，并设置其宽度和高度。// 系列名称，用于tooltip显示，legend图例筛选。// 基于准备好的dom，初始化echarts实例。// 系列配置，根据不同图表有不同的配置。//使用刚指定的配置项和数据显示图像。// 指定图表的配置项和数据。// 自定义图表的宽高。
复制链接

扫一扫