ECharts_直角坐标系的常用配置

3.4 直角坐标系常用配置

直角坐标系图标：柱状图 折线图 散点图

3.4.1 网格grid

grid是用来控制直角坐标系的布局和大小

x轴和y轴就是在grid基础上进行绘制的

• show

• borderWidth 边框宽度

• borderColor 边框颜色

• left

• top

• width

• height

3.4.2 坐标轴axis

坐标轴分为x轴和y轴

一个grid中最多有两种位置的x轴和y轴

• 坐标轴类型 type

  value：数值轴，自动会从目标数据中读取数据

  category：类目轴，该类型必须通过data设置类目数据

• 显示位置 position

  xAxis 可以设置顶部top或底部bottom

  yAxis 可以设置左部left或右部right

3.4.3 区域缩放dataZoom

dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有。

dataZoom是一个数据，意味着可以配置多个区域缩放器。

• type

  slider 滑块

  inside 通过鼠标滚轮滚动或者双击缩放

• 指明产生作用的轴

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

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

• 指明初始状态的缩放情况

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

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