echarts组件x轴坐标显示不全解决方法

1.旋转: 

修改前: 

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

修改后:

option = {
  xAxis: {
    type: 'category',
    axisLabel: { 
      rotate: 45
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

效果: 

 2.隔行隐藏

 

option = {

xAxis: {

type: 'category',

data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

axisLabel: {

interval: 2 // 每隔两个标签显示一次

}

},

yAxis: {

type: 'value'

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320, 1500, 1200, 1100, 950, 1000],

type: 'line'

}]

};

 3.x轴增加滚动

    // dataZoom: [

    //   {

    //     type: "slider", //给x轴设置滚动条

    //     show: true, //flase直接隐藏图形

    //     xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],

    //     bottom: 0,

    //     height: 6,

    //     showDetail: false,

    //     startValue: 0, //滚动条的起始位置

    //     endValue: 4, //滚动条的截止位置（按比例分割你的柱状图x轴长度）

    //   },

    // ],