Vue导入Echarts实现散点图
作者:爱学习de测试小白
这篇文章主要为大家详细介绍了Vue导入Echarts实现散点图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
前言
本篇来学习散点图的实现
散点图特点
- 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如:看得出身高和体重是正相关, 身高越高, 体重越重
- 散点图也经常用在地图的标注上
散点图实现步骤
- ECharts 最基本的代码结构
- 准备 x 轴和 y 轴的数据准备 x 轴和 y 轴的数据
- 准备配置项
<!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> <!-- cdn方式 引入echarts.js文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/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>
效果
散点图常见效果
气泡效果
var option = { series: [ { type: 'scatter', data: axisData, symbolSize: 25, itemStyle: { color: 'green', } } ] }
涟漪动画效果
type:effectScatter:能够产生涟漪动画的效果
rippleEffect :可以配置涟漪动画的大小
showEffectOn:以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis
- render 代表界面渲染完成就开始涟漪动画
- emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画
var option = { series: [ { type: 'effectScatter', // 产生涟漪动画的效果 showEffectOn: 'emphasis', // 鼠标移过某个散点的时候, 该散点开始涟漪动;可选其他值 rende rippleEffect:{ scale:3 // 涟漪动画的大小 } } ] }
完整代码
<!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> <!-- cdn方式 引入echarts.js文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/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 = { // 4. 调整配置项, 脱离0值比例 xAxis: { type: 'value', scale: true }, yAxis: { type: 'value', scale: true }, series: [ { // type: 'scatter', // 指明图表的类型为散点图 type: 'effectScatter', // 涟漪动画的效果 data: axisData, // symbolSize: 15, // 控制散点大小 // itemStyle: { // 散点颜色 // color: 'green' // } showEffectOn: 'emphasis', // 鼠标移过某个散点的时候, 该散点开始涟漪动;可选其他值 render rippleEffect: { scale: 3 }, 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' } } } ] } mCharts.setOption(option) </script> </body> </html>
到此这篇关于Vue导入Echarts实现散点图的文章就介绍到这了,更多相关Vue散点图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!