百度的条形图和折线图发行

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

图片

如您在上图中所见，条形图在同一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]],
    }
]