echarts拼接两个不同方向的图表（超详细）_如何把echart 拼起来-优快云博客

本文介绍了如何使用Echarts拼接一个柱形图和一个折线图，实现上下两个图表共享x轴但方向不同的效果。通过调整grid、设置轴刻度和标签，以及处理y轴刻度样式，成功地在一个图表实例中实现了所需的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景与需求：

在使用echarts实现前端显示的图表时想要实现如图所示的效果

一个图表，上面是数量的柱形图，下面是与上一年数据的比值，在官网上找不到这种效果的实例，百度也都不是我想要的效果，可能是我百度的不对。

在官网上找到效果比较接近的，如图：

地址

于是就想着拼接两个图表实现这种效果

解决方法：

1.同一个echarts实例通过配置grid调整位置拼接两个图

2.两个不同的echarts实例通过配置grid调整位置拼接

从实现的效果来看，我是不建议方法2的，通过两个不同实例调整位置必然会导致图例位置不统一，如果想要通过调整grids来调整图例的位置就会导致两个图其中一个的图例不可互动（被上一层的echarts覆盖了）

看两个图对比就明白什么意思了（由于怕引起某些问题，图例被我打码了）

同一个echarts实例拼接

两个不同echarts实例拼接

实现代码与效果：

这里只讲方法1，因为我觉得法2不可取，如果有不同意见欢迎在评论区指出。

将官网的代码加以改造，即可得到想要的图效果

1.首先将x，y轴的刻度标签数据换一换，上方的图换成柱形图

比较重要的是设置两个xy轴的grid布局和 y轴翻转，以及在下方的y轴刻度标签的格式

   option = {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
          }
        },
        //图例格式
        legend: {
          data: [
            { name: '柱形图1', icon: 'circle' },
            { name: '柱形图2', icon: 'circle' },
            '折线图'
          ],
          right: 90
        },
        //两个不同的布局
        grid: [{
          left: 50,
          right: 50,
          height: '35%'
        }, {
          left: 50,
          right: 50,
          top: '50%',
          height: '35%'
        }],
        //x轴
        xAxis: [
        //第一个x轴配置
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',