带时间轴的折线图
2019-03-21 本文已影响0人
郭先生_515
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.20折线图数据</title>
<script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
</head>
<body>
<button id="btn">click</button>
<div id="chart" style="width: 100%; height: 600px;"></div>
<script type="text/javascript">
document.getElementById('btn').onclick=function() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
option = {
title : {
text: '8.20折线图数据',
// subtext: '8.20折线图数据',
x: 'center',
align: 'right'
},
grid: {
bottom: 80
},
toolbox: {
feature: {
saveAsImage: {}
}
},
tooltip : {
trigger: 'axis',
axisPointer: {
animation: false
}
},
dataZoom: [
// 默认撑满时间轴；
{
startValue: '0'
},
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
],
//x轴时间轴
xAxis : [
{
type : 'category',
data : [
'2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00'
].map(function (str) {
return str.replace(' ', '\n')
})
}
],
yAxis: [
{
name: '流量',
type: 'value'
}
],
//y轴
series: [
{
name:'流量',
type:'line',
animation: false,
// 只要线，不要线下的阴影部分
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
data:[
100.97,20.96,300.96,40.95,300.95,20.94,50.94,360.94,80.94,100.94
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//自适应
window.onresize = myChart.resize;
}
</script>
</body>
</html>
