Question

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

这是我的代码：

＆＃13;

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

＆＃13;

Image

正如您在上图中所看到的那样，条形图在同一个xaxis点上一个接一个地移动。我想分开展示它们。请帮忙

谢谢大家

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问题

2 个答案: