echarts中，橫軸數據如果非常多，會自動隱藏一部分數據，我們可以通過屬性interval來進行調整。
如下圖，當橫軸時間為13天時，echarts會自動隔天顯示
如果我們想顯示全，則需要在xAxis 屬性加上axisLabel:{interval: 0}
|
1
2
3
4
5
6
|
"xAxis"
:[{
"data"
:[
"2015-5-13"
,
"2015-5-14"
,
"2015-5-15"
,
"2015-5-16"
,
"2015-5-17"
,
"2015-5-18"
,
"2015-5-19"
,
"2015-5-20"
,
"2015-5-21"
,
"2015-5-22"
,
"2015-5-23"
,
"2015-5-24"
,
"2015-5-25"
],
"type"
:
"category"
,
"axisLabel"
:{
interval: 0
}
}],
|
效果如下：
查看echarts官網的文檔，可以得知：
補充知識：Echarts X軸內容過長自動隱藏，鼠標移動上去顯示全部
使用echarts圖表做頁面展示的時候，當X軸內容過長時，之前一直用的 '\n' 換行(將字符串根據需要分成兩行來展示)，這樣有很大的局限性（如內容過長的話 分成兩行也放不下，而且也會影響美觀），后來發現可以通過設置自動隱藏,鼠標移動上去顯示全部名稱的方法 來做，效果會更好。
1. 首先在 x軸上添加 triggerEvent: true。如下紅色部分：
xAxis: {
data: result.nameList,
silent: false,
triggerEvent: true,
axisLine: {
onZero: true,
show: true,
lineStyle: {
color: '#90979c' // x 軸線最下面的橫坐標線的顏色
}
},
splitLine: {show: false},
splitArea: {show: false},
axisLabel: {
interval: 0,//設置橫坐標為斜
rotate: 30,//文字傾斜角度
formatter: function (value) {
if (value.length > 10) {
value = value.substring(0, 9) + "..";
}
return value;
},
textStyle: {
color: '#666',
fontSize: '12'
}
},
},
2. 自定義x軸上顯示的內容長度。如上面代碼段中的藍色部分。
3. 自定義一個 鼠標懸浮事件方法，並調用。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
function
extensionOne(myChart) {
var
id = document.getElementById(
"extensionOne"
);
//判斷是否創建過div框,如果沒有創建過，則創建。（創建時，默認隱藏）
if
(!id) {
var
div =
"<div id = 'extensionOne' sytle=\"display:none\"></div>"
;
$(
'html'
).append(div);
}
var
arrow_left =
'20px'
;
//鼠標懸浮事件
myChart.on(
'mouseover'
,
function
(params) {
if
(params.componentType !=
"xAxis"
) {
return
;
}
//設置div框樣式，並為其填充值。
$(
'#extensionOne'
).css({
"position"
:
"absolute"
,
"color"
:
"#90979c"
,
// "border": "solid 0px white",
"font-family"
:
"Arial"
,
"font-size"
:
"14px"
,
"padding"
:
"5px"
,
"display"
:
"inline"
}).text(params.value);
var
xx_text = params.event.offsetX - 35;
arrow_left = xx_text;
$(
"#talentDemandDistribution"
).mousemove(
function
(event) {
// console.log("X軸坐標：" + event.pageX + " Y軸坐標：" + event.pageY);
var
xx = event.pageX - 30;
var
yy = event.pageY + 10;
$(
'#extensionOne'
).css(
'top'
, yy).css(
'left'
, xx);
});
});
myChart.on(
'mouseout'
,
function
(params) {
$(
'#extensionOne'
).css(
'display'
,
'none'
);
});
}
{
...
...
var
chart = echarts.init(document.getElementById(
'talentDemandDistribution'
));
chart.setOption(option);
//在echarts 初始化完成后，調用自定義的鼠標懸浮事件方法
extensionOne(chart);
}
|