11,990
社区成员
发帖
与我相关
我的任务
分享ECharts常用图表 散点图
1.图表3 散点图
1.1.散点图的实现步骤
- 步骤1 ECharts 最基本的代码结构
此时 option 是一个空空如也的对象
- 步骤2 准备 x 轴和 y 轴的数据
假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而
散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散
点图需要的数据
axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个
代表身高, 一个代表体重
步骤3 准备配置项
- xAxis 和 yAxis 的 type 都要设置为 value
- 在 series 下设置 type:scatter
步骤4 调整配置项, 脱离0值比例
给 xAxis 和 yAxis 配置 scale 的值为 true
1.2.散点图的常见效果
气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
- symbolSize 控制散点的大小
- itemStyle.color 控制散点的颜色
这两个配置项都支持固定值的写法, 也支持回调函数的写法
固定值的写法如下:
回调函数的写法如下:
涟漪动画效果
type:effectScatter
- 将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果
rippleEffect
- rippleEffect 可以配置涟漪动画的大小
showEffectOn
- showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis
- render 代表界面渲染完成就开始涟漪动画
- emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画
结合地图
- 散点图也经常结合地图来进行地图区域的标注, 这个效果将在讲解地图时实现
1.3.散点图的特点
散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重
散点图也经常用在地图的标注上
1.4.直角坐标系的常见配置
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图
针对于直角坐标系的图表, 有一些通用的配置
配置1: 网格 grid
grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
- 显示 grid
show: true
- grid 的边框
borderWidth : 10
- grid 的位置和大小
left top right bottom
width height
配置2: 坐标轴 axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
- 坐标轴类型 type
value : 数值轴, 自动会从目标数据中读取数据
category : 类目轴, 该类型必须通过 data 设置类目数据
- 坐标轴位置
xAxis : 可取值为 top 或者 bottom
yAxis : 可取值为 left 或者 right
配置3: 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器
- 区域缩放类型 type
slider : 滑块
inside : 内置, 依靠鼠标滚轮或者双指缩放
- 产生作用的轴
xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
- 指明初始状态的缩放情况
start : 数据窗口范围的起始百分比
end : 数据窗口范围的结束百分比
需要注意的是, 针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了
下一篇：ECharts常用图表 04 饼图
往期文章：
黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
...全文
请发表友善的回复…
发表回复
