配置项如下
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes()].join(":"),
Math.round(value)
]
};
}
var data = [];
var now = +new Date();
var oneDay = 24 * 3600 * 1000;
var oneMinute = 60 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
option = {
textStyle: {
fontSize: 24
},
tooltip: {},
xAxis: {
name: "Time Perioad",
nameLocation: "middle", // 你看这个,人家哪里说有 bottom 取值了 http://echarts.baidu.com/option.html#xAxis.nameLocation
nameGap: 50,
nameTextStyle: {
fontSize: "20px",
fontWeight: "bold",
fontStyle: "normal"
},
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
max: 'dataMax', // 限定 y 轴最大值为数据最大值,这样 MarkArea 就能到最大处
name: "Fatigue",
nameTextStyle: {
fontSize: "20px",
fontWeight: "normal",
fontStyle: "normal"
},
type: "value",
boundaryGap: [0, "100%"],
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data,
itemStyle: {
normal: {
color: '#199CD8',
borderColor: '#fff',
borderWith: 1,
shadowBlur: 2,
shadowOffsetX: 2,
shadowOffsetY: 5
}
},
lineStyle: {
normal: {
width: 2,
shadowColor: 'rgba(112, 155, 233, 0.5)',
shadowBlur: 4,
shadowOffsetY: 4
}
},
markLine: {
silent: true,
symbol: false,
label: false,
data: [{
yAxis: 100
}, {
yAxis: 400
}],
lineStyle: {
normal: {
type: "solid",
color: "#CE1C08"
}
}
},
markArea: {
itemStyle: {
normal: {
color: 'red',
borderColor: '#fff',
borderWith: 1,
shadowBlur: 2,
shadowOffsetX: 2,
shadowOffsetY: 5
}
},
data: [ // 原来这里少了一层 [ ]
[{
name: '两个屏幕坐标之间的标域',
yAxis: 0
}, {
yAxis: 200
}],
[{
name: 'xxx',
yAxis: 600
}, {
type: 'max'
}]
]
}
}]
};