ECharts折线图跟柱状图混搭

vinciyoung 发布于 2016/12/06 15:41
阅读 4K+
收藏 0

我想用echarts实现类似下图的图表,折线图跟柱状图混搭,但是不要重叠。我的想法是设置折线依赖的y轴的起点上移(有两个y轴,柱状图依赖左边的y,折线图依赖右边的y),但不知道怎么实现?

现在实现的效果是下面这个图的样子,折现跟柱状是重叠的

加载中
0
Kener-林峰
Kener-林峰
重叠这个无解的,数据本身就这样,如果你的需求图里增长率只有5%左右一样重叠的,重叠其实没关系,数据量级不一样,双轴很好,让折线在上面,区分颜色就行
0
vinciyoung
vinciyoung

引用来自“Kener-林峰”的评论

重叠这个无解的,数据本身就这样,如果你的需求图里增长率只有5%左右一样重叠的,重叠其实没关系,数据量级不一样,双轴很好,让折线在上面,区分颜色就行
感谢回答,看来只能以颜色区分
0
vinciyoung
vinciyoung

在官方示例里面找到这样一个例子,这个问题应该可以完美解决了

http://gallery.echartsjs.com/editor.html?c=xSJCW_ZvZe

0
风侵天下

我也要用这样的效果能方便给下代码不,谢谢  QQ415864373

vinciyoung
vinciyoung
回复@风侵天下 : http://gallery.echartsjs.com/editor.html?c=xSJCW_ZvZe你可以参考下这个例子,我最后还是没有用双轴解决,用了这个例子的方法,为了呈现这样的效果,在数据上也做了变化,没有使用增长率,使用的还是总量
0
vinciyoung
vinciyoung

最后,还是实现了自己想要的效果。很久的问题了,突然想起来,自己再来回答一下

最后是用双轴呈现的,增长率那个轴根据数据情况指定一下坐标轴的最大值和最小值,折线就拉上去了。这样做后会有一个小问题,就是x轴的起点会在y2(增长率那个轴)的0点上,理论上应该可以x轴起点跟随y1轴,但是我找不到处理的办法,于是就干脆隐藏掉x轴了

 yAxis : [
    {
         type: 'value',
        name: '同比增长', 
        position: 'right',
        min: -200,
        max: 50,
        axisLabel: {
            formatter: '{value}%'
        }
    },{
        type: 'value',
        name:"销售额(单位:千万)",
        nameLocation:"end", 
        position:"left",           
        min: 0,
        max: 500000000,  
        position: 'left', 
        splitLine:{
          show:false
        },  
        axisLabel:{
                     textStyle: {
                color: '#ffffff',
                fontSize: 14,
                fontWeight:'bolder'
              },
            formatter:function(value){
              return value/10000000
            }          
          },
        boundaryGap: [0, 0.01]
    }],

 

返回顶部
顶部