<!DOCTYPE html><html><head><meta charset="UTF-8"><title>带时间轴的折线图</title><script src="///echarts/3.4.0/echarts.min.js"></script></head><body><div id="chart" style="width: 100%;height: 500px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('chart'));// 指定图表的配置项和数据option = {title : {text: '带时间轴的折线图',subtext: '带时间轴的折线图',x: 'center',align: 'right'},grid: {bottom: 80},toolbox: {feature: {saveAsImage: {}}},tooltip : {trigger: 'axis',axisPointer: {animation: false}},dataZoom: [{show: true,realtime: true,start: 65,end: 85},{type: 'inside',realtime: true,start: 65,end: 85}],//x轴时间轴xAxis : [{type : 'category',data : ['/6/12 2:00', '/6/12 3:00', '/6/12 4:00', '/6/12 5:00', '/6/12 6:00', '/6/12 7:00', '/6/12 8:00', '/6/12 9:00', '/6/12 10:00', '/6/12 11:00'].map(function (str) {return str.replace(' ', '\n')})}],yAxis: [{name: '流量(m^3/s)',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>
效果图：
