echarts拼接两个不同方向的图表（超详细）

最新推荐文章于 2025-05-09 23:06:08 发布
原创 最新推荐文章于 2025-05-09 23:06:08 发布 · 4.6k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

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

在使用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月',
              '7月'
            ],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: { show: false }
          },
          //第二个x轴配置
          {
          //定义使用的grid布局
            gridIndex: 1,
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            //设置x轴位置在图表上方
            position: 'top',
            axisTick: { show: false }
          }
        ],
        //y轴
        yAxis: [
        //第一个y轴配置
          {
            type: 'value',
            min: 0,
            max: 1000,
            interval: 100,
            splitLine: { show: false },
            axisTick: { show: false }
          },
          //第二个y轴配置
          {
          //同x轴使用第二个grid
            gridIndex: 1,
            type: 'value',
            min: 0,
            max: 100,
            //设置y轴反转
            inverse: true,
            interval: 20,
            splitLine: { show: false },
            //刻度标签显示格式
            axisLabel: {
              formatter:'{value}%'
            },
            
            axisTick: { show: false }
          }
        ],
        series: [
        //柱状图1定义及数据
          {
            name: '柱形图1',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#2b8fff'
                },
                {
                  offset: 1,
                  color: '#1660ff'
                }
                ], false)
              }
            },
            barGap: '0%',
            data: [200, 300, 400, 500, 600, 700, 800]
          },
          //柱状图2定义及数据
          {
           //设置使用第一种xy轴布局，也可以不设置，默认使用第一种，如柱状图1
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: '柱形图2',
            type: 'bar',
            barWidth: 14,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#5aceff'
                },
                {
                  offset: 1,
                  color: '#15bafe'
                }
                ], false)
              }
            },
            data: [100, 200, 300, 400, 500, 600, 700]
          },
          //折线图定义及数据
          {
            name: '折线图',
            type: 'line',
            //设置使用第二种xy轴布局
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            label: {
              show: true,
              formatter: '{c}%'
            },
            itemStyle: {
              color: 'lightgreen'
            },
            data: [75, 50, 60, 55, 70, 65, 55]
          }

        ]
      };

这时的效果（也可以复制到官网在线运行查看效果）：

这步主要做显示的图表刻度和数据的格式

2.接下来就是要通过调整grids将两个图的x轴重合

调整option的grid属性：

    grid: [{
      left: 50,
      right: 50,
      height: '50%'
    }, {
      left: 50,
      right: 50,
      top: '59.5%',
      height: '35%'
    }]

依据你的echarts实例大小调整的grid可能有所不同，这里配置的是在官方的examples页面的编辑器可以重合的grid参数，如果不会配置可以看官方文档

接下来就会发现一个问题：柱状图y轴刻度0显示0，而折线图是0%，重合起来很丑，很不理想，怎么办？

3.最后设置一下折线图y轴的刻度标签样式
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 1000,
        interval: 100,
        splitLine: { show: false },
        axisTick: { show: false }
      },
      {
        gridIndex: 1,
        type: 'value',
        min: 0,
        max: 100,
        inverse: true,
        interval: 20,
        splitLine: { show: false },
        //设置第二个y轴数值为0时不显示刻度
        axisLabel: {
          formatter: function (item) {
            if (item === 0) {
              item = ''
            } else {
              item = item + '%'
            }
            return item
          },
        },
        axisTick: { show: false }
      }
    ],

如果觉得x轴重合看着怪怪的，甚至可以再进一步，将第二个x轴线隐藏

    xAxis: [
      {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月'
        ],
        axisPointer: {
          type: 'shadow'
        },
        axisTick: { show: false }
      },
      {
        gridIndex: 1,
        type: 'category',
        axisPointer: {
          type: 'shadow'
        },
        position: 'top',
        axisTick: { show: false },
        //隐藏第二个x轴线
        axisLine:{show:false}
      }
    ],

最后得到的代码如下：

可以复制到官网，在线运行

option = {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
          }
        },
        legend: {
          data: [
            { name: '柱形图1', icon: 'circle' },
            { name: '柱形图2', icon: 'circle' },
            '折线图'
          ],
          right: 90
        },
        grid: [{
          left: 50,
          right: 50,
          height: '50%'
        }, {
          left: 50,
          right: 50,
          top: '59.5%',
          height: '35%'
        }],
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月'
            ],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: { show: false }
          },
          {
            gridIndex: 1,
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            position: 'top',
            axisTick: { show: false },
            axisLine:{show:false}
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 1000,
            interval: 100,
            splitLine: { show: false },
            axisTick: { show: false }
          },
          {
            gridIndex: 1,
            type: 'value',
            min: 0,
            max: 100,
            inverse: true,
            interval: 20,
            splitLine: { show: false },
            axisLabel: {
              formatter: function (item) {
                if (item === 0) {
                  item = ''
                } else {
                  item = item + '%'
                }
                return item
              },
            },
            axisTick: { show: false }
          }
        ],
        series: [
          {
            name: '柱形图1',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#2b8fff'
                },
                {
                  offset: 1,
                  color: '#1660ff'
                }
                ], false)
              }
            },
            barGap: '0%',
            data: [200, 300, 400, 500, 600, 700, 800]
          },
          {
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: '柱形图2',
            type: 'bar',
            barWidth: 14,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#5aceff'
                },
                {
                  offset: 1,
                  color: '#15bafe'
                }
                ], false)
              }
            },
            data: [100, 200, 300, 400, 500, 600, 700]
          },
          {
            name: '折线图',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            label: {
              show: true,
              formatter: '{c}%'
            },
            itemStyle: {
              color: 'lightgreen'
            },
            data: [75, 50, 60, 55, 70, 65, 55]
          }

        ]
      };

效果如图：

您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo-v8.3

Yolo

YOLO（You Only Look Once）是一种流行的物体检测和图像分割模型，由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出，因其高速和高精度而广受欢迎

前端领域 Echarts 网格布局的图表排列技巧
小白菜的博客
06-12 1115
数据可视化已成为前端开发的核心需求之一，而 Echarts 作为国内最流行的可视化库（据统计，GitHub 星标超 5.6 万），被广泛用于数据看板、监控大屏、业务报表等场景。多个图表挤在一起，标签重叠、坐标轴打架屏幕尺寸变化时，图表布局混乱想实现「2行3列」「左右分栏」等排列效果，却总调不准位置本文将聚焦 Echarts 的网格布局（Grid 组件），覆盖从基础概念到高级技巧的全流程，帮你解决上述问题。用「教室排座位」的故事类比 Echarts 网格布局。
Django Echarts 多个图形共用一个X轴拼接显示
自在飞花轻似梦，无边丝雨细如愁！
12-31 3971
需求：显示8个地级市，一周投诉数变化趋势图。 views.py: def city(request): x_data = ['合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '芜湖', '芜湖', '芜湖', '芜湖', '芜湖', '芜湖', '芜湖', '蚌埠', '蚌埠', '蚌埠', '蚌埠', '蚌埠', '蚌埠', '蚌埠', '滁州', '滁州', '滁州',
Echarts实现上下拼接两个折线图，每个折线图都是双y轴
hunantai的博客
03-26 1535
【代码】Echarts实现上下拼接两个折线图，每个折线图都是双y轴。
echart 多个图表组合在一起（数量不限自动计算每个图表高度）
weixin_40245339的博客
01-11 1438
样式： Vue文件代码： <template> <div class="chartBox"> <!-- 公共头部 --> <headerCom style="background-color: #010713" /> <!-- --> <div class="contentBox"> <div class="leftTitleBox" :style
echarts使用数据集分别描绘两种类型图
hongsir的博客
10-13 1838
echarts使用数据集分别描绘两种类型图使用数据集初尝试option详细配置项和数据数据集dataset设置指定数据所要展示的图表类型完整js代码 使用数据集 根据echarts官网使用手册，数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。 初尝试 要求在同一页面中摆放两种图表： opt
vue+echarts ② echarts两个图表在同一行、echarts图表放在el-dialog里面展示
zujiasheng的博客
08-24 4177
echarts两个图表在同一行、echarts放在el-dialog里面展示① 效果图② div样式设置：用一个div包住图表，样式设置为 float: left;
在一个Echarts中绘制多张图表（echarts多系列混合）
唐都恩了的博客
11-21 5663
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多系列混合图表</title> <script src="https://cdn.jsdelivr.ne.
精选资源
echarts整合多个类似option的方法实例
01-19
最后模仿老大做的整合多个option自己做了一个demo，自己写了详细的注释。 效果图如下： html代码如下： <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id=chart1 style=width: 300px;
Echarts 开发混搭图表实现步骤，并实现多图联动
Nick.Peng's Blogs
02-23 7781
文章目录一、Echarts图表制作准备工作二、给饼图和柱状图增加配置项三、分别画饼图和柱状图四、配置两个图表样式 ------ 显示在一行五、实现多图联动六、完整源代码 好文章 记得收藏+点赞+关注额 ！！！ ---- Nick.Peng 一、Echarts图表制作准备工作 引入Echarts.js 分别为饼图和柱状图指定 Dom 大小<!DOCTYPE html> <html...
Dify+数据库+ECharts打造数据可视化图表
最新发布
呱牛 Just do IT
05-09 1952
Echarts作为一款强大的数据可视化工具，能够将复杂的数据转化为直观、生动的图表，帮助用户更好地理解和分析信息。本文介绍了如何利用Dify平台结合Echarts图表库，轻松搭建工作流，将数据库中的数据直接转化为精美的可视化图表。首先，通过安装数据库插件和准备数据表，确保数据源的完整性。随后，利用Echarts插件和代码执行节点，将数据库查询结果转换为适合图表展示的格式，并最终生成柱状图、散点图等多种图表。通过这种方式，用户可以快速实现数据可视化，发现数据中的关键信息和异常值。
echarts两个合并柱体（普通柱状图+象形柱图）共享一个柱体阴影
qq_40950174的博客
05-24 3949
1.普通柱图与象形柱图的合并 2.多个普通柱图与象形柱图的合并公用一个x轴与多个y轴 3.多个普通柱图与象形柱图的合并公用一个阴影背景 4.图例点击隐藏普通柱图与象形柱图的合并
Echarts拼接折线图，左右两部分设置不同的样式及formatter的处理
u010234868的专栏
07-03 1023
【代码】Echarts拼接折线图，左右两部分设置不同的样式及formatter的处理。
Echarts图表混搭之柱状图与饼图混搭图表
wqqstudy的博客
05-22 2354
Echarts图表混搭之柱状图与饼图混搭图表 利用ECharts各图表的在线构建次数、各图表组件的使用次数、各版本下载和各主题下载情况的数据绘制柱状图与饼图混搭图表
echarts多Y轴 两个图上下拼接
Ellie
05-24 6864
xiao 上图就是效果图，我在管网的例子上进行修改，下面是我的代码，可以直接复制到例子中，就可以用。 option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color...
echarts组合图 柱图+饼图
qq_36521848的博客
05-25 1633
效果： 代码示例： option = { tooltip: { trigger: 'axis' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, .
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 4280
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
echarts联合图表
Wming优快云的博客
08-01 474
import echarts from ‘echarts’ import { correctLaunchTrend } from ‘@/api/test’ export default { name: ‘CorrectLaunchTrend’, data() { return { name: ‘正确投放率趋势’, datestr: ‘month’, weekStyle: ...
echart常用柱形与曲线组合图表
低调哥的博客
01-04 1750
//收入趋势图// X轴时间 var daysOfMonth = []; function createMonthDay(year, month) { var d = new Date(); var lastDayOfMonth = new Date(year, month, 0).getDate(); for(var i = 1; i ; i++) { d
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置
Amanda_wmy的博客
11-12 3499
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置 想要实现实线与虚线的结合，后端返回的数据是动态的，根据状态的不同展示实线与虚线。 例子1: 数据是固定的 series: [ { name:'在线数', type:'line', data:[120, 132, 191, "-", "...
Echarts实现上下拼接多个折线图
02-18
上述代码片段展示了两个用于装载不同折线图的区域，并通过设定固定的像素值指定其高宽比例，同时利用外边距属性调整两图之间的间距以增强视觉上的分离感。 接着初始化各个图表对象并加载对应的数据集: ```...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值