iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue导入Echarts实现散点图
  • 473

0
分享到

Vue导入Echarts实现散点图

Vue散点图Vue Echarts散点图 2022-12-15 18:12:38 473人浏览 安东尼
摘要

目录前言散点图特点散点图实现步骤散点图常见效果气泡效果涟漪动画效果完整代码前言 本篇来学习散点图的实现 散点图特点 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如：看得出身

前言

本篇来学习散点图的实现

散点图特点

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

散点图实现步骤

  • 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散点图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue导入Echarts实现散点图

本文链接: https://www.lsjlt.com/news/174984.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue导入Echarts实现散点图
    目录前言散点图特点散点图实现步骤散点图常见效果气泡效果涟漪动画效果完整代码前言 本篇来学习散点图的实现 散点图特点 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如：看得出身...
    99+
    2022-12-15
    Vue散点图 Vue Echarts散点图
  • Vue导入Echarts实现折线散点图
    本文实例为大家分享了Vue导入Echarts实现折线散点图的具体代码，供大家参考，具体内容如下 效果图： 一、vue-cli中导入echarts 通过命令：npm install ...
    99+
    2024-04-02
  • Vue导入Echarts如何实现折线散点图
    这篇文章主要介绍了Vue导入Echarts如何实现折线散点图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图：一、vue-cli中导入echarts通过命令：npm in...
    99+
    2023-06-25
  • Vue导入Echarts实现折线图
    目录前言折线图特点折线图实现步骤折线图常见效果标记线条控制填充风格紧挨边缘缩放-脱离0值比例堆叠图前言 本篇来学习下折线图的实现 折线图特点 折线图更多的使用来呈现数据随时间的变化趋...
    99+
    2022-12-15
    Vue Echarts实现折线图 Vue折线图 Vue Echarts
  • Vue使用echarts散点图在区域内标点
    Vue 使用 echarts 散点图在区域内标点，供大家参考，具体内容如下 首先是因为项目，需要在一个区域内根据坐标标出在标准大小的玻璃中标出检测出含有缺陷的坐标点。假如说，一块玻璃...
    99+
    2024-04-02
  • vue如何导入echarts地图
    这篇文章主要为大家展示了“vue如何导入echarts地图”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何导入echarts地图”这篇文章吧。导入方法：1、使用“npm install ...
    99+
    2023-06-25
  • Vue怎么使用echarts散点图在区域内标点
    今天小编给大家分享一下Vue怎么使用echarts散点图在区域内标点的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先是因为...
    99+
    2023-06-29
  • Echarts通过dataset数据集实现创建单轴散点图
    目录dataset创建单轴散点图配置项效果图dataset创建单轴散点图 由于使用echarts作图时，我很喜欢用dataset作为数据源，但是官方案例中，又没有给出相关示例，于是，...
    99+
    2023-02-21
    Echarts绘制单轴散点图 Echarts单轴散点图 Echarts散点图
  • Echarts怎么通过dataset数据集实现创建单轴散点图
    本篇内容主要讲解“Echarts怎么通过dataset数据集实现创建单轴散点图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Echarts怎么通过dataset数据集实现创建单轴散点图”吧!da...
    99+
    2023-07-05
  • Pythonmatplotlib实现散点图的绘制
    目录一、整理数据二、修改点的样式三、呈现半透明的状态四、点呈现多彩的颜色五、让点的大小不一六、侧边呈现颜色卡七、改变集中性一、整理数据 import pandas as pd cn...
    99+
    2024-04-02
  • vue+echarts实现3D柱形图
    本文实例为大家分享了vue+echarts实现3D柱形图的具体代码，供大家参考，具体内容如下 1、安装echarts npm install echarts --save 2、引入...
    99+
    2024-04-02
  • vue+echarts实现中国省份地图点击联动
    引入echarts npm下载 npm install echarts cdn引入 <script type="text/javascript" src="https...
    99+
    2024-04-02
  • vue使用echarts实现折线图
    本文实例为大家分享了vue使用echarts实现折线图的具体代码，供大家参考，具体内容如下 效果图： 代码： <template>             <di...
    99+
    2024-04-02
  • Vue+Echarts实现简单折线图
    本文实例为大家分享了Vue+Echarts实现简单折线图的具体代码，供大家参考，具体内容如下 Vue+Echarts实现一个折线图，打开vue的项目: 1、在项目里面安装echart...
    99+
    2024-04-02
  • vue+echarts实现多条折线图
    本文实例为大家分享了vue+echarts实现多条折线图的具体代码，供大家参考，具体内容如下 数据未使用json格式，直接写在页面 大致效果 页面代码： <template&...
    99+
    2024-04-02
  • vue echarts实现横向柱状图
    本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下 实现效果： 代码： <template> <div clas...
    99+
    2024-04-02
  • vue+echarts实现堆叠柱状图
    本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码，供大家参考，具体内容如下 echarts-子组件 <template> <div cla...
    99+
    2024-04-02
  • Vue+Echarts实现柱状折线图
    本文实例为大家分享了Vue+Echarts实现柱状折线图的具体代码，供大家参考，具体内容如下 vue处理json数据渲染柱状折线图 HTML： <div id="lineCha...
    99+
    2024-04-02
  • Python+Pyecharts实现散点图的绘制
    目录第1关：Scatter：散点图（一）编程要求代码测试说明第2关：Scatter：散点图（二）编程要求代码测试说明第3关：Scatter：散点图（三）编程要求代码测试说明第1关：S...
    99+
    2024-04-02
  • python 离散点图画法的实现
    目录基础代码改进再次改进：又次改进：改进：----加准确率基础代码 pred_y = test_output.data.numpy() pred_y = pred_y.flatten...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作