echarts例子

折线图–以时间作为横坐标

option={
title:{
text:'动态数据+时间坐标轴'
},
tooltip:{
trigger:'axis',
},
xAxis:{
type:'time',
splitLine:{
show:false
}
},
yAxis:{
type:'value',
boundaryGap:[0,'100%'],
splitLine:{
show:false
}
},
dataZoom: [{
            show: true,
            type: 'inside',
            filterMode: 'none',
            xAxisIndex: [0],
            start: 0,
            end: 100
        }, {
            show: true,
            type: 'inside',
            filterMode: 'none',
            yAxisIndex: [0],
            start: 0,
            end: 100
        }],
series:[{
name:'模拟数据',
type:'line',
showSymbol:false,
areaStyle: {},
hoverAnimation:false,
data:[[new Date('2012/09/01'),2],
[new Date('2012/09/02'),1],
[new Date('2012/09/03'),3],
[new Date('2012/09/04'),3],
[new Date('2012/09/05'),3],
[new Date('2012/09/06'),3],
[new Date('2012/09/07'),1]]
},{
name:'模拟数据2',
type:'line',
showSymbol:false,
areaStyle: {},
hoverAnimation:false,
data:[[new Date('2012/09/01'),2],
[new Date('2012/09/02'),15],
[new Date('2012/09/03'),34],
[new Date('2012/09/04'),36],
[new Date('2012/09/05'),35],
[new Date('2012/09/06'),34],
[new Date('2012/09/07'),15]]
},{
name:'模拟数据3',
type:'line',
showSymbol:false,
areaStyle: {},
hoverAnimation:false,
data:[[new Date('2012/09/01'),2],
[new Date('2012/09/02'),19],
[new Date('2012/09/03'),33],
[new Date('2012/09/04'),23],
[new Date('2012/09/05'),31],
[new Date('2012/09/06'),13],
[new Date('2012/09/07'),11]]
},{
name:'模拟数据4',
type:'line',
showSymbol:false,
areaStyle: {},
hoverAnimation:false,
data:[[new Date('2012/09/01'),9],
[new Date('2012/09/02'),6],
[new Date('2012/09/03'),8],
[new Date('2012/09/04'),10],
[new Date('2012/09/05'),7],
[new Date('2012/09/06'),5],
[new Date('2012/09/07'),1]]
}
]
};