Echarts中线状图的X轴坐标标签倾斜样式

时间:2022-10-12 05:57:12

在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的

http://www.cnblogs.com/phpgcs

比如下面的例子中 X轴是常用的日期格式 20140508 这样子

Echarts中线状图的X轴坐标标签倾斜样式

而经过简单的配置,可以达到一个理想的效果,如下

Echarts中线状图的X轴坐标标签倾斜样式

其中相关的需要配置的option参数为:

1. formatDate:function(datestring){
2. if(datestring.length!=8) return;
3. return datestring.substring(2,4)+'/'+datestring.substring(4,6)+'/'+datestring.substring(6,8);
4. },

01. xAxis : [
02. {
03. axisLabel: {
04. rotate: 60,
05. },
06. data : function(){
07. var list = [];
08. for (var in data) {
09. if (x != '')
10. list.push(App.formatDate(x));
11. }
12. return list;
13. }()
14. }
15. ],
16. grid: {
17. x: 40,
18. x2: 20,
19. y2: 100,
20. },

其中

axisLabel rotate: 60度角是倾斜的控制所在

grid: y2:100 可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上

list.push(App.formatDate(x));是处理 20140508 -> 140508