某地区年平均温度显示图

最新推荐文章于 2024-08-18 18:35:15 发布

梦兮呀

最新推荐文章于 2024-08-18 18:35:15 发布

阅读量394

点赞数 8

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135349285

版权

采用折线图的方式来绘制某地区一年中的温度情况，以及年最高温度、最低温度和平均温度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>某地平均气温显示图</title>
		
		<script type="text/javascript"
			src="js/echarts.min.js" charset="utf-8"></script>
		<script src="js/jquery-1.11.2.min.js"></script>
			
	</head>
	<body>
		
		<div id="main" style="width: 900px;height: 600px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			
			var option = {
				// 图表的标题
				title:{
					text:'某地年平均气温显示图',
					x:'center',
					y:'top',
					//副标题
					subtext:'中国天气网',
					
				},
				// 图例
				legend:{
					show:'true',
					x:'right',
					y:'bottom',
				},
				// 提示框
				tooltip:{
					trigger:'axis',
					
				},
				// 工具栏
				toolbox:{
					    show: true,
					    feature: {
					      dataView: {
					        readOnly: false
					      },
					      magicType: {
					        type: ["line", "bar"]
					      },
					    }
				},
				// X轴
				xAxis: {
					scale: true,
					data:['一','二','三','四','五','六','七','八','九','十','十一','十二'],
				},
				// Y轴
				yAxis: {
					scale: true,
					type: 'value',
					axisLabel: {
						show:'true',
					      formatter: '{value} °C'
					    },
					interval:5,//强制设置坐标轴分割间隔
					min:-5,
					max:35,
					
				},
				series:[
					{
						name:'月平均最高温度',
						type:'line',
						color:'red',
						data:[],
						markLine:{
							data:[
								{
									name:'平均线',
									type:'average',
								}
							]
						},
						markPoint:{
							data:[
								{
								name:'最大值',
								type:'max',
							},
							]
						},
					},
					{
						name:'月平均最低温度',
						type:'line',
						stack: 'Total',
						color:'black',
						data:[],
						markLine:{
							data:[
								{
									name:'平均线',
									type:'average',
								}
							]
						},
						markPoint:{
							data:[
								{
								name:'最小值',
								type:'min',
								},
							]
						},
					}
				]
			};
			
			$.ajax({
							  url:'data/hfTemperatureData.json',
							  dataType:'json',
							  success:function(result){
							  	console.log(result);
								option.series[0].data = result.maxTemp;
								option.series[1].data = result.minTemp;
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							  }
			})
			
		</script>
		
		
	</body>
</html>