Echarts 多轴多图实现

效果图

基于 echarts 5.2.2
官网原话如下：

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

也就是在Echarts3及以上都可以实现单个实例多个图形。

示例图源代码如下，可直接复制到echarts官网实例进行修改查看。以便明白各个属性的具体作用！Echarts官网实例

option = {
  grid: [ // 该数组的每一项代表一个图形 相当于一个x轴和y轴
  
    {
      left: '10%', // 确定图形的位置， 距离左边的偏移量
      // 有 left right bottom top 属性来设置相应的偏移量
      width: "40%" // 对应图形的宽度
      // 还有个height 属性设置图形的高度， 另外 通过设置top 和bottom 也可以控制图形的高度
    },
    {
      left: '60%',
      top:'50%',
      width: "40%"
    },
    {
      left: '60%',
      bottom: '50%',
      width: "40%",
    }
  ],
  xAxis: [ 一共有三个x轴，设置 gridIndex 表示对应 grid 数组的索引
    {
      gridIndex: 0,
      type: 'value',
    },
    {
      gridIndex: 1,
      type: 'value',
    },{
      gridIndex: 2,
      show: false
    }
  ],
  yAxis: [一共有三个y轴，设置 gridIndex 表示对应 grid 数组的索引
    {
      gridIndex: 0,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      gridIndex: 2,
      show: false
    }
  ],
  series: [ // 这里需要给每一个项设置 xAxisIndex、yAxisIndex 一一对应 xAxis、yAxis
    {
       xAxisIndex:1,
       yAxisIndex:1,
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    },
    {
      xAxisIndex:0,
      yAxisIndex:0,
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    },
    {
      xAxisIndex:2,
      yAxisIndex:2,
      type: 'pie',
      center: ['75%', '25%'],
      radius: ['15%', '30%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};