android时间轴折线图,带时间轴的折线图

8.20折线图数据

click

document.getElementById('btn').οnclick=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;

}