【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(滚动条缩放)