Echarts

您所在的位置:网站首页 怎么画身高 Echarts

Echarts

2024-02-16 23:55| 来源: 网络整理| 查看: 265

散点图(Scatter)是由一些散乱的点组成的图表。因为其中点位置是由其x值和y值确定的,所以也称为XY散点图。 散点图又称散点分布图,是以一个变量为横坐标,另一变量为纵坐标,利用散点(坐标点)的分布形态反映变量统计关系的一种图形,因此,需要为每个散点至少提供两个数值。 散点图的特点是能直观表现出影响因素和预测对象之间的总体关系趋势,优点是能通过直观醒目的图形方式反映变量间关系的变化形态,以便决定用何种数学表达方式来模拟变量之间的关系。 散点图的核心思想是研究,适用于发现变量间的关系与规律,不适用于清晰表达信息的场景。在默认情况下,散点图以圆点显示数据点。如果在散点图中有多个序列,那么可以考虑每个点的标记更改为方形、三角形、菱形或其他形状。

通过观察散点图上数据点的分布情况,可以推断出变量间的相关性。如果变量之间不存在相互关系,散点图上就会表现为随机分布的离散的点;如果存在某种相关性,那么大部分的数据点就会相对密集并以某种趋势呈现。 数据的相关关系主要分为正相关(两个变量值同时增长)、负相关(一个变量值增加,另一个变量值下降)、不相关、线性相关、指数相关、U形相关等,表现在散点图上的大致分布如图所示。那些离点集群较远的点我们称其为离群点或者异常点。

image.png

绘制基本散点图

基本散点图可用于观察两个指标的关系。利用男性和女性身高、体重数据观察身高和体重两者间的关系,如图所示。 由图可知,身高与体重基本上呈现出一种正相关的关系,即身高越高,体重也相应增加。另外,还可以发现,身高主要集中在1.62米和1.72米之间。

image.png

该图例源代码如下:

//基于准备好的DOM,初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { title: { x: 222, text: '男性和女性身高、体重分布' }, color: ['blue', 'green'], xAxis: { scale: true, name: '身高(cm)', color: 'red' }, yAxis: { scale: true, name: '体重(kg)' }, series: [{ type: 'scatter', symbolSize: 20, data: [ [167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0],], }], }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); 绘制两个序列的散点图

与绘制基本散点图实例不同的是,当利用两个序列分别代表男性和女性的身高、体重时,得到的结果如图所示。 由图可知,两种不同灰度分别表示了男性和女性不同序列的数据,并分别标记出了数据中男性和女性体重的最大值、最小值和平均值。

image.png

该图例的源代码如下:

//基于准备好的DOM,初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 var option = { color: ['red', 'green'], title: { x: 33, text: '男性和女性身高、体重分布', subtext: '抽样调查来自:FLQ 2020' }, legend: { data: ['女性', '男性'] }, //配置图例组件 toolbox: { //配置工具箱组件 x: 600, show: true, feature: { mark: { show: true }, dataZoom: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value} cm' } }], yAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value} kg' } }], series: [ //配置数据系列 { //设置女性数据 name: '女性', type: 'scatter', symbolSize: 8, data: [[161.2, 51.6], [167.5, 59], [159.5, 49.2], [157, 63], [155.8, 53.6], [173.0, 59], [159.1, 47.6], [156, 69.8], [166.2, 66.8], [160.2, 75.2], [167.6, 61], [160.7, 69.1], [163.2, 55.9], [152, 46.5], [157.5, 54.3], [156, 52.7], [160, 74.3], [163, 62], [165.7, 73.1], [161, 80]], markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }], }, markLine: { data: [{ type: 'average', name: '平均值' }] } }, { //设置男性数据 name: '男性', type: 'scatter', symbolSize: 8, data: [[174, 65.6], [175.3, 71.8], [163.5, 80], [186.5, 72.6], [187.2, 78.8], [167, 64.6], [177.8, 74.8], [164.5, 70], [182, 101.6], [165.5, 63.2], [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66], [177, 68.2], [161.5, 74.8], [164.0, 86.4], [164.5, 78.4], [175, 62], [164, 81.6]], markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }], }, markLine: { data: [{ type: 'average', name: '平均值' }] } } ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); 绘制带涟漪特效的散点图 在ECharts中,通过使用effectScatter参数可以设置带有涟漪特效动画的ECharts散点(气泡)图。利用男性和女性的身高和体重数据进行动画特效可以将某些想要突出的数据进行视觉突出,如图所示。 由图可知,分别对 [153.4, 42]、[172.7, 87.2]两个点设置了涟漪特效。其中涟漪特效的位置、大小、绘制方式等,可以根据自身的需求进行设置。

image.png

图例的源代码如下:

//基于准备好的DOM,初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); var option = { //指定图表的配置项和数据 legend: { data: ['一般值', '极值'] }, xAxis: { scale: true }, yAxis: { scale: true }, series: [{ type: 'effectScatter', //设置具有涟漪特效的散点图 //设置图形是否不响应和触发鼠标事件,默认false,即响应和触发鼠标事件 silent: false, //设置系列名称,用于legend的图例筛选 //在setOption更新数据和配置项时用于指定对应的系列 name: '极值', legendHoverLink: false, //设置是否启用图例hover时的联动高亮 hoverAnimation: false, //设置是否开启鼠标hover的提示动画效果 effectType: 'ripple', //设置特效类型,目前只支持涟漪特效'ripple' //设置何时显示特效,'render'绘制完成后显示特效 //'emphasis'高亮(hover)的时候显示特效 showEffectOn: 'render', rippleEffect: { //设置涟漪特效 period: 2, //设置动画的时间,数字越小,动画越快 scale: 5.5, //设置动画中波纹的最大缩放比例 brushType: 'fill', //设置波纹的绘制方式,可选'stroke'和'fill' }, symbolSize: 20, //设置特效散点图符号的大小 color: 'green', data: [ //设置特效散点图的数据值 [172.7, 87.2], [153.4, 42]] }, { name: '一般值', type: 'scatter', color: '#FFCCCC', data: [[167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [152.0, 45.8], [163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [166.4, 56.6], [171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [168.5, 65.2], [181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0], [163.0, 72.0], [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [164.3, 59.8], [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [178.0, 70.6], [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [172.7, 87.2], [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [153.4, 42], [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3]], }] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option);


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3