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

zl程序教程

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

当前栏目

18Echarts - 折线图（Temperature Change in the coming week）

in The Change 折线图 Week
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 = {
				title: {
					text: '未来一周气温变化',
					subtext: '纯属虚构'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['最高气温', '最低气温']
				},
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} °C'
					}
				},
				series: [{
						name: '最高气温',
						type: 'line',
						data: [11, 11, 15, 13, 12, 13, 10],
						markPoint: {
							data: [{
									type: 'max',
									name: '最大值'
								},
								{
									type: 'min',
									name: '最小值'
								}
							]
						},
						markLine: {
							data: [{
								type: 'average',
								name: '平均值'
							}]
						}
					},
					{
						name: '最低气温',
						type: 'line',
						data: [1, -2, 2, 5, 3, 2, 0],
						markPoint: {
							data: [{
								name: '周最低',
								value: -2,
								xAxis: 1,
								yAxis: -1.5
							}]
						},
						markLine: {
							data: [{
									type: 'average',
									name: '平均值'
								},
								[{
									symbol: 'none',
									x: '90%',
									yAxis: 'max'
								}, {
									symbol: 'circle',
									label: {
										normal: {
											position: 'start',
											formatter: '最大值'
										}
									},
									type: 'max',
									name: '最高点'
								}]
							]
						}
					}
				]
			};

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

</html>

相关文章