echarts拼接两个不同方向的图表(超详细)

本文介绍了如何使用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月',
  
### 使用ECharts实现多个折线图垂直布局拼接 为了实现在同一页面内垂直排列的多个折线图,可以通过创建多个`div`容器来容纳各自的图表实例。每个图表配置项中的高度设置以及CSS样式控制着这些图表的具体外观尺寸。 对于希望达到上下拼接效果的情况,在HTML文档结构设计方面,应该为每一个想要放置折线图的位置定义独立的`<div>`标签作为承载图形的空间[^2]: ```html <div id="chart-top" style="height:300px;"></div> <div id="chart-bottom" style="height:300px; margin-top: 20px"></div> ``` 上述代码片段展示了两个用于装载不同折线图的区域,并通过设定固定的像素值指定其高宽比例,同时利用外边距属性调整两图之间的间距以增强视觉上的分离感。 接着初始化各个图表对象并加载对应的数据集: ```javascript // 基于准备好的dom,初始化echarts实例 var topChart = echarts.init(document.getElementById('chart-top')); var bottomChart = echarts.init(document.getElementById('chart-bottom')); // 指定图表的配置项和数据 optionTop = { xAxis: {type : 'category', data : ['Mon', 'Tue', 'Wed']}, yAxis: {type : 'value'}, series: [{ name:'销量', type:'line', data:[120, 132, 101] }] }; optionBottom = { xAxis: {type : 'category', data : ['Sun', 'Sat', 'Fri']}, yAxis: {type : 'value'}, series: [{ name:'库存量', type:'line', data:[89, 76, 54] }] }; topChart.setOption(optionTop); bottomChart.setOption(optionBottom); window.onresize = function () { topChart.resize(); bottomChart.resize(); }; ``` 此部分脚本负责分别向顶部与底部的图表分配不同的时间序列及数值集合,从而形成对比鲜明却又相互关联的信息表达形式;最后还加入了窗口大小改变事件监听器以便响应式地更新图表尺寸。 值得注意的是,如果追求更加统一的主题风格或是交互体验,则可以在初始化时传递额外参数给`init()`方法来自定义全局主题,比如之前提到过的'westeros'[^1]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值