直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图
针对于直角坐标系的图表, 有一些通用的配置
网格 grid
grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
grid:{
show:true, // 显示网格
borderWidth:4, // 描边的宽度
borderColor:'#f35', // 描边的颜色
left:100, // 根据盒子容器的偏移量
top:100,
width:300, // 网格的大小
height:300
},
坐标轴 axis
这个我们之前已经经常用到
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
坐标轴类型 type
value : 数值轴, 自动会从目标数据中读取数据
category : 类目轴, 该类型必须通过 data 设置类目数据
坐标轴位置
xAxis : 可取值为 top 或者 bottom
yAxis : 可取值为 left 或者 right
把坐标轴设置成由 正常左下设置成 右上
xAxis: {// X轴 type:'category', // 类目轴 data: ['小吴', '小孟', '小韩', '小罗', '小崔'], position: 'top' }, yAxis: { // Y轴 type:'value', // 数值轴 position:'right' },
区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器
slider : 滑块
dataZoom:[ { type:'slider', // 有滑块的缩放 yAxisIndex:0, // 指定在哪个轴起作用 一版情况下 直角坐标系 只会有一个x y 轴 0 就默认是第一个 // xAxisIndex:0, X轴Y轴都可以 start:25, // 还可以指定开始和结束 end:75 }, ],
inside : 内置 依靠鼠标滚轮或者双指缩放 并不会显示出来
dataZoom:[ { type:'slider', // 有滑块的缩放 yAxisIndex:0, // 指定在哪个轴起作用 一版情况下 直角坐标系 只会有一个x y 轴 0 就默认是第一个 // xAxisIndex:0, X轴Y轴都可以 start:25, // 还可以指定开始和结束 end:75 }, { type: 'inside', // 鼠标滑动缩放(无提示) yAxisIndex:0, start:45, // 还可以指定开始和结束 end:85 } ],