vue下Echarts横轴坐标自适应防止x轴堆叠

爬~就en爬 / 2023-08-23 / 原文

vue下Echarts横轴坐标自适应防止x轴堆叠

1.关于查阅到的自适应大多是控制横坐标的间隔

        xAxis: {
          type: 'category',
          boundaryGap: false,
            data: aa,
            axisLabel: {
            //x轴文字的配置
            
            interval: n,//控制文字隔n个显示一个 
            rotate:40  
           }
           
        },

PS:这种方法在对于数据标注要求不高的情况下可以使用

2.进入正题(根据x轴坐标数量自适应初始化时候的x轴)

dataZoom: [{
          type: 'slider',  //放大缩小x轴数值
          show: true, //开启
          start: 0, //初始化时，滑动条宽度开始标度
            end:100/(xxxxx.length/n), //初始化时，滑动条宽度结束标度
            height:10,
            top:'96%'
            
        }],

PS: 'end:100/(xxxxx.length/20), //初始化时，滑动条宽度结束标度'

end参数是一个比例参数,整个x轴滑动条是一个100%的长度或是理解为100份,end为结束时所在的比例(end:10---->end所在位置为整个100份中的第十份)

xxxxx---->x轴数据 n---->想要显示的x轴刻度数量