echarts grid 怎么支持多个x，y轴？

Question

1. 如图：
2. 官网例子：scatter-anscombe-quartet
3. 官网例子是支持四组数据，希望在图上再加两组数据，共六组数据，六个图例，如何实现？

Answer 1

效果：

附上最后的options配置：

{
      legend: {},
      grid: [
        {
          x: 80,
          y: 80,
          width: 200,
          height: 200,
          show: true,
        },
        {
          x: 350,
          y: 80,
          width: 200,
          height: 200,
          show: true,
        },
        {
          x: 80,
          y: 380,
          width: 200,
          height: 200,
          show: true,
        },
        {
          x: 350,
          y: 380,
          width: 200,
          height: 200,
          show: true,
        },
        {
          x: 80,
          y: 680,
          width: 200,
          height: 200,
          show: true,
        },
      ],
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          gridIndex: 0, // 这个值很重要，用于指定图表组件属于哪个画布
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        {
          type: 'category',
          gridIndex: 1,
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        {
          type: 'category',
          boundaryGap: false,
          gridIndex: 2, // 这个值很重要，用于指定图表组件属于哪个画布
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        {
          type: 'category',
          boundaryGap: false,
          gridIndex: 3,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        {
          type: 'category',
          boundaryGap: false,
          gridIndex: 4, // 这个值很重要，用于指定图表组件属于哪个画布
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
      ],
      yAxis: [
        { gridIndex: 0 },
        { gridIndex: 1 },
        { gridIndex: 2 },
        { gridIndex: 3 },
        { gridIndex: 4 },
      ],
      series: [
        {
          name: 'SO2',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
        },
        {
          name: 'CO',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: [220, 300, 250, 180, 170, 210, 230],
          type: 'line',
        },
        {
          name: 'SO2',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: [120, 200, 150, 80, 70],
          type: 'line',
        },
        {
          name: 'CO',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: [220, 300, 50, 180, 70],
          type: 'line',
        },
        {
          name: 'SO2',
          xAxisIndex: 2,
          yAxisIndex: 2,
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
        },
        {
          name: 'CO',
          xAxisIndex: 2,
          yAxisIndex: 2,
          data: [220, 300, 50, 180, 70],
          type: 'line',
        },
        {
          name: 'SO2',
          xAxisIndex: 3,
          yAxisIndex: 3,
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
        },
        {
          name: 'CO',
          xAxisIndex: 3,
          yAxisIndex: 3,
          data: [220, 300, 50, 180, 70],
          type: 'line',
        },
        {
          name: 'SO2',
          xAxisIndex: 4,
          yAxisIndex: 4,
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
        },
        {
          name: 'CO',
          xAxisIndex: 4,
          yAxisIndex: 4,
          data: [220, 300, 50, 180, 70],
          type: 'line',
        },
      ],
    }

Answer 2

有4组数据添加为6组数据，需要关心的属性为一下几个：

1. grid： 通过调整例子中的几个参数，就能进行多个图表的定位。
2. xAxis，yAxis：用来定义坐标轴相关的一些参数，例子中的gridIndex类似HTML中的id，作为图表的索引，在series中xAxisIndex与yAxisIndex就构成了坐标系。
3. series: 这就是数据的填充了，就不做太多说明。

注意： 如果你都按照上面的做了，发现还是没有出现6个图，调整grid中各个图表的x与y等相关参数把，因为图表可能重叠了。