情况概述:
今天对天气查询进行处理,对气温进行追踪,并展示。
代码如下:
<%@page import="com.zlc.entity.WeatherBean"%> <%@page import="com.zlc.dao.IWeatherDao"%> <%@page import="com.zlc.service.IWeatherService"%> <%@page import="com.zlc.dao.impl.WeatherDaoImpl"%> <%@page import="com.zlc.service.impl.WeatherServiceImpl"%> <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% IWeatherService service = new WeatherServiceImpl(); IWeatherDao dao = new WeatherDaoImpl(); List<WeatherBean> weathers = new ArrayList<WeatherBean>(); weathers = (ArrayList<WeatherBean>) request.getAttribute("weathers"); //weathers = service.queryAllWeathersByCityDate("北京", 20160606); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="../js/echarts.min.js"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> <title></title> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style=" 1200px;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 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: [<%for (WeatherBean w : weathers) {%> <%=w.getDate()%>, <%}%>] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name: '最高气温', type: 'line', data: [<%for (WeatherBean w : weathers) {%> <%=w.getMaxD()%>, <%}%>], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name: '最低气温', type: 'line', data: [ <%for (WeatherBean w : weathers) {%> <%=w.getMinD()%>, <%}%>], /* markPoint: { data: [ {name: '最低温度', value: -2, xAxis: 1, yAxis: -1.5} ] }, */ markLine: { data: [ {type: 'average', name: '平均值'}, [{ symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { position: 'start', formatter: '最大值' }, type: 'max', name: '最高点' }] ] } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
结果如下: