直角坐标系常用配置

直角坐标系图表：

• 柱状图
• 折线图
• 散点图

常用配置：

• 网格 grid
  • 大小
  • 边框
• 坐标轴 axis
  • category 轴
  • value 轴
• 区域缩放 dataZoom
  • x轴和y轴都可以设置
  • inside slider

1. 网格 grid

说明：

• grid 是用来控制直角坐标系的位置和大小

配置：

option
grid.show	boolean	是否显示直角坐标系网格。
grid.width	string number	grid 组件的宽度
grid.height	string number	grid 组件的高度
grid.top	string number	grid 组件离容器上侧的距离
grid.right	string number	grid 组件离容器右侧的距离
grid.bottom	string number	grid 组件离容器下侧的距离
grid.left	string number	grid 组件离容器左侧的距离

示例：

<!--21-rectangular-coordinate-grid.html-->
<div id="box_21-rectangular-coordinate-grid" style="width: 600px; height: 400px; background: #eee;"></div>
<script>
  echarts.init(document.querySelector('#box_21-rectangular-coordinate-grid')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    grid: {
      show: true,
      top: 100,
      left: 100
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      { name: '语文', type: 'bar', encode: { x: 'name', y: 'chinese' } },
    ]
  });
</script>

2. 坐标轴 axis

说明：

• 分为 x轴(xAxis) 和 y轴(yAxis)

配置：

xAxis.type	'value', 'category'	数值轴, 类目轴
yAxis.type	'value', 'category'	数值轴, 类目轴
xAxis.position	'top', 'bottom'
yAxis.position	'left', 'right'

示例：

<!--22-rectangular-coordinate-axis.html-->
<div id="box_22-rectangular-coordinate-axis" style="width: 600px; height: 400px; background: #eee;"></div>
<script>
  echarts.init(document.querySelector('#box_22-rectangular-coordinate-axis')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: {
      type: 'category',
      position: 'top',
    },
    yAxis: {
      type: 'value',
      position: 'right',
      axisLine: { show: true }
    },
    series: [
      { name: '语文', type: 'bar', encode: { x: 'name', y: 'chinese' } },
    ]
  });
</script>

3. 区域缩放 dataZoom

说明：

• 对数据范围过滤

配置：

option = {
  dataZoom: {
    type: 'slider', // 'slider': 通过滑块控制区域。 'inside': 通过鼠标滚轮控制
  },
}