解决echarts x轴数据太多造成重叠的问题

最新推荐文章于 2025-04-15 14:41:36 发布

神经介质

最新推荐文章于 2025-04-15 14:41:36 发布

阅读量1.8w

点赞数 4

分类专栏： echarts Vue 文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_45850738/article/details/115691363

版权

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

当Echarts图表的X轴数据标签过多导致文字重叠时，可以通过dataZoom组件进行区域缩放，并结合axisLabel的formatter和rotate属性优化显示。在数据较少时正常展示，数据过多时调整标签角度，防止重叠。同时，动态监听dataZoom事件，根据缩放比例改变axisLabel的旋转角度，提供更好的阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述： x轴数据太多，且坐标轴标签文字较多，想要把数据全部展示出来会造成文字重叠。
解决思路： echarts提供了dataZoom组件用于区域缩放，但下载的截图只能体现当前展示的内容，可以做成默认正常展示前几个，收缩到一定程度的时候改变axisLabel的角度，斜着展示。
在这里插入图片描述

解决步骤：

控制展示文字长度，设置axisLabel，如果字符串长度大于6，则中间的内容用‘…’代替

myOption.xAxis.axisLabel = {
	show: true,
    interval: 0,
    rotate: 0,
    formatter: function(value) {
      let val = value.length > 6 ? value.substr(0, 3) + "..." + value.substr(value.length - 3, value.length - 1) : value;
      return val;
    },
}

设置dataZoom，根据x轴数据的多少控制dataZoom是否展示和有效

let count = 6;
let showDataZoom = chartInfo.xData.length <= count ? false : true;
let settingEnd = (count / chartInfo.xData.length) * 100;
myOption.dataZoom = [
    {
        show: showDataZoom,  // 是否展示
        xAxisIndex: [0],  // 控制第一个x轴
        height: 15,
        left: 100,
        right: 100,
        bottom: 0,
        start: 0,  // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end: settingEnd,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        handleSize: "110%",
        zoomLock: true, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true
    },
    {
        type: "inside",  // 内置型数据区域缩放组件，用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
        show: showDataZoom,
        disabled: !showDataZoom,  // 是否停止组件的功能
        height: 15,
        left: 100,
        right: 100,
        start: 0,
        end: settingEnd,
    },
];

监听缩放事件，当收缩到一定程度的时候（end >= settingEnd），改变axisLabel的旋转角度rotate，根据不同的触发方式，会产生两种类型的参数。滚轮滚动时获取到的参数是一个对象，对象中的batch属性是一个数组，需要获取的end和start在数组第一项中的对象中；鼠标拖动时获取到的也是一个对象，但可以在对象中直接获取end和start的值。

滚轮滚动触发的‘dataZoom’事件参数：

鼠标拖动触发的‘dataZoom’事件参数：

鼠标滚轮滚动时缩放，将获取到的数值赋值给设置的myOption.dataZoom的end属性，start属性设置为0，确保缩放的时候start为0不变，只变更end的值。当end大于等于设定的settingEnd时，设置axisLable旋转角度为35，小于时复原。

myChart.on('dataZoom', params => {
	//consoloe.log(params)
    let start = 0;
    let end = 0;
    if(params.batch) {
    	// 鼠标滚轮触发
        start = 0;
        end = params.batch[0].end;
        myOption.dataZoom[0].start = start;
        myOption.dataZoom[0].end = end;
        myOption.dataZoom[1].start = start;
        myOption.dataZoom[1].end = end;
        if(end >= settingEnd) {
            myOption.xAxis[0].axisLabel.rotate = 35;
        } else {
            myOption.xAxis[0].axisLabel.rotate = 0;
        }
        myChart.setOption(myOption);
    } else {
    	// 鼠标拖动触发
    }
})