Apache Echarts常用图表之散点图

最新推荐文章于 2022-12-07 15:38:00 发布

diviner_s

最新推荐文章于 2022-12-07 15:38:00 发布

阅读量4.1k

点赞数 2

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

本文链接：https://blog.csdn.net/diviner_s/article/details/115957974

版权

本文介绍了Apache Echarts中散点图的实现步骤和常见效果，包括基础配置、气泡图和涟漪动画。通过示例代码展示了如何创建散点图，以及如何调整配置以改变散点的大小和颜色，实现动态效果。

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

Echarts常用图表

每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习！
各类常用图表总结在此！配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具，有更详细的工具使用方法：
https://echarts.apache.org/zh/option.html

散点图

散点图可以帮助我们推断出变量间的相关性，追求不同维度数据之间的相关性，根据点的分布，从而找到线性的关系。
散点图也经常用在地图的标注上

1. 散点图的实现步骤

1.先上Echarts经典基本代码框架~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script> 
</head>
<body>
    <div style="width: 600px;height: 400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {
   }
        mCharts.setOption(option)
    </script>
</body>
</html>

此时option对象是空的。

2.准备x轴和y轴的数据

var data = [{
    "gender": "female", "height": 161.2, "weight": 51.6 }, {
   
"gender": "female", "height": 167.5, "weight": 59 }, {
    "gender": "female",
"height": 159.5, "weight": 49.2 }, {
    "gender": "female", "height": 157,
"weight": 63 }, {
    "gender": "female", "height": 155.8, "weight": 53.6 }, {
   
"gender": "female", "height": 170, "weight": 59 }, {
    "gender": "female",
"height": 159.1, "weight": 47.6 }, {
    "gender": "female", "height": 166,
"weight": 69.8 }, {
    "gender": "female", "height": 176.2, "weight": 66.8 }, {
   
"gender": "female", "height": 160.2, "weight": 75.2 }, {
    "gender": "female",
"height": 172.5, "weight": 55.2 }, {
    "gender": "female", "height": 170.9,
"weight": 54.2 }, {
    "gender": "female", "height": 172.9, "weight": 62.5 }, {
   
"gender": "female", "height": 153.4, "weight": 42 }, {
    "gender": "female",
"height": 160, "weight": 50 }, {
    "gender": "female", "height": 147.2,
"weight": 49.8 },...此处省略...]

假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而
散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散
点图需要的数据

var axisData = []
for (var i = 0; i < data.length; i++) {
     //处理获取的信息
	var height = data[i].height
	var weight = data[i].weight
	var itemArr = [height, weight]
	axisData.push(itemArr)
}

axisData就是一个二维数组，数组中的每一个元素还是一个数组，最内层数组中有两个元素，一个代表身高，一个代表体重
3. 准备配置项：

xAxis和yAxis的type都要设置为value
在series下设置type:scatter

var option = {
   
	xAxis: {
   
		type: 'value'
	},
	yAxis: {
   
		type: 'value'
	},
	series: [
		{
   
			type: 'scatter',
		data: axisData
		}
	]
}

调整配置项，脱离0比例
给xAxis和yAxis配置scale的值为true

var option = {
   
	xAxis: {
   
		type: 'value',
		scale: true
	},
	yAxis: {
   
		type: 'value',
		scale: true
	},
	series: [
		{
   
			type: 'scatter',
			data: axisData,
		}
	]
}

最终效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴和y轴数据 二维数组 [ [身高,体重],...   ]
    //3. 将type的值设置为scatter, x轴和y轴的type都是value
    var data = [{
    "gender": "female", "height": 161.2, "weight": 51.6 }, {
    "gender": "female", "height": 167.5, "weight": 59 }, {
    "gender": "female", "height": 159.5, "weight": 49.2 }, {
    "gender": "female", "height": 157, "weight": 63 }, {
    "gender": "female", "height": 155.8, "weight": 53.6 }, {
    "gender": "female", "height": 170, "weight": 59 }, {
    "gender": "female", "height": 159.1, "weight": 47.6 }, {
    "gender": "female", "height": 166, "weight": 69.8 }, {
    "gender": "female", "height": 176.2, "weight": 66.8 }, {
    "gender": "female", "height": 160.2, "weight": 75.2 }, {
    "gender": "female", "height": 172.5, "weight": 55.2 }, {
    "gender": "female", "height": 170.9, "weight": 54.2 }, {
    "gender": "female", "height": 172.9, "weight": 62.5 }, {
    "gender": "female", "height": 153.4, "weight": 42 }, {
    "gender": "female", "height": 160, "weight": 50 }, {
    "gender": "female", "height": 147.2, "weight": 49.8 }, {
    "gender": "female", "height": 168.2, "weight": 49.2 }, {
    "gender": "female", "height": 175, "weight": 73.2 }, {
    "gender": "female", "height": 157, "weight": 47.8 }, {
    "gender": "female", "height": 167.6, "weight": 68.8 }, {
    "gender": "female", "height": 159.5, "weight": 50.6 }, {
    "gender": "female", "height": 175, "weight": 82.5 }, {
    "gender": "female", "height": 166.8, "weight": 57.2 }, {
    "gender": "female", "height": 176.5, "weight": 87.8 }, {
    "gender": "female", "height": 170.2, "weight": 72.8 }, {
    "gender": "female", "height": 174, "weight": 54.5 }, {
    "gender": "female", "height": 173, "weight": 59.8 }, {
    "gender": "female", "height": 179.9, "weight": 67.3 }, {
    "gender": "female", "height": 170.5, "weight": 67.8 }, {
    "gender": "female", "height": 160, "weight": 47 }, {
    "gender": "female", "height": 154.4, "weight": 46.2 }, {
    "gender": "female", "height": 162, "weight": 55 }, {
    "gender": "female", "height": 176.5, "weight": 83 }, {
    "gender": "female", "height": 160, "weight": 54.4 }, {
    "gender": "female", "height": 152, "weight": 45.8 }, {
    "gender": "female", "height": 162.1, "weight": 53.6 }, {
    "gender": "female", "height": 170, "weight": 73.2 }, {
    "gender": "female", "height": 160.2, "weight": 52.1 }, {
    "gender": "female", "height": 161.3, "weight": 67.9 }, {
    "gender": "female", "height": 166.4, "weight": 56.6 }, {
    "gender": "female", "height": 168.9, "weight": 62.3 }, {
    "gender": "female", "height": 163.8, "weight": 58.5 }, {
    "gender": "female", "height": 167.6, "weight": 54.5 }, {
    "gender": "female", "height": 160, "weight": 50.2 }, {
    "gender": "female", "height": 161.3, "weight": 60.3 }, {
    "gender": "female", "height": 167.6, "weight": 58.3 }, {
    "gender": "female", "height": 165.1, "weight": 56.2 }, {
    "gender": "female", "height": 160, "weight": 50.2 }, {
    "gender": "female", "height": 170, "weight": 72.9 }, {
    "gender": "female", "height": 157.5, "weight": 59.8 }, {
    "gender": "female", "height": 167.6, "weight": 61 }, {
    "gender": "female", "height": 160.7, "weight": 69.1 }, {
    "gender": "female", "height": 163.2, "weight": 55.9 }, {
    "gender": "female", "height": 152.4, "weight": 46.5 }, {
    "gender": "female", "height": 157.5, "weight": 54.3 }, {
    "gender": "female", "height": 168.3, "weight": 54.8 }, {
    "gender": "female", "height": 180.3, "weight": 60.7 }, {
    "gender": "female", "height": 165.5, "weight": 60 }, {
    "gender": "female", "height": 165, "weight": 62 }, {
    "gender": "female", "height": 164.5, "weight": 60.3 }, {
    "gender": "female", "height": 156, "weight": 52.7 }, {
    "gender": "female", "height": 160, "weight": 74.3 }, {
    "gender": "female", "height": 163, "weight": 62 }, {
    "gender": "female", "height": 165.7, "weight": 73.1 }, {
    "gender": "female", "height": 161, "weight": 80 }, {
    "gender": "female", "height": 162, "weight": 54.7 }, {
    "gender": "female", "height": 166, "weight": 53.2 }, {
    "gender": "female", "height": 174, "weight": 75.7 }, {
    "gender": "female", "height": 172.7, "weight": 61.1 }, {
    "gender": "female", "height": 167.6, "weight": 55.7 }, {
    "gender": "female", "height": 151.1, "weight": 48.7 }, {
    "gender": "female", "height": 164.5, "weight": 52.3 }, {
    "gender": "female", "height": 163.5, "weight": 50 }, {
    "gender": "female", "height": 152, "weight": 59.3 }, {
    "gender": "female", "height": 169, "weight": 62.5 }, {
    "gender": "female", "height": 164, "weight": 55.7 }, {
    "gender": "female", "height": 161.2, "weight": 54.8 }, {
    "gender