2016-07-21 3 views
0

Я только начал работать над Echarts и реализовал некоторые диаграммы. Я должен реализовать диаграмму для веб-сайта клиента. Проблема, с которой я сталкиваюсь, заключается в том, что мои бары идут один за другим, , и если значение меньше, я не вижу бар, который находится позади.Echarts From Baidu Bar and Line graph Выпуск

Вот мой код:

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

Как вы можете видеть на картинке, что бара идут одна за другой на той же точке XAxis , Я хочу показать их отдельно. Пожалуйста, помогите

Спасибо всем,

ответ

0

Измените ось х, чтобы иметь тип category вместо value:

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