echarts直角坐标系中的常用配置

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

配置1：网格grid

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

• 显示grid
  show
• grid的边框
  borderWidth、borderColor
• grid的位置和大小
  left 、top、right、bottom
  width、height

    grid: {
            show: true,
            borderWidth: 10,
            borderCorlor:'red',
            left:120,
            top:120,
            width: 300,
            height: 150
        },

image.png

配置2：坐标轴axis

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

• 坐标轴类型 type
  value：数值轴，自动会从目标数据中读取数据
  category：类目轴，该类型必须通过data设置类目数据
• 显示位置 position
  xAxis：可取值为top或者bottom
  yAxis：可取值为left或者right

    xAxis: {
            type: 'category', //类目轴
            data: [
                '小明',
                '小红',
                '小王'
            ],
            position: 'top'
        },
        yAxis: {
            type: 'value', //数值轴
            position: 'right'
        },

image.png

配置3：区域缩放 dataZoom

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

• 类型 type
  slider：滑块
  inside：内置，依靠鼠标滚轮或者双指缩放
• 指明产生的作用轴
  xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可
  yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可
• 指明初始状态的缩放情况 （筛选符合情况的数据进行展示）
  start：数据窗口范围的起始百分比
  end：数据窗口范围的结束百分比
  示例代码如下：

image.png