解决ECharts 因X轴数据过多导致重叠显示不全的问题

X轴加滚动条
　　通过配置合适的起始位置和结束位置可以做到数据过多不重叠，数据太少也不至于很丑，定位合适的位置后还可以通过手动拉伸滚动条的长度动态的显示不同条目数，对于动态的条目数滚动条要比倾斜数据灵活太多尤其是根据时间段动态显示数据，仅此表示个人观点，强烈推荐。


option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}],dataZoom:{realtime:true, //拖动滚动条时是否动态的更新图表数据height:25,//滚动条高度start:40,//滚动条开始位置（共100等份）end:65//结束位置（共100等份）}
};

X轴类目名倾斜（Y轴同样适用）

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisLabel:{interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转}},yAxis: {type: 'value',axisLabel:{interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转}},grid: {left: '10%',//因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性bottom:'10%'// 分别表示：距离左边距和底部的距离，具体数值按实际情况调整},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}],};

X轴类目名竖排显示
参考：https://blog.csdn.net/kebi007/article/details/68488694

option = {xAxis: {type: 'category',data: ['Maf', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisLabel: {interval: 0,formatter:function(value){var ret = "";//拼接加\n返回的类目项var maxLength = 2;//每项显示文字个数var valLength = value.length;//X轴类目项的文字个数var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数if (rowN > 1)//如果类目项的文字大于3,{for (var i = 0; i < rowN; i++) {var temp = "";//每次截取的字符串var start = i * maxLength;//开始截取的位置var end = start + maxLength;//结束截取的位置//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧temp = value.substring(start, end) + "\n";ret += temp; //凭借最终的字符串}return ret;}else {return value;}}}},yAxis: {type: 'value',},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}],};

解决ECharts 因X轴数据过多导致重叠显示不全的问题相关推荐

解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
Echarts中折线图Y轴数据值太长显示不全-解决办法
正常状态不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况代码 <div id="c ...
Echarts在手机端y轴数据过大，显示不全
解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: 2, formatter: funct ...
Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果
目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...
使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间.vue-r ...
echarts中x轴刻度单位名称不显示完全
echarts中x轴刻度单位名称不显示完全 // 调整大小grid: {left: '3%',right: '13%',bottom: '3%',containLabel: true},
成功解决matplotlib绘图的时候横坐标或纵坐标文本显示不全/显示一半/显示不完整的问题
成功解决matplotlib绘图的时候横坐标或纵坐标文本显示不全/显示一半/显示不完整的问题目录解决问题解决思路解决方法解决问题成功解决matplotlib绘图的时候横坐标或纵坐标文本显示 ...
echarts图表 x轴文字过多几种处理方式
1.换行显示代码如下 // 换行显示formatter: function (value) {var ret = "";var maxLength = 4;var valLeng ...
Echarts将Y轴数据放入图表内，显示数据范围
将Y轴数据靠右,并且显示数据范围 option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', ...

解决ECharts 因X轴数据过多导致重叠显示不全的问题

解决ECharts 因X轴数据过多导致重叠显示不全的问题相关推荐

最新文章

热门文章