Echarts option多个图形指定某个图形双Y轴或者双X轴

实现配置

grid
xAxis.gridIndex

yAxis.gridIndex

series[0].xAxisIndex
series[0].yAxisIndex

实现效果如下  裙：922473947

grid配置：Y轴定位每个图形在不同的位置

grid: [
    { x: '0%', y: '200px', width: '90%', height: '150px', left: '5%' },  // 第一个图表区域
    { x: '0%', y: '400px', width: '90%', height: '150px', left: '5%' },  // 第二个图表区域
    { x: '0%', y: '600px', width: '90%', height: '150px', left: '5%' },  // 第三个图表区域
    { x: '0%', y: '800px', width: '90%', height: '150px', left: '5%' },  // 第四个图表区域
    { x: '0%', y: '0', width: '90%', height: '100%', left: '5%' }  // 第五个图表区域
  ],

X轴的引用与配置，注意的是X轴配置的gridIndex与Y轴的配置gridIndex必须一致

    {
      gridIndex: 0,
      type: 'category',
      data: ['1', '2', '3', '4', '5']
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['1', '2', '3', '4', '10']
    },
    {
      gridIndex: 2,
      type: 'category',
      data: ['1', '2', '3', '4', '5']
    },
    {
      gridIndex: 3,
      type: 'category',
      data: ['1', '2', '3', '4', '5']
    },
    {
      gridIndex: 4,
      type: 'category',
      data: ['1', '2', '3', '4', '5'],
      axisPointer: {
        snap: true,
        value: 2,
        lineStyle: { color: '#000', opacity: 0.5, width: 2 },
        label: {
          show: true,
          backgroundColor: '#004E52'
        },
        handle: {
          show: true,
          color: '#004E52'
        }
      }
    }
  ],

Y轴配置

    { gridIndex: 0 },
    { gridIndex: 1 },
    { gridIndex: 2 },
    { gridIndex: 3 },
     {
     gridIndex: 3,
      type: 'category',
      position:'right',
      axisLine:{position:'right',  lineStyle: {
          color: 'red'
        }},
      data: ['CR','DR','ER','FR','GR','HR','JR','KR','LR']
    },
    {
      gridIndex: 4,
      type: 'value',
      axisLabel: {
        formatter: '{value}%'  // 可以自定义 Y 轴的标签
      }
    }
  ],

series配置如下

    {
      type: 'line',
      name: '123',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: ['1', '2', '3', '4', '5']
    },
    {
      type: 'line',
      name: '456',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: ['4', '5', '7', '1', '2']
    },
    {
      type: 'line',
      xAxisIndex: 2,
      yAxisIndex: 2,
      data: ['1', '2', '3', '4', '10']
    },
    {
      type: 'line',
      xAxisIndex: 3,
      yAxisIndex: 3,
      data: ['1', '2', '3', '4', '5']
    },
    {
      type: 'line',
      xAxisIndex: 4,
      yAxisIndex: 4, // 第五个图表区域使用第4个Y轴
      data: ['5', '4', '3', '2', '1']
    }
  ]

全部代码：

  grid: [
    { x: '0%', y: '200px', width: '90%', height: '150px', left: '5%' },  // 第一个图表区域
    { x: '0%', y: '400px', width: '90%', height: '150px', left: '5%' },  // 第二个图表区域
    { x: '0%', y: '600px', width: '90%', height: '150px', left: '5%' },  // 第三个图表区域
    { x: '0%', y: '800px', width: '90%', height: '150px', left: '5%' },  // 第四个图表区域
    { x: '0%', y: '0', width: '90%', height: '100%', left: '5%' }  // 第五个图表区域
  ],
  title: false /*[
    { text: '数据完整率', left: '15%' },
    { text: '数据有效率', left: '70%' },
    { text: '在线仪器运转率', left: '15%', top: '30%' },
    { text: '数据超标率', left: '70%', top: '30%' },
    { text: '报警类型分布图', left: '17%', top: '60%' },
    { text: '报警响应分布图', left: '67%', top: '60%' }
  ]*/,
  xAxis: [
    {
      gridIndex: 0,
      type: 'category',
      data: ['1', '2', '3', '4', '5']
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['1', '2', '3', '4', '10']
    },
    {
      gridIndex: 2,
      type: 'category',
      data: ['1', '2', '3', '4', '5']
    },
    {
      gridIndex: 3,
      type: 'category',
      data: ['1', '2', '3', '4', '5']
    },
    {
      gridIndex: 4,
      type: 'category',
      data: ['1', '2', '3', '4', '5'],
      axisPointer: {
        snap: true,
        value: 2,
        lineStyle: { color: '#000', opacity: 0.5, width: 2 },
        label: {
          show: true,
          backgroundColor: '#004E52'
        },
        handle: {
          show: true,
          color: '#004E52'
        }
      }
    }
  ],
  yAxis: [
    { gridIndex: 0 },
    { gridIndex: 1 },
    { gridIndex: 2 },
    { gridIndex: 3 },
     {
     gridIndex: 3,
      type: 'category',
      position:'right',
      axisLine:{position:'right',  lineStyle: {
          color: 'red'
        }},
      data: ['CR','DR','ER','FR','GR','HR','JR','KR','LR']
    },
    {
      gridIndex: 4,
      type: 'value',
      axisLabel: {
        formatter: '{value}%'  // 可以自定义 Y 轴的标签
      }
    }
  ],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: [
    {
      type: 'line',
      name: '123',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: ['1', '2', '3', '4', '5']
    },
    {
      type: 'line',
      name: '456',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: ['4', '5', '7', '1', '2']
    },
    {
      type: 'line',
      xAxisIndex: 2,
      yAxisIndex: 2,
      data: ['1', '2', '3', '4', '10']
    },
    {
      type: 'line',
      xAxisIndex: 3,
      yAxisIndex: 3,
      data: ['1', '2', '3', '4', '5']
    },
    {
      type: 'line',
      xAxisIndex: 4,
      yAxisIndex: 4, // 第五个图表区域使用第4个Y轴
      data: ['5', '4', '3', '2', '1']
    }
  ]
};

注意：

1.series配置由于每个是独立的图形，指定的XY轴都是由xAxisIndex、yAxisIndex指定配置第四个图表双Y轴时候可以看到Y轴数组有两个gridIndex: 3配置，另一个定位右边position：right。
并且type必须是type: 'category', 详细请看文档介绍

2.grid配置中y配置的px，这个是示例写死的方式，如在需求中布局等因素影响，需要自行计算位置与每个图形的间距
有疑问请私聊