在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的
http://www.cnblogs.com/phpgcs
比如下面的例子中 X轴是常用的日期格式 20140508 这样子
而经过简单的配置,可以达到一个理想的效果,如下
其中相关的需要配置的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
x
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