2016-07-21 7 views
0

Ich habe gerade angefangen, an Echarts zu arbeiten und einige Diagramme implementiert. Ich muss ein Diagramm für die Website eines Kunden implementieren. Das Problem, das mir begegnet, ist, dass meine Bars hintereinander gehen, und wenn der Wert weniger ist, kann ich nicht die Leiste sehen, die dahinter ist.Echarts Von Baidu Bar und Liniendiagramm Ausgabe

Hier ist mein 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:{ 
 
      \t formatter: function(v){ 
 
       if(v!=0) 
 
      \t return provider[v-1]; 
 
      else 
 
       return ;} 
 
      } 
 

 
     } 
 
    ], 
 
    yAxis : [ 
 
     { 
 
      type : 'value', 
 
      name : '', 
 
      scale:true, 
 
    \t \t \t 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

Wie Sie im obigen Bild sehen können, dass die Bar der hintereinander auf dem gleichen xaxis Punkt gehen . Ich möchte sie getrennt zeigen. Bitte helfen

Sie alle

Antwort

0

Ändern der x-Achse zu sein, vom Typ category statt value danken:

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