Echarts 来自百度条形图和折线图问题

Question

我刚刚开始研究 Echarts 并实现了一些图表。我必须为客户的网站制作图表。我遇到的问题是我的酒吧一个接一个地走，如果该值较小，我将看不到后面的栏。

这是我的代码：

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

如您在上图中所见，条形图在同一 x 轴点上一个接一个地移动。我想分别展示它们。请帮助

谢谢大家

Answer 1

将 x 轴类型改为 category 而不是 value:

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

Answer 2

或者，您可以在系列中使用 set stack 属性。如果堆栈对于两个系列具有相同的值，它们将显示在彼此之上，这使图表更紧凑且仍然可读。

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]],
    }
]

Echarts 来自百度条形图和折线图问题

Echarts From Baidu Bar and Line graph Issue

javascript

echarts