echarts之直角坐标系的常见配置

直角坐标系的常见配置

配置1: 网格 grid

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

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

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

xAxis: {
            type: 'category',
            data: ['小王', '小明', '小红'],
            position:'top'
        },
        yAxis: {
            type: 'value',
            position: 'right'
        }

区域缩放dataZoom

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

• type类型
  slider:滑块
  inside：内置，依靠 鼠标滚轮或者双指缩放。
• 指明产生的作用轴
  xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0即可，因为现在咱们用到的只有一个x轴。
  yAxisIndex:设置缩放组件控制的是哪个y轴，一般写0即可，因为现在咱们用到的只有一个y轴。
• 指明初始状态的缩放情况
  start：数据窗口范围的起始百分比
  end：数据窗口范围的结束百分比

 var option = {
        dataZoom: [
            {
                // type: 'inside'
                type:'slider',
                xAxisIndex:0
            },
            {
                type:'slider',
                yAxisIndex:0,
                start:0,
                end:80
            }
        ],
        toolbox: {
            feature: {
                dataZoom: {}
            }
        }
    }

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