title: Echarts From Baidu Bar and Line graph Issue
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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]],
          }
  
      ]
  };
                      </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://i.stack.imgur.com/bGhfc.png" rel="nofollow">Image</a></p>
  
  <p>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 </p>
  
  <p>Thank you all</p>