echarts-直角坐标系通用配置

直角坐标系的图表指的是带有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
  }
],