提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

23Echarts - 折线图（Step Line）

line 折线图 step
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			option = {
				title: {
					text: 'Step Line'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['Step Start', 'Step Middle', 'Step End']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: 'Step Start',
						type: 'line',
						step: 'start',
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: 'Step Middle',
						type: 'line',
						step: 'middle',
						data: [220, 282, 201, 234, 290, 430, 410]
					},
					{
						name: 'Step End',
						type: 'line',
						step: 'end',
						data: [450, 432, 401, 454, 590, 530, 510]
					}
				]
			};

			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章