散点图的特点

3.散点图的特点

散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重

散点图也经常用在地图的标注上

4.直角坐标系的常见配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图

针对于直角坐标系的图表, 有一些通用的配置

配置1: 网格 grid

grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的

显示 grid

show: true

grid 的边框

borderWidth : 10

grid 的位置和大小

left top right bottom width height

var option = {
  grid: {
    show: true, // 显示grid 
    borderWidth: 10, // grid的边框宽度 
    borderColor: 'red', // grid的边框颜色 
    left: 100, // grid的位置 
    top: 100,
    width: 300, // grid的大小
    height: 150
  }
}

配置2: 坐标轴 axis

坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴

坐标轴类型 type

value : 数值轴, 自动会从目标数据中读取数据

category : 类目轴, 该类型必须通过 data 设置类目数据

坐标轴位置

xAxis : 可取值为 top 或者 bottom

yAxis : 可取值为 left 或者 right

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    position: 'top'
  },
  yAxis: {
    type: 'value',
    position: 'right'
  }
}

配置3: 区域缩放 dataZoom

dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着可以配置多个区域缩放器

区域缩放类型 type

slider : 滑块

inside : 内置, 依靠鼠标滚轮或者双指缩放

产生作用的轴

xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可

yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可

指明初始状态的缩放情况

start : 数据窗口范围的起始百分比

end : 数据窗口范围的结束百分比

var option = {
  xAxis: {
    type: 'category',
    data: xDataAr
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0
  }, {
    type: 'slider',
    yAxisIndex: 0,
    start: 0,
    end: 80
  }]
}

需要注意的是, 针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了