Echarts From Baidu Bar and Line graph Issue

Question

I have just started working on Echarts and implemented some charts. I have to implement a chart for a client's web site. The problem I am encountering is that my bar's are going one behind another, and if the value is less I cannot see the bar which is behind.

Here is my code:

 var provider = ['JD','JR']; option = { title:{ }, tooltip : { trigger: 'axis' }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, legend: { data:['2012','2013','Baseline'] }, xAxis : [ { type : 'value', min :0, max: provider.length, scale: true, splitNumber: provider.length, axisLabel:{ formatter: function(v){ if(v!=0) return provider[v-1]; else return ;} } } ], yAxis : [ { type : 'value', name : '', scale:true, min: 0, max:100, splitNumber:10, axisLabel : { formatter: '{value}%' } }, ], series : [ { name:'Baseline', type:'line', data:[ [1,30],[2,10],[1,20],[2,33.33] ] }, { name:'2012', type:'bar', barWidth: 30, data:[[1,35],[2,50]], }, { name:'2013', type:'bar', barWidth: 30, data:[[1,30],[2,33.33]], } ] }; 

Image

As you can see in the above image, that the bar's are going one behind the another on the same xaxis point. I want to show them separately. Please help

Thank you all

Answer 1

将x轴更改为category而不是value ：

option.xAxis[0].type = 'category';

Answer 2

Alternatively, you can use set stack property inside the series. If stack is having same value for two series, they'll be shown on top of each other, it makes the chart more compact and still readable.

series : [
    {
        name:'Baseline',
        type:'line',
        stack: 'total',
        data:[ [1,30],[2,10],[1,20],[2,33.33] ]
    },
    {
        name:'2012',
        type:'bar',
        stack: 'total',
        barWidth: 30,
        data:[[1,35],[2,50]],
    },
    {
        name:'2013',
        type:'bar',
        stack: 'total',
        barWidth: 30,
        data:[[1,30],[2,33.33]],
    }
]