带时间轴的折线图echart

最新推荐文章于 2024-05-31 18:04:07 发布

包子源

最新推荐文章于 2024-05-31 18:04:07 发布

阅读量1.1w

点赞数 2

分类专栏： javascript 文章标签：实例 javascript web前端

本文链接：https://blog.csdn.net/ziwoods/article/details/59053183

版权

javascript 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>带时间轴的折线图</title>
		<script src="//cdn.bootcss.com/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 : [
			                '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: '流量(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>

效果图：

包子源

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
带时间轴的折线图echart

带时间轴的折线图 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 option = { title : { text: '带时间轴的折线图',
复制链接

扫一扫