【ECharts】x軸文字顯示不完全+滾動顯示

一、功能介紹

      通過ECharts柱狀圖展示數據時，由於x軸數據過多，會導致柱狀圖中的寬度太小，從而導致柱狀圖中x軸座標顯示不完全。如果x軸左邊顯示完全，由於柱狀圖中x軸橫座標過長，會導致文字重疊，從而無法使用戶直觀的查看x軸上的橫座標數據。

      綜上所述：會存在以下兩種情況：

圖1 橫軸座標顯示不完整

圖2 橫座標信息重疊

      通過滑動顯示，可以很好的避免上述問題的發生。

二、解決辦法

      在Echarts中的Option中添加以下代碼：

           xAxis: [
                {
                    type: 'category',
                    name: '分組項',
                    data: data1,
                    axisLabel:{
                        interval:0,//橫軸信息全部顯示
                        rotate:-20,// -20度角傾斜顯示
                    }

                }
            ],

           dataZoom: [{
                type: 'slider',
                show: true, //flase直接隱藏圖形
                xAxisIndex: [0],
                left: '9%', //滾動條靠左側的百分比
                bottom: -5,
                start: 0,//滾動條的起始位置
                end: 20 //滾動條的截止位置（按比例分割你的柱狀圖x軸長度）
            }],

三、效果展示

效果展示圖1

效果展示圖2(滾動條縮放)