解决echarts x轴数据太多造成重叠的问题_神经介质_echarts x轴数据太多

大大的周 02-07 3218

问题描述： 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 { // 鼠标拖动触发 } })