Data visualization ---- ECharts - scatter plot (5)
The definition of scatter plot on Baidu Encyclopedia
The scatter plot refers to the distribution of data points on the plane of the Cartesian coordinate system in the regression analysis. The scatter plot shows the general trend of the dependent variable changing with the independent variable. Based on this, an appropriate function can be selected to fit the data points .
Features of scatterplots
Use two sets of data to form multiple coordinate points, examine the distribution of coordinate points, judge whether there is a certain relationship between two variables or summarize the distribution pattern of coordinate points.
A scatterplot displays a series as a set of points.
Values are represented by the position of the point on the graph.
Categories are represented by different markers in the chart.
Scatterplots are often used to compare aggregated data across categories.
Case Description
We have implemented a small case this time. We use a set of data to prove the relationship between height and weight. In general, height and weight should be positively correlated. The taller the person, the heavier the weight. PS:
here The thing is that under normal circumstances, we don't use an example to refute it.
How to realize scatter plot in Echarts
- The most basic code structure of ECharts
Import js file, DOM container, initialize object, set option
- Two-dimensional array of x-axis and y-axis data
[ [height, weight], [height, weight], [height, weight],... ]
Here we have prepared five hundred sets of different data
- Set the value of type to scatter, and the type of the x-axis and y-axis are both value
NOTE: This configuration is the key to the scatterplot
- Let's implement it together
<!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": "female", "height": 155, "weight": 45.9 }, {
"gender": "female", "height": 170, "weight": 70.6 }, {
"gender": "female", "height": 176.2, "weight": 67.2 }, {
"gender": "female", "height": 170, "weight": 69.4 }, {
"gender": "female", "height": 162.5, "weight": 58.2 }, {
"gender": "female", "height": 170.3, "weight": 64.8 }, {
"gender": "female", "height": 164.1, "weight": 71.6 }, {
"gender": "female", "height": 169.5, "weight": 52.8 }, {
"gender": "female", "height": 163.2, "weight": 59.8 }, {
"gender": "female", "height": 154.5, "weight": 49 }, {
"gender": "female", "height": 159.8, "weight": 50 }, {
"gender": "female", "height": 173.2, "weight": 69.2 }, {
"gender": "female", "height": 170, "weight": 55.9 }, {
"gender": "female", "height": 161.4, "weight": 63.4 }, {
"gender": "female", "height": 169, "weight": 58.2 }, {
"gender": "female", "height": 166.2, "weight": 58.6 }, {
"gender": "female", "height": 159.4, "weight": 45.7 }, {
"gender": "female", "height": 162.5, "weight": 52.2 }, {
"gender": "female", "height": 159, "weight": 48.6 }, {
"gender": "female", "height": 162.8, "weight": 57.8 }, {
"gender": "female", "height": 159, "weight": 55.6 }, {
"gender": "female", "height": 179.8, "weight": 66.8 }, {
"gender": "female", "height": 162.9, "weight": 59.4 }, {
"gender": "female", "height": 161, "weight": 53.6 }, {
"gender": "female", "height": 151.1, "weight": 73.2 }, {
"gender": "female", "height": 168.2, "weight": 53.4 }, {
"gender": "female", "height": 168.9, "weight": 69 }, {
"gender": "female", "height": 173.2, "weight": 58.4 }, {
"gender": "female", "height": 171.8, "weight": 56.2 }, {
"gender": "female", "height": 178, "weight": 70.6 }, {
"gender": "female", "height": 164.3, "weight": 59.8 }, {
"gender": "female", "height": 163, "weight": 72 }, {
"gender": "female", "height": 168.5, "weight": 65.2 }, {
"gender": "female", "height": 166.8, "weight": 56.6 }, {
"gender": "female", "height": 172.7, "weight": 105.2 }, {
"gender": "female", "height": 163.5, "weight": 51.8 }, {
"gender": "female", "height": 169.4, "weight": 63.4 }, {
"gender": "female", "height": 167.8, "weight": 59 }, {
"gender": "female", "height": 159.5, "weight": 47.6 }, {
"gender": "female", "height": 167.6, "weight": 63 }, {
"gender": "female", "height": 161.2, "weight": 55.2 }, {
"gender": "female", "height": 160, "weight": 45 }, {
"gender": "female", "height": 163.2, "weight": 54 }, {
"gender": "female", "height": 162.2, "weight": 50.2 }, {
"gender": "female", "height": 161.3, "weight": 60.2 }, {
"gender": "female", "height": 149.5, "weight": 44.8 }, {
"gender": "female", "height": 157.5, "weight": 58.8 }, {
"gender": "female", "height": 163.2, "weight": 56.4 }, {
"gender": "female", "height": 172.7, "weight": 62 }, {
"gender": "female", "height": 155, "weight": 49.2 }, {
"gender": "female", "height": 156.5, "weight": 67.2 }, {
"gender": "female", "height": 164, "weight": 53.8 }, {
"gender": "female", "height": 160.9, "weight": 54.4 }, {
"gender": "female", "height": 162.8, "weight": 58 }, {
"gender": "female", "height": 167, "weight": 59.8 }, {
"gender": "female", "height": 160, "weight": 54.8 }, {
"gender": "female", "height": 160, "weight": 43.2 }, {
"gender": "female", "height": 168.9, "weight": 60.5 }, {
"gender": "female", "height": 158.2, "weight": 46.4 }, {
"gender": "female", "height": 156, "weight": 64.4 }, {
"gender": "female", "height": 160, "weight": 48.8 }, {
"gender": "female", "height": 167.1, "weight": 62.2 }, {
"gender": "female", "height": 158, "weight": 55.5 }, {
"gender": "female", "height": 167.6, "weight": 57.8 }, {
"gender": "female", "height": 156, "weight": 54.6 }, {
"gender": "female", "height": 162.1, "weight": 59.2 }, {
"gender": "female", "height": 173.4, "weight": 52.7 }, {
"gender": "female", "height": 159.8, "weight": 53.2 }, {
"gender": "female", "height": 170.5, "weight": 64.5 }, {
"gender": "female", "height": 159.2, "weight": 51.8 }, {
"gender": "female", "height": 157.5, "weight": 56 }, {
"gender": "female", "height": 161.3, "weight": 63.6 }, {
"gender": "female", "height": 162.6, "weight": 63.2 }, {
"gender": "female", "height": 160, "weight": 59.5 }, {
"gender": "female", "height": 168.9, "weight": 56.8 }, {
"gender": "female", "height": 165.1, "weight": 64.1 }, {
"gender": "female", "height": 162.6, "weight": 50 }, {
"gender": "female", "height": 165.1, "weight": 72.3 }, {
"gender": "female", "height": 166.4, "weight": 55 }, {
"gender": "female", "height": 160, "weight": 55.9 }, {
"gender": "female", "height": 152.4, "weight": 60.4 }, {
"gender": "female", "height": 170.2, "weight": 69.1 }, {
"gender": "female", "height": 162.6, "weight": 84.5 }, {
"gender": "female", "height": 170.2, "weight": 55.9 }, {
"gender": "female", "height": 158.8, "weight": 55.5 }, {
"gender": "female", "height": 172.7, "weight": 69.5 }, {
"gender": "female", "height": 167.6, "weight": 76.4 }, {
"gender": "female", "height": 162.6, "weight": 61.4 }, {
"gender": "female", "height": 167.6, "weight": 65.9 }, {
"gender": "female", "height": 156.2, "weight": 58.6 }, {
"gender": "female", "height": 175.2, "weight": 66.8 }, {
"gender": "female", "height": 172.1, "weight": 56.6 }, {
"gender": "female", "height": 162.6, "weight": 58.6 }, {
"gender": "female", "height": 160, "weight": 55.9 }, {
"gender": "female", "height": 165.1, "weight": 59.1 }, {
"gender": "female", "height": 182.9, "weight": 81.8 }, {
"gender": "female", "height": 166.4, "weight": 70.7 }, {
"gender": "female", "height": 165.1, "weight": 56.8 }, {
"gender": "female", "height": 177.8, "weight": 60 }, {
"gender": "female", "height": 165.1, "weight": 58.2 }, {
"gender": "female", "height": 175.3, "weight": 72.7 }, {
"gender": "female", "height": 154.9, "weight": 54.1 }, {
"gender": "female", "height": 158.8, "weight": 49.1 }, {
"gender": "female", "height": 172.7, "weight": 75.9 }, {
"gender": "female", "height": 168.9, "weight": 55 }, {
"gender": "female", "height": 161.3, "weight": 57.3 }, {
"gender": "female", "height": 167.6, "weight": 55 }, {
"gender": "female", "height": 165.1, "weight": 65.5 }, {
"gender": "female", "height": 175.3, "weight": 65.5 }, {
"gender": "female", "height": 157.5, "weight": 48.6 }, {
"gender": "female", "height": 163.8, "weight": 58.6 }, {
"gender": "female", "height": 167.6, "weight": 63.6 }, {
"gender": "female", "height": 165.1, "weight": 55.2 }, {
"gender": "female", "height": 165.1, "weight": 62.7 }, {
"gender": "female", "height": 168.9, "weight": 56.6 }, {
"gender": "female", "height": 162.6, "weight": 53.9 }, {
"gender": "female", "height": 164.5, "weight": 63.2 }, {
"gender": "female", "height": 176.5, "weight": 73.6 }, {
"gender": "female", "height": 168.9, "weight": 62 }, {
"gender": "female", "height": 175.3, "weight": 63.6 }, {
"gender": "female", "height": 159.4, "weight": 53.2 }, {
"gender": "female", "height": 160, "weight": 53.4 }, {
"gender": "female", "height": 170.2, "weight": 55 }, {
"gender": "female", "height": 162.6, "weight": 70.5 }, {
"gender": "female", "height": 167.6, "weight": 54.5 }, {
"gender": "female", "height": 162.6, "weight": 54.5 }, {
"gender": "female", "height": 160.7, "weight": 55.9 }, {
"gender": "female", "height": 160, "weight": 59 }, {
"gender": "female", "height": 157.5, "weight": 63.6 }, {
"gender": "female", "height": 162.6, "weight": 54.5 }, {
"gender": "female", "height": 152.4, "weight": 47.3 }, {
"gender": "female", "height": 170.2, "weight": 67.7 }, {
"gender": "female", "height": 165.1, "weight": 80.9 }, {
"gender": "female", "height": 172.7, "weight": 70.5 }, {
"gender": "female", "height": 165.1, "weight": 60.9 }, {
"gender": "female", "height": 170.2, "weight": 63.6 }, {
"gender": "female", "height": 170.2, "weight": 54.5 }, {
"gender": "female", "height": 170.2, "weight": 59.1 }, {
"gender": "female", "height": 161.3, "weight": 70.5 }, {
"gender": "female", "height": 167.6, "weight": 52.7 }, {
"gender": "female", "height": 167.6, "weight": 62.7 }, {
"gender": "female", "height": 165.1, "weight": 86.3 }, {
"gender": "female", "height": 162.6, "weight": 66.4 }, {
"gender": "female", "height": 152.4, "weight": 67.3 }, {
"gender": "female", "height": 168.9, "weight": 63 }, {
"gender": "female", "height": 170.2, "weight": 73.6 }, {
"gender": "female", "height": 175.2, "weight": 62.3 }, {
"gender": "female", "height": 175.2, "weight": 57.7 }, {
"gender": "female", "height": 160, "weight": 55.4 }, {
"gender": "female", "height": 165.1, "weight": 104.1 }, {
"gender": "female", "height": 174, "weight": 55.5 }, {
"gender": "female", "height": 170.2, "weight": 77.3 }, {
"gender": "female", "height": 160, "weight": 80.5 }, {
"gender": "female", "height": 167.6, "weight": 64.5 }, {
"gender": "female", "height": 167.6, "weight": 72.3 }, {
"gender": "female", "height": 167.6, "weight": 61.4 }, {
"gender": "female", "height": 154.9, "weight": 58.2 }, {
"gender": "female", "height": 162.6, "weight": 81.8 }, {
"gender": "female", "height": 175.3, "weight": 63.6 }, {
"gender": "female", "height": 171.4, "weight": 53.4 }, {
"gender": "female", "height": 157.5, "weight": 54.5 }, {
"gender": "female", "height": 165.1, "weight": 53.6 }, {
"gender": "female", "height": 160, "weight": 60 }, {
"gender": "female", "height": 174, "weight": 73.6 }, {
"gender": "female", "height": 162.6, "weight": 61.4 }, {
"gender": "female", "height": 174, "weight": 55.5 }, {
"gender": "female", "height": 162.6, "weight": 63.6 }, {
"gender": "female", "height": 161.3, "weight": 60.9 }, {
"gender": "female", "height": 156.2, "weight": 60 }, {
"gender": "female", "height": 149.9, "weight": 46.8 }, {
"gender": "female", "height": 169.5, "weight": 57.3 }, {
"gender": "female", "height": 160, "weight": 64.1 }, {
"gender": "female", "height": 175.3, "weight": 63.6 }, {
"gender": "female", "height": 169.5, "weight": 67.3 }, {
"gender": "female", "height": 160, "weight": 75.5 }, {
"gender": "female", "height": 172.7, "weight": 68.2 }, {
"gender": "female", "height": 162.6, "weight": 61.4 }, {
"gender": "female", "height": 157.5, "weight": 76.8 }, {
"gender": "female", "height": 176.5, "weight": 71.8 }, {
"gender": "female", "height": 164.4, "weight": 55.5 }, {
"gender": "female", "height": 160.7, "weight": 48.6 }, {
"gender": "female", "height": 174, "weight": 66.4 }, {
"gender": "female", "height": 163.8, "weight": 67.3 }, {
"gender": "male", "height": 174, "weight": 65.6 }, {
"gender": "male", "height": 175.3, "weight": 71.8 }, {
"gender": "male", "height": 193.5, "weight": 80.7 }, {
"gender": "male", "height": 186.5, "weight": 72.6 }, {
"gender": "male", "height": 187.2, "weight": 78.8 }, {
"gender": "male", "height": 181.5, "weight": 74.8 }, {
"gender": "male", "height": 184, "weight": 86.4 }, {
"gender": "male", "height": 184.5, "weight": 78.4 }, {
"gender": "male", "height": 175, "weight": 62 }, {
"gender": "male", "height": 184, "weight": 81.6 }, {
"gender": "male", "height": 180, "weight": 76.6 }, {
"gender": "male", "height": 177.8, "weight": 83.6 }, {
"gender": "male", "height": 192, "weight": 90 }, {
"gender": "male", "height": 176, "weight": 74.6 }, {
"gender": "male", "height": 174, "weight": 71 }, {
"gender": "male", "height": 184, "weight": 79.6 }, {
"gender": "male", "height": 192.7, "weight": 93.8 }, {
"gender": "male", "height": 171.5, "weight": 70 }, {
"gender": "male", "height": 173, "weight": 72.4 }, {
"gender": "male", "height": 176, "weight": 85.9 }, {
"gender": "male", "height": 176, "weight": 78.8 }, {
"gender": "male", "height": 180.5, "weight": 77.8 }, {
"gender": "male", "height": 172.7, "weight": 66.2 }, {
"gender": "male", "height": 176, "weight": 86.4 }, {
"gender": "male", "height": 173.5, "weight": 81.8 }, {
"gender": "male", "height": 178, "weight": 89.6 }, {
"gender": "male", "height": 180.3, "weight": 82.8 }, {
"gender": "male", "height": 180.3, "weight": 76.4 }, {
"gender": "male", "height": 164.5, "weight": 63.2 }, {
"gender": "male", "height": 173, "weight": 60.9 }, {
"gender": "male", "height": 183.5, "weight": 74.8 }, {
"gender": "male", "height": 175.5, "weight": 70 }, {
"gender": "male", "height": 188, "weight": 72.4 }, {
"gender": "male", "height": 189.2, "weight": 84.1 }, {
"gender": "male", "height": 172.8, "weight": 69.1 }, {
"gender": "male", "height": 170, "weight": 59.5 }, {
"gender": "male", "height": 182, "weight": 67.2 }, {
"gender": "male", "height": 170, "weight": 61.3 }, {
"gender": "male", "height": 177.8, "weight": 68.6 }, {
"gender": "male", "height": 184.2, "weight": 80.1 }, {
"gender": "male", "height": 186.7, "weight": 87.8 }, {
"gender": "male", "height": 171.4, "weight": 84.7 }, {
"gender": "male", "height": 172.7, "weight": 73.4 }, {
"gender": "male", "height": 175.3, "weight": 72.1 }, {
"gender": "male", "height": 180.3, "weight": 82.6 }, {
"gender": "male", "height": 182.9, "weight": 88.7 }, {
"gender": "male", "height": 188, "weight": 84.1 }, {
"gender": "male", "height": 177.2, "weight": 94.1 }, {
"gender": "male", "height": 172.1, "weight": 74.9 }, {
"gender": "male", "height": 167, "weight": 59.1 }, {
"gender": "male", "height": 169.5, "weight": 75.6 }, {
"gender": "male", "height": 174, "weight": 86.2 }, {
"gender": "male", "height": 172.7, "weight": 75.3 }, {
"gender": "male", "height": 182.2, "weight": 87.1 }, {
"gender": "male", "height": 164.1, "weight": 55.2 }, {
"gender": "male", "height": 163, "weight": 57 }, {
"gender": "male", "height": 171.5, "weight": 61.4 }, {
"gender": "male", "height": 184.2, "weight": 76.8 }, {
"gender": "male", "height": 174, "weight": 86.8 }, {
"gender": "male", "height": 174, "weight": 72.2 }, {
"gender": "male", "height": 177, "weight": 71.6 }, {
"gender": "male", "height": 186, "weight": 84.8 }, {
"gender": "male", "height": 167, "weight": 68.2 }, {
"gender": "male", "height": 171.8, "weight": 66.1 }, {
"gender": "male", "height": 182, "weight": 72 }, {
"gender": "male", "height": 167, "weight": 64.6 }, {
"gender": "male", "height": 177.8, "weight": 74.8 }, {
"gender": "male", "height": 164.5, "weight": 70 }, {
"gender": "male", "height": 192, "weight": 101.6 }, {
"gender": "male", "height": 175.5, "weight": 63.2 }, {
"gender": "male", "height": 171.2, "weight": 79.1 }, {
"gender": "male", "height": 181.6, "weight": 78.9 }, {
"gender": "male", "height": 167.4, "weight": 67.7 }, {
"gender": "male", "height": 181.1, "weight": 66 }, {
"gender": "male", "height": 177, "weight": 68.2 }, {
"gender": "male", "height": 174.5, "weight": 63.9 }, {
"gender": "male", "height": 177.5, "weight": 72 }, {
"gender": "male", "height": 170.5, "weight": 56.8 }, {
"gender": "male", "height": 182.4, "weight": 74.5 }, {
"gender": "male", "height": 197.1, "weight": 90.9 }, {
"gender": "male", "height": 180.1, "weight": 93 }, {
"gender": "male", "height": 175.5, "weight": 80.9 }, {
"gender": "male", "height": 180.6, "weight": 72.7 }, {
"gender": "male", "height": 184.4, "weight": 68 }, {
"gender": "male", "height": 175.5, "weight": 70.9 }, {
"gender": "male", "height": 180.6, "weight": 72.5 }, {
"gender": "male", "height": 177, "weight": 72.5 }, {
"gender": "male", "height": 177.1, "weight": 83.4 }, {
"gender": "male", "height": 181.6, "weight": 75.5 }, {
"gender": "male", "height": 176.5, "weight": 73 }, {
"gender": "male", "height": 175, "weight": 70.2 }, {
"gender": "male", "height": 174, "weight": 73.4 }, {
"gender": "male", "height": 165.1, "weight": 70.5 }, {
"gender": "male", "height": 177, "weight": 68.9 }, {
"gender": "male", "height": 192, "weight": 102.3 }, {
"gender": "male", "height": 176.5, "weight": 68.4 }, {
"gender": "male", "height": 169.4, "weight": 65.9 }, {
"gender": "male", "height": 182.1, "weight": 75.7 }, {
"gender": "male", "height": 179.8, "weight": 84.5 }, {
"gender": "male", "height": 175.3, "weight": 87.7 }, {
"gender": "male", "height": 184.9, "weight": 86.4 }, {
"gender": "male", "height": 177.3, "weight": 73.2 }, {
"gender": "male", "height": 167.4, "weight": 53.9 }, {
"gender": "male", "height": 178.1, "weight": 72 }, {
"gender": "male", "height": 168.9, "weight": 55.5 }, {
"gender": "male", "height": 157.2, "weight": 58.4 }, {
"gender": "male", "height": 180.3, "weight": 83.2 }, {
"gender": "male", "height": 170.2, "weight": 72.7 }, {
"gender": "male", "height": 177.8, "weight": 64.1 }, {
"gender": "male", "height": 172.7, "weight": 72.3 }, {
"gender": "male", "height": 165.1, "weight": 65 }, {
"gender": "male", "height": 186.7, "weight": 86.4 }, {
"gender": "male", "height": 165.1, "weight": 65 }, {
"gender": "male", "height": 174, "weight": 88.6 }, {
"gender": "male", "height": 175.3, "weight": 84.1 }, {
"gender": "male", "height": 185.4, "weight": 66.8 }, {
"gender": "male", "height": 177.8, "weight": 75.5 }, {
"gender": "male", "height": 180.3, "weight": 93.2 }, {
"gender": "male", "height": 180.3, "weight": 82.7 }, {
"gender": "male", "height": 177.8, "weight": 58 }, {
"gender": "male", "height": 177.8, "weight": 79.5 }, {
"gender": "male", "height": 177.8, "weight": 78.6 }, {
"gender": "male", "height": 177.8, "weight": 71.8 }, {
"gender": "male", "height": 177.8, "weight": 116.4 }, {
"gender": "male", "height": 163.8, "weight": 72.2 }, {
"gender": "male", "height": 188, "weight": 83.6 }, {
"gender": "male", "height": 198.1, "weight": 85.5 }, {
"gender": "male", "height": 175.3, "weight": 90.9 }, {
"gender": "male", "height": 166.4, "weight": 85.9 }, {
"gender": "male", "height": 190.5, "weight": 89.1 }, {
"gender": "male", "height": 166.4, "weight": 75 }, {
"gender": "male", "height": 177.8, "weight": 77.7 }, {
"gender": "male", "height": 179.7, "weight": 86.4 }, {
"gender": "male", "height": 172.7, "weight": 90.9 }, {
"gender": "male", "height": 190.5, "weight": 73.6 }, {
"gender": "male", "height": 185.4, "weight": 76.4 }, {
"gender": "male", "height": 168.9, "weight": 69.1 }, {
"gender": "male", "height": 167.6, "weight": 84.5 }, {
"gender": "male", "height": 175.3, "weight": 64.5 }, {
"gender": "male", "height": 170.2, "weight": 69.1 }, {
"gender": "male", "height": 190.5, "weight": 108.6 }, {
"gender": "male", "height": 177.8, "weight": 86.4 }, {
"gender": "male", "height": 190.5, "weight": 80.9 }, {
"gender": "male", "height": 177.8, "weight": 87.7 }, {
"gender": "male", "height": 184.2, "weight": 94.5 }, {
"gender": "male", "height": 176.5, "weight": 80.2 }, {
"gender": "male", "height": 177.8, "weight": 72 }, {
"gender": "male", "height": 180.3, "weight": 71.4 }, {
"gender": "male", "height": 171.4, "weight": 72.7 }, {
"gender": "male", "height": 172.7, "weight": 84.1 }, {
"gender": "male", "height": 172.7, "weight": 76.8 }, {
"gender": "male", "height": 177.8, "weight": 63.6 }, {
"gender": "male", "height": 177.8, "weight": 80.9 }, {
"gender": "male", "height": 182.9, "weight": 80.9 }, {
"gender": "male", "height": 170.2, "weight": 85.5 }, {
"gender": "male", "height": 167.6, "weight": 68.6 }, {
"gender": "male", "height": 175.3, "weight": 67.7 }, {
"gender": "male", "height": 165.1, "weight": 66.4 }, {
"gender": "male", "height": 185.4, "weight": 102.3 }, {
"gender": "male", "height": 181.6, "weight": 70.5 }, {
"gender": "male", "height": 172.7, "weight": 95.9 }, {
"gender": "male", "height": 190.5, "weight": 84.1 }, {
"gender": "male", "height": 179.1, "weight": 87.3 }, {
"gender": "male", "height": 175.3, "weight": 71.8 }, {
"gender": "male", "height": 170.2, "weight": 65.9 }, {
"gender": "male", "height": 193, "weight": 95.9 }, {
"gender": "male", "height": 171.4, "weight": 91.4 }, {
"gender": "male", "height": 177.8, "weight": 81.8 }, {
"gender": "male", "height": 177.8, "weight": 96.8 }, {
"gender": "male", "height": 167.6, "weight": 69.1 }, {
"gender": "male", "height": 167.6, "weight": 82.7 }, {
"gender": "male", "height": 180.3, "weight": 75.5 }, {
"gender": "male", "height": 182.9, "weight": 79.5 }, {
"gender": "male", "height": 176.5, "weight": 73.6 }, {
"gender": "male", "height": 186.7, "weight": 91.8 }, {
"gender": "male", "height": 188, "weight": 84.1 }, {
"gender": "male", "height": 188, "weight": 85.9 }, {
"gender": "male", "height": 177.8, "weight": 81.8 }, {
"gender": "male", "height": 174, "weight": 82.5 }, {
"gender": "male", "height": 177.8, "weight": 80.5 }, {
"gender": "male", "height": 171.4, "weight": 70 }, {
"gender": "male", "height": 185.4, "weight": 81.8 }, {
"gender": "male", "height": 185.4, "weight": 84.1 }, {
"gender": "male", "height": 188, "weight": 90.5 }, {
"gender": "male", "height": 188, "weight": 91.4 }, {
"gender": "male", "height": 182.9, "weight": 89.1 }, {
"gender": "male", "height": 176.5, "weight": 85 }, {
"gender": "male", "height": 175.3, "weight": 69.1 }, {
"gender": "male", "height": 175.3, "weight": 73.6 }, {
"gender": "male", "height": 188, "weight": 80.5 }, {
"gender": "male", "height": 188, "weight": 82.7 }, {
"gender": "male", "height": 175.3, "weight": 86.4 }, {
"gender": "male", "height": 170.5, "weight": 67.7 }, {
"gender": "male", "height": 179.1, "weight": 92.7 }, {
"gender": "male", "height": 177.8, "weight": 93.6 }, {
"gender": "male", "height": 175.3, "weight": 70.9 }, {
"gender": "male", "height": 182.9, "weight": 75 }, {
"gender": "male", "height": 170.8, "weight": 93.2 }, {
"gender": "male", "height": 188, "weight": 93.2 }, {
"gender": "male", "height": 180.3, "weight": 77.7 }, {
"gender": "male", "height": 177.8, "weight": 61.4 }, {
"gender": "male", "height": 185.4, "weight": 94.1 }, {
"gender": "male", "height": 168.9, "weight": 75 }, {
"gender": "male", "height": 185.4, "weight": 83.6 }, {
"gender": "male", "height": 180.3, "weight": 85.5 }, {
"gender": "male", "height": 174, "weight": 73.9 }, {
"gender": "male", "height": 167.6, "weight": 66.8 }, {
"gender": "male", "height": 182.9, "weight": 87.3 }, {
"gender": "male", "height": 160, "weight": 72.3 }, {
"gender": "male", "height": 180.3, "weight": 88.6 }, {
"gender": "male", "height": 167.6, "weight": 75.5 }, {
"gender": "male", "height": 186.7, "weight": 101.4 }, {
"gender": "male", "height": 175.3, "weight": 91.1 }, {
"gender": "male", "height": 175.3, "weight": 67.3 }, {
"gender": "male", "height": 175.9, "weight": 77.7 }, {
"gender": "male", "height": 175.3, "weight": 81.8 }, {
"gender": "male", "height": 179.1, "weight": 75.5 }, {
"gender": "male", "height": 181.6, "weight": 84.5 }, {
"gender": "male", "height": 177.8, "weight": 76.6 }, {
"gender": "male", "height": 182.9, "weight": 85 }, {
"gender": "male", "height": 177.8, "weight": 102.5 }, {
"gender": "male", "height": 184.2, "weight": 77.3 }, {
"gender": "male", "height": 179.1, "weight": 71.8 }, {
"gender": "male", "height": 176.5, "weight": 87.9 }, {
"gender": "male", "height": 188, "weight": 94.3 }, {
"gender": "male", "height": 174, "weight": 70.9 }, {
"gender": "male", "height": 167.6, "weight": 64.5 }, {
"gender": "male", "height": 170.2, "weight": 77.3 }, {
"gender": "male", "height": 167.6, "weight": 72.3 }, {
"gender": "male", "height": 188, "weight": 87.3 }, {
"gender": "male", "height": 174, "weight": 80 }, {
"gender": "male", "height": 176.5, "weight": 82.3 }, {
"gender": "male", "height": 180.3, "weight": 73.6 }, {
"gender": "male", "height": 167.6, "weight": 74.1 }, {
"gender": "male", "height": 188, "weight": 85.9 }, {
"gender": "male", "height": 180.3, "weight": 73.2 }, {
"gender": "male", "height": 167.6, "weight": 76.3 }, {
"gender": "male", "height": 183, "weight": 65.9 }, {
"gender": "male", "height": 183, "weight": 90.9 }, {
"gender": "male", "height": 179.1, "weight": 89.1 }, {
"gender": "male", "height": 170.2, "weight": 62.3 }, {
"gender": "male", "height": 177.8, "weight": 82.7 }, {
"gender": "male", "height": 179.1, "weight": 79.1 }, {
"gender": "male", "height": 190.5, "weight": 98.2 }, {
"gender": "male", "height": 177.8, "weight": 84.1 }, {
"gender": "male", "height": 180.3, "weight": 83.2 }, {
"gender": "male", "height": 180.3, "weight": 83.2 }]
var axisData = []
//这里的for循环实现了对上面数据的深拷贝
for( var i=0;i<data.length;i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
}
console.log(axisData)
var mCharts = echarts.init(document.querySelector("div"))
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter', // 指明图表的类型为散点图
data: axisData
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time, we have realized a basic scatter plot
Common Effects of Scatterplots
- Scatter size
Here we use the body mass index (BMI)
calculation formula: BMI = weight ÷ height ^ 2. (Weight unit: kilogram; height unit: meter.)
In addition, we use BMI=28 as the dividing line. If it is greater than 28, it is obese, and if it is less than 28, it is normal
symbolSize: function (arg) {
// 控制散点的大小
// console.log(arg)
var height = arg[0] / 100
var weight = arg[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
}
- scatter style
itemStyle: {
// 控制散点的样式
color: function (arg) {
// console.log(arg)
var height = arg.data[0] / 100
var weight = arg.data[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
}
- Ripple animation effect
type: 'effectScatter', // 指明图表为带涟漪动画的散点图
showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis
rippleEffect: {
scale: 10 // 涟漪动画时, 散点的缩放比例
}
full code
<!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 = [
// 这个数据我就不写了
]
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
}
console.log(axisData)
var mCharts = echarts.init(document.querySelector("div"))
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
// type: 'scatter',
type: 'effectScatter', // 指明图表为带涟漪动画的散点图
showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis
rippleEffect: {
scale: 10 // 涟漪动画时, 散点的缩放比例
},
data: axisData,
// symbolSize: 30
symbolSize: function (arg) {
// 控制散点的大小
// console.log(arg)
var height = arg[0] / 100
var weight = arg[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: {
// 控制散点的样式
color: function (arg) {
// console.log(arg)
var height = arg.data[0] / 100
var weight = arg.data[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
final effect
