Apache Echarts常用图表之散点图

文章目录

Echarts常用图表
- 散点图
- - 1. 散点图的实现步骤
  - 2. 散点图的常见效果

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": "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( 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>

2. 散点图的常见效果

气泡图效果
要能够达到气泡图的效果，其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
- symbolSize控制散点的大小
- itemStyle.color控制散点的颜色
  这两个配置项都支持固定值得写法，也支持回调函数的写法

固定值的写法如下：

var optiono = {
       
	series:[
		{
       
			type: 'scatter',
			data: axisData,
			symbolSise: 25,
			itemStyle: {
       
				color: 'green'
			}
		}
	]
}

回调函数的写法如下：

var option = {
       
	series:[
		{
       
			type: 'scatter',
			data: axisData,
			symbolSize: function(arg){
       
				var weight = arg[1]
				var height = arg[0] / 100
				//BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识
				// BMI: 体重/ 身高*身高 kg m
				var bmi = weight / (height * height)
				if(bmi > 28)
					return 20
				return 5
			},
			itemStyle:{
       
				color: function(arg){
       
					var weight = arg.data[1]
					var height = arg.data[0] / 100
					var bmi = weight / (height * height)
					if(bmi > 28)
						return 'red'
					return 'green'
				}
			}
		}
	]
}

涟漪动画效果

type:effectScatter
将type的值从scatter设置为effectScatter就能够产生涟漪动画的效果

rippleEffect
rippleEffect可以配置涟漪动画的大小

var option = {
         
	series: [
		{
         
			type: 'effectScatter',
			rippleEffect:{
         
				scale:3
			}
		}
	]
}

showEffection
showEffection可以控制涟漪动画在什么时候产生，它的可选值有两个，render和emphasisrender代表界面渲染完成就开始涟漪动画
emphasis代表鼠标移过某个散点的时候，该散点开始涟漪动画
```
var option = {
       
	series: [
		{
       
			type: 'effectScatter',
			showEffectOn: 'emphasis',
			rippleEffect:{
       
				scale:3
			}
		}
	]
}
```

声明：学习内容来自黑马程序员，为学习笔记。仅供学习交流。

你可能感兴趣的:(数据可视化_Echarts,js,数据可视化,echarts)

【Python】一文详细介绍 py格式文件高斯小哥 Python基础【高质量合集】python 新手入门学习
【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++）华为OD题库华为od 链表 java
须知哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L，请编写程序输出L中间结点保存的数据。如果有两个中间结点，则输出第二个中间结点保存的数据。例如：给定L为1→7→5，则输出应该为7；给定L为1→2→3→4，则输出应该为3；输入描述每个输入包含1个测试用例。每个测试用例：第一行给出链表首结点的地址、结点总
v-for 实例琪33
v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
用XMLHttpRequest发送和接收JSON数据潭池先生 json XMLHttpRequest 前端
百度的AI回答了一个案例：varxhr=newXMLHttpRequest();varurl="your_endpoint_url";//替换为你的API端点vardata=JSON.stringify({key1:"value1",key2:"value2"});xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","appl
npm 搭建 Vite 项目渺小的虫子 viter 前端 javascript 开发语言
兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
webpack.prod.js（webpack生产环境配置文件）门板_ webpack javascript 前端
生产环境：只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL
Python dict字符串转json对象，小数精度丢失问题朝如青丝暮成雪 json python
一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
java实体中返回前端的double类型四舍五入（格式化）婲落ヽ紅顏誶 java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
react native 总结一切顺势而行 react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
python项目练习——7.网站访问日志分析器 F—— python项目练习 python 信息可视化数据分析数据挖掘开发语言学习
项目功能分析：这个项目可以读取网站的访问日志文件，统计访问量、独立访客数、访问来源等信息，并以图表或表格的形式展示出来。这个项目涉及到文件操作、数据处理、数据可视化等方面的技术。示例代码：importrefromcollectionsimportCounterimportmatplotlib.pyplotaspltdefparse_log_file(log_file):#读取日志文件内容witho
JS判断数据类型风落不归处 Javascript javascript 前端
一、typeoftypeof可以检测基本数据类型，但是碰到引用数据类型返回的都是object。typeof通常用来判断基本数据类型，但是用typeof来判断null和引用类型的实例返回的结果都是"object"lets="Nicholas";letb=true;leti=22;letu;letn=null;leto=newObject();functionFn(){}console.log(typ
【Python】成功解决ModuleNotFoundError: No module named ‘torchinfo‘ 高斯小哥 BUG解决方案合集 python pytorch 新手入门学习 debug
【Python】成功解决ModuleNotFoundError:Nomodulenamed‘torchinfo’个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文
JSON与AJAX：网页交互的利器入冉心 json ajax 前端
在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
【前端学习——js篇】7.函数缓存笔下无竹墨下有鱼前端学习前端学习 javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
js 操作属性 if switch 你想Ta吗
条件语句：条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句。最基本的条件语句：if...else、switch...caseJS操作属性：DOM是为了操作文档（网页）的API，document是它的一个对象BOM是为了操作浏览器的API，window是它的一个对象常用BOM对象还有：alert、定时器等。JS可控换肤：通过按钮的点击来更换皮肤。但是要连接外部样式表，通过点击事件来更换不同
Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题 Java 服务器运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
vue 在style标签中引入js变量控制样式古迪红尘 VUE vue.js javascript 前端
1.基本的绑定样式示例data(){return{colorData:'blue',}}详细用法可参考下面的博客：https://www.jianshu.com/p/2b82ee1e6199
3.Python数据分析—数据分析入门知识图谱&索引(知识体系中篇) 以山河作礼。 Python数据分析项目数据分析知识图谱数据挖掘 python 开发语言
3.Python数据分析—数据分析入门知识图谱&索引-知识体系中篇一·个人简介二·数据获取和处理2.1数据来源：2.2数据清洗：2.2.1缺失值处理：2.2.2异常值处理：2.3数据转换：2.3.1数据类型转换：2.3.2数据编码：2.4数据合并与重塑：2.4.1数据合并：2.4.2数据拼接：2.4.3数据重塑：三·数据探索与分析3.1描述性统计分析3.2数据可视化原则和技巧3.3探索性数据分析（
Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js 前端 javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
python在ui自动化中的一些常见用法 loveyena
http://cn.python-requests.org/zh_CN/latest可以查看requests库的说明，pprint(res.json(),width=30)可以对请求的返回值按照json格式化形式进行打印。常见的content-type有application/x-www-form-urlencoded、application/json、application/xml。自动化测试操
2022-04-19 Apbenz
12块早餐的来组成，今天早上脑子里想着，不要去吃早餐了，忍着忍着发现还有30分钟的时间才算迟到，还是去吃一点吧，来到摊前就点了一份六块钱的粉，老板问要不要辣，加一点，结果这辣椒很理想，所以加二块的水，吃着不爽，又加了一个鸡蛋，鸡蛋很好吃，又加了一个。6+2+2+2这就是十二块的早餐组成。fastadmintickwritingtickkoreastudythreejsstudy
npm 常用命令详解马卫斌前端工程师 npm
npm（NodePackageManager）是Node.js的包管理器，它允许用户方便地安装、共享和管理Node.js项目中的依赖。以下是一些npm常用命令的详解：1.查看npm版本npm-v这个命令用于查看本地已安装的npm版本。2.初始化项目npminit运行这个命令会引导你创建一个package.json文件，该文件包含了项目的元数据，如名称、版本、描述、作者等信息以及项目的依赖配置。若要
extjs 中store 关于baseParams的一个bug hwssz extjs action function null
困扰于roload参数不变的问题，很幸运在网上找到了答案，贴在下面：http://www.javaeye.com/topic/713163ExtJs中，我们使用GirdPanel的时候往往需要给后台传递查询条件。一般是通过修改Store的baseParams。Js代码varstore=GirdPanel.getStore();store.baseParams={查询条件}store.reload(
NPM镜像常用命令和简单使用开心很重要 npm 前端 node.js
一、镜像源链接切换全局切换镜像源：npmconfigsetregistryhttp://registry.npm.taobao.org查看镜像源使用状态：npmgetregistry全局切换官方镜像源：npmconfigsetregistryhttp://www.npmjs.org二、使用nrm查看、切换镜像源下载nrm：npminstall-gnrm查看可切换的镜像源：nrmls(*表示正在使用
Vue 发送Ajax请求多种方式 Red丶哞前端 vue.js ajax 前端
1.发送ajax请求的方式方案一：jq的ajax（在vue中不推荐同时使用）方案二：js原始官方fetch方法方案三：axios第三方2.方案一后端视图函数fromrest_framework.viewsetsimportViewSetfromrest_framework.responseimportResponseclassIndex(ViewSet):defindex(self,request
pp.task.task_del 任务-删除小二郎_Ejun
URLpp.task.task_del请求方式POST请求参数参数名类型必填说明token[string]是无task_id[string]是任务id返回结果参数说明参数名类型必含说明status[int]是返回数据状态1:成功，0:失败msg[string]是返回提示信息data[json]是结果对象包括下述字段：{"status":1,"data":"","msg":"成功"}
vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战 vue.js 前端 javascript
一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
插入表主键冲突做更新 a-john
有以下场景：用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。问题：如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。解决： mysql中提供了一个sql语
Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello" 2.引用系统资源。格式：@android:type/name android:textColor="@android:color/opaque_red"
数据结构的基本介绍天子之骄数据结构散列表树、图线性结构价格标签
数据结构的基本介绍数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。经典的数据结构大致如下：一：线性数据结构 (1)：列表 a
通过二维码开放平台的API快速生成二维码一炮送你回车库 api
现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。 html代码如下:(二维码将生成在这div下) ? 1 &nbs
ImageIO读取一张图片改变大小 3213213333332132 java IO image BufferedImage
package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
myeclipse集成svn（一针见血） 7454103 eclipse SVN MyEclipse
&n
装箱与拆箱----autoboxing和unboxing darkranger J2SE
4.2　自动装箱和拆箱基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
ajax传统的方式制作ajax aijuans Ajax
//这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
只用jre的eclipse是怎么编译java源文件的？ avords java eclipse jdk tomcat
eclipse只需要jre就可以运行开发java程序了，也能自动编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
前端模块化 bee1314 模块化
背景：前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。 JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
处理百万级以上的数据处理 bijian1013 oracle sql 数据库大数据查询
一.处理百万级以上的数据提高查询速度的方法： 1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。 2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
mac 卸载 java 1.7 或更高版本征客丶 java OS
卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中第二部，Spark Streaming读取Kafka中的数据，进行实时分析本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
Erlang vs TNSDL bookjovi erlang
TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。相关新闻：（1）IT行业成五大疾病重灾区：过劳死平均37.9岁
读《研磨设计模式》-代码笔记-原型模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
配置管理---svn工具之权限配置 chenyu19891124 SVN
今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos component webapps 在conf里面的auth里赋予的权限配置为 [groups]
浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
浅谈程序员的数学修养
批量执行 bulk collect与forall用法 daizj oracle sql bulk collect forall
BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。有关FORALL语句的用法请参考：批量SQL之 F
Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
Yii CModel中rules验证规格 dcj3sjt126com rules yii validate
Yii cValidator主要用法分析： yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError
基于vagrant的redis主从实验 dcj3sjt126com vagrant
平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从实现思路制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box 制作sentos6.5+redis的box mkdir vagrant_redis cd vagrant_
Memcached(二)、Centos安装Memcached服务器 frank1234 centos memcached
一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]：建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
Remove Duplicates from Sorted List hcx2013 remove
Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
浅谈enum与单例设计模式 247687009 java 单例
在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构造器，导出静态成员变量，以便调用者访问。第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
使用switch条件语句需要注意的几点 openwrt c break switch
1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 spring mybatis JUnit
Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有：单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。第二个问题的具体实例是：
Java 定时任务总结一 tuoni java spring timer quartz timertask
Java定时任务总结一.从技术上分类大概分为以下三种方式： 1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务; 说明： java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank 相似度计算文本相似度词袋模型余弦相似度
本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下： 1、注册多个账号（一般10个以上）。 2、从多个账号中选择一个账号，发表1-2篇博文