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

背景与需求:

在使用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
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值