正文

29-vue之echarts-散点图(代码片段)

爱学习de测试小白  爱学习de测试小白  2022-12-16  277
关键词：
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"数据可视化----echarts---散点图(代码片段)
数据可视化----ECharts—散点图（五）百度百科上散点图的定义散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点...  查看详情  
                
echarts的散点图和中国地图配合使用(代码片段)
热力图，我觉得也是叫散点图，我做的是分散在地图上面的点，主要效果如下：图是在晚上抄的：主要配置有几个:第一个需要配置两个地图属性，即两个series:series:[//地图,可以是数组，多个label://label就是你地图上展示的名字，...  查看详情  
                
echarts散点图
参考技术A散点图可以帮助我们推断出变量间的相关性，比如身高和体重的关系散点的大小不同symbolSize散点的颜色不同itemStyle.color在series下的type设置为effectScatter  查看详情  
                
数字的可视化：python画图之散点图sactter函数详解(代码片段)
...资料,最后总结如下：1、scatter函数原型  2、其中散点的形状参数marker如下：  3、其中颜色参数c如下:  4、基本的使用方法如下：#导入必要的模块importnumpyasnpimportmatplotlib.pyplotasplt#产  查看详情  
                
Matplotlib 散点图传奇创造之谜
】Matplotlib散点图传奇创造之谜【英文标题】：MatplotlibScatterPlotLegendCreationMystery【发布时间】：2020-09-1607:44:06【问题描述】：我有以下代码片段（c、s、x、y的值是模型，但真正的列表遵循相同的格式，只是更大。只使用了两种颜...  查看详情  
                
r散点图散点图r.(代码片段)
  查看详情  
                
echart散点图怎么确认每个像素点有多少数据点集合？
...的点数量？参考技术A编程狮，随时随地学编程返回首页ECharts教程ECharts如何实现散点图在ECharts系列中通过使用series[i]-scatter来实现散点（气泡）图。直角坐标系上的散点图可以用来展现数据的x，y之间的关系，如果数据项有多个...  查看详情  
                
echarts地图散点图卡顿问题
参考技术A如图，地图数据量大时显示切换等操作出现卡顿问题实例销毁之前调用清空画布clear()  查看详情  
                
echarts图表——漏斗图&散点图
参考技术A漏斗图是一个简单的散点图，反映研究在一定样本量或精确性下单个研究的干预效应估计值。漏斗图最常见的是在横轴为各研究效应估计值，纵轴为研究样本量。漏斗图结合相关的统计检验，在系统评价中检查研究是...  查看详情  
                
html散点图(代码片段)
  查看详情  
                
html散点图(代码片段)
  查看详情  
                
r绘制散点图以及带圈定的散点图（scatterplotwithencircling）(代码片段)
R绘制散点图以及带圈定的散点图（ScatterplotWithEncircling） 数据分析最常用的图无疑是散点图。每当你想了解两个变量之间关系的性质时，第一选择总是散点图。散点图（scatterplot）可以使用geom_point()绘制。此外，默认情况下...  查看详情  
                
python散点图演示(代码片段)
  查看详情  
                
[python系列-21]：python之人工智能-基本工具-5-绘制二元函数的三维曲线或散点图(代码片段)
作者主页(文火冰糖的硅基工坊)：https://blog.csdn.net/HiWangWenB本文网址：https://blog.csdn.net/HiWangWenBing/article/details/119859463目录第1章 matplotlib原理与绘图的基本方式1.1Matplotlib构图的两种方式：第2章构建三维、曲线图形的基...  查看详情  
                
用echartsjs实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容
本人研究echarts已经有一段时间了，今天就分享几个关于echarts的小技巧。虽然看起来简单，但做起来却很繁琐，不过实用性倒是很好。在一个大的页面中，左边为table表格，右边为echarts的散点图。需求一，实现echarts中所有的散点...  查看详情  
                
如何在echarts散点图，对每一个点加一个闪烁的动画效果
参考技术Atcosttheequivalentof  查看详情  
                
r语言使用plotly绘制3d散点图实战(代码片段)
R语言使用plotly绘制3D散点图实战目录R语言使用plotly绘制3D散点图实战#仿真数据#plotly绘制3D散点图#仿真数据set.seed(41  查看详情  
                
sasgtl散点图(代码片段)
libnamea‘.data‘;datascatter;seta.scatter;run;proctemplate;definestatgraphscatter;dynamichtwt;mvarstudy;begingraph/border=falsedesignwidth=wtdesignheight=ht;layoutoverlay/cycleattrs=truexaxisopts=(lab  查看详情