29-Vue之ECharts-散点图

Posted 爱学习de测试小白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了29-Vue之ECharts-散点图相关的知识，希望对你有一定的参考价值。

ECharts-散点图

前言

  • 本篇来学习散点图的实现

散点图特点

  • 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如：看得出身高和体重是正相关, 身
    高越高, 体重越重
  • 散点图也经常用在地图的标注上

散点图实现步骤

  1. ECharts 最基本的代码结构
  2. 准备 x 轴和 y 轴的数据准备 x 轴和 y 轴的数据
  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"以上是关于29-Vue之ECharts-散点图的主要内容，如果未能解决你的问题，请参考以下文章
 

 Pyecharts绘制全球流向图


 echarts散点图


 echarts 地图散点图卡顿问题


 echarts图表——漏斗图&散点图


 Matplotlib基础图形之散点图


 echart 散点图 怎么确认每个像素点有多少数据点集合？