柱狀圖X軸文字顯示不全

 

                                       解決echarts柱狀圖橫軸文字顯示不全

  在使用echarts圖表框架開發的過程中，當柱狀圖底部X軸文字過長時，將會出現文字顯示不全的問題。

  解決代碼演示：

  

<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
    <div id='${id}' style="width:${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>

 

 

  效果