Scatter is a graph of scattered points. Because the position of a point is determined by its x and y values, it is also called an XY scatter plot. Scatterplot, also known as scatterplot distribution, is a graph in which one variable is abscissa and another variable is ordinate, and the distribution form of scatterplot (coordinate point) is used to reflect the statistical relationship of variables. Therefore, at least two values should be provided for each scatterplot. The feature of scatter diagram is that it can intuitively show the overall relationship trend between influencing factors and predicted objects, and it has the advantage that it can reflect the changing form of the relationship between variables in an intuitive and eye-catching graphical way, so as to decide which mathematical expression method to simulate the relationship between variables. The core idea of scatter graph is research, which is suitable for discovering the relationship and law between variables, but not for the scene of clear expression of information. By default, scatter plots show data points as dots. If you have multiple sequences in a scatter plot, consider changing the mark of each point to a square, triangle, diamond, or other shape.

By observing the distribution of data points on a scatter plot, correlations between variables can be inferred. If there is no correlation between variables, the scatterplot will show discrete points with random distribution. If there is some kind of correlation, then most of the data points will be relatively dense and show some kind of trend. The correlation of data is mainly divided into positive correlation (the value of two variables increases at the same time), negative correlation (the value of one variable increases, the value of the other variable decreases), non-correlation, linear correlation, exponential correlation and U-shaped correlation, which are shown in the rough distribution on the scatter chart. Those points that are far from the cluster of points are called outliers or outliers.

  1. Draw a basic scatter diagram

The basic scatter plot can be used to observe the relationship between two indicators. The relationship between height and weight was observed using height and weight data of men and women, as shown in the figure. It can be seen from the figure that there is a positive correlation between height and weight, that is, the higher the height, the higher the weight. In addition, it can be found that the height is mainly between 1.62 meters and 1.72 meters.

The legend source code is as follows:

<html> <head> <meta charset = "utf-8"> <! <script SRC = "js/echarts.js"></script> </head> <body> <! <div id = "main" style = "width: 800px; height: 600px"></div> <script type = "text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {title: {x: 222, text: 'male and female height and weight distribution'}, color: ['blue', 'green'], xAxis: {scale: True, name: 'height (cm)', color: 'red'}, yAxis: {scale: true, name:' weight (kg)'}, Series: [{type: 'scatter', symbolSize: 20, data: [[167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0]],}]}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code
  1. Draw a scatter diagram of the two sequences

Instead of drawing a basic scatter plot example, when two sequences are used to represent the height and weight of male and female respectively, the results are shown in the figure below. As can be seen from the figure, two different gray scales represent the data of different sequences of male and female respectively, and mark the maximum, minimum and average weight of male and female in the data respectively.

The source code for this legend is as follows:

<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 800px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {color: ['red', 'green'], title: {x: 33, text: 'male and female height and weight distribution ', subtext: 'Sample survey from :FLQ 2020'}, legend: {data: [' female ',' male ']}, // Configure toolbox: {// Configure toolbox components x: 600, show: true, feature: {mark: { show: true }, dataZoom: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value} cm' } }], yAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value} kg' } }], series: Name: 'Female ', type:' Scatter ', symbolSize: 8, data: [[161.2, 51.6], [167.5, 59], [159.5, 49.2], [157, 63], [155.8, 53.6], [173.0, 59], [159.1, 47.6], [156, 69.8], [166.2, 66.8], [160.2, 75.2], [167.6, 61], [160.7, 69.1], [163.2, 55.9], [152, 46.5], [157.5, 54.3], [156, 52.7], [160, 74.3]. [163, 62], [165.7, 73.1], [161, 80]], markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", name: 'minimum'}],}, markLine: {data: [{type: 'business' name: 'average'}]}}, {/ / set the male data name: 'male', type: 'scatter', symbolSize: 8, data: 174, [[65.6], [175.3, 71.8], [163.5, 80], [186.5, 72.6], [187.2, 78.8], [167, 64.6], [177.8, 74.8], [164.5, 70], [182, 101.6], [165.5, 63.2], [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66], [177, 68.2], [161.5, 74.8], [164.0, 86.4], [164.5, 78.4], [175, 62], [164, 81.6]], markPoint: {data: [{type: 'Max' name: 'maximum}, {type: "min", name: 'minimum'}],}, markLine: {data: [{type: 'business' name: 'average'}]}}}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code
  1. Draw scatter diagram with ripple effect

In ECharts, you can set an ECharts scatter (bubble) diagram with ripple effects animation by using the effectScatter parameter. Animation effects using height and weight data of men and women can visually highlight certain data that you want to highlight, as shown in the figure. As can be seen from the figure, ripple effects are set for two points [153.4, 42] and [172.7, 87.2] respectively. The location, size and drawing mode of ripple effects can be set according to their own needs.

The legend source code is as follows:

<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 800px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Legend: {data: [' general ', 'extreme ']}, xAxis: {scale: true}, yAxis: {scale: true}, series: [{type: 'effectScatter', // Sets scatter graph with ripple effect // Sets whether the graph does not respond and trigger mouse events, default false, that is, respond and trigger mouse events silent: LegendHoverLink: legendHoverLink: legendHoverLink: legendHoverLink: legendHoverLink: legendHoverLink: legendHoverLink False, // Set whether to enable the hover hover animation: false, // set whether to enable the mouse hover prompt animation effectType: 'ripple', // Sets the type of ripple effect, currently only supports ripple effect 'ripple' // Sets when to display the effect, 'render' is done to display the effect //' pin 'highlight (hover) showEffectOn: 'render', rippleEffect: {// set the rippleEffect period: 2, // set the animation time, the smaller the number, the faster the animation scale: 5.5, // set the maximum scale of the ripples in the animation brushType: 'fill', // Sets the pattern of the ripples, with the option of 'stroke' and 'fill'}, symbolSize: 20, // Sets the size of the special scatter symbol color: 'green', data: [/ / set the special effects of the scatterplot data value [172.7, 87.2], [153.4, 42]]}, {name: 'general value, type:' scatter 'color:' # FFCCCC 'data: [[167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [152.0, 45.8], [163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [166.4, 56.6], [171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [168.5, 65.2], [181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0], [163.0, 72.0], [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [164.3, 59.8], [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [178.0, 70.6], [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [172.7, 87.2], [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [153.4, 42], [168.3, 54.8], [180.3, 60.7], [165.5, [165.0, 62.0], [164.5, 60.3]],}]}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code