柱状图X轴文字显示不全

                                       解决echarts柱状图横轴文字显示不全

  在使用echarts图表框架开发的过程中，当柱状图底部X轴文字过长时，将会出现文字显示不全的问题。

  解决代码演示：

  

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id='${id}' style="${width}px;height:${height}px"></div>
    
    <script type="text/javascript">
    var dom = document.getElementById('${id}');
    var myChart = echarts.init(dom,'macarons');
    var app = {};



var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            },
            label:{
                default: 2
                }
        }
    },
   toolbox: {
        feature: {
         // dataView: {show: true, readOnly: false},
          //magicType: {show: true, type: ['line', 'bar']},
           //restore: {show: true},
          //saveAsImage: {show: true}
        },
        right:'3%'
   },
    legend: {
        left:'2%',
        data:['同期销售金额','销售金额','同比增长率']
    },
      grid: { // 控制图的大小，调整下面这些值就可以，
        x: 50,//控制x轴文字与底部的距离
         y2: 150 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
        },
    xAxis: [
        {
            type: 'category',
            data: ${cpx},//['CPS','LS','MD','TD','其他'],
            axisPointer: {
                type: 'shadow'
            },
             axisLabel:{
                  interval:0,
                  rotate:-45,//倾斜度 -90 至 90 默认为0
                  margin:2,
                  textStyle:{
                   
                fontSize: 9,//横轴字体大小
                    color:"#000000"
                  }
                }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '金额/百万',
            min: 0,
            max: 20,
            interval: 4,
            splitLine:{show:  true},
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '同比增长率',
            min: -20,
            max: 100,
            interval: 24,
            splitLine:{show: true},
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
        {
            name:'同期销售金额',
            type:'bar',
             itemStyle:{
                                    normal:{
                                        color:'#7BC9EA',
                                         barBorderRadius: [3, 3, 0, 0],
                },
                 //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              emphasis: {
                          barBorderRadius: 30
             }
                
               },
            data:${xsmb}
            
        },
        {
            name:'销售金额',
            type:'bar',
            itemStyle:{
                                    normal:{
                                        color:'#B194D1',
                                         barBorderRadius: [3, 3, 0, 0],
                                    }
               },
               
            data:${xsdc}
        },
        {
            name:'同比增长率',
            type:'scatter',
            yAxisIndex: 1,
itemStyle:{
                                    normal:{
                                        color:'#FDA029'
                                       
                                    }
               },
            data:${dc} // #FF7256
        }
    ]
};

myChart.setOption(option);
</script>

  效果