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

霓虹伊

已于 2025-03-26 15:01:26 修改

阅读量562

点赞数 13

CC 4.0 BY-SA版权

分类专栏： echarts 前端图表图表文章标签： echarts 前端 javascript

于 2025-01-20 15:16:36 首次发布

本文链接：https://blog.csdn.net/YouNiCaiWenNua/article/details/145262877

实现配置

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必须一致