情况概述：
今天完成了对最高最低温度的可视化展示。
代码如下：
<%@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"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <% IWeatherService service = new WeatherServiceImpl(); IWeatherDao dao = new WeatherDaoImpl(); List<WeatherBean> weatherhighlow = new ArrayList<WeatherBean>(); List<WeatherBean> weathermid = new ArrayList<WeatherBean>(); weatherhighlow = (ArrayList<WeatherBean>) request.getAttribute("weatherhighlow"); weathermid = (ArrayList<WeatherBean>) request.getAttribute("weathermid"); //weathermid = service.queryAllWeathersByDateMid(20160606); %> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="../js/echarts.min.js"></script> <script src="../js/china.js"></script> <script src="../js/jquery-1.12.1.min.js"></script> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/jquery-1.12.1.min.js"></script> <title></title> <body> <!-- <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="container" style="height: 100%;100%"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var dom = document.getElementById("container"); var myChart = echarts.init(dom); // 秋雁南飞： // 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果 // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。 // 当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。 // http://echarts.baidu.com/option.html#series-map.geoIndex // 并且加了pin气泡图标以示数值大小 // // 全局变量区:参考江西绿色金融（谢谢：本来想用闭包实现接口数据调用，没时间了） var name_title = "日/最高最低温度" var subname = '' var nameColor = " rgb(55, 75, 113)" var name_fontFamily = '等线' var subname_fontSize = 15 var name_fontSize = 18 var mapName = 'china' var data = [ <%for (WeatherBean w : weathermid) {%> {name:"<%=w.getProvince().replace("省", "").replace("市", "")%>",value:<%=w.getMinD()%>}, <%}%> ]; var geoCoordMap = {}; var toolTipData = [ <%for (WeatherBean w : weatherhighlow) {%> {name:"<%=w.getProvince().replace("省", "").replace("市", "")%>",value:[{name:"最高温度",value:<%=w.getMaxD()%>},{name:"最低温度",value:<%=w.getMinD()%>}]}, <%}%> ]; /*获取地图数据*/ myChart.showLoading(); var mapFeatures = echarts.getMap(mapName).geoJson.features; myChart.hideLoading(); mapFeatures.forEach(function(v) { // 地区名称 var name = v.properties.name; // 地区经纬度 geoCoordMap[name] = v.properties.cp; }); // console.log("============geoCoordMap===================") // console.log(geoCoordMap) // console.log("================data======================") console.log(data) console.log(toolTipData) var max = 480, min = 9; // todo var maxSize4Pin = 100, minSize4Pin = 20; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }); } } return res; }; option = { title: { text: name_title, subtext: subname, x: 'center', textStyle: { color: nameColor, fontFamily: name_fontFamily, fontSize: name_fontSize }, subtextStyle:{ fontSize:subname_fontSize, fontFamily:name_fontFamily } }, tooltip: { trigger: 'item', formatter: function(params) { if (typeof(params.value)[2] == "undefined") { var toolTiphtml = '' for(var i = 0;i<toolTipData.length;i++){ if(params.name==toolTipData[i].name){ toolTiphtml += toolTipData[i].name+':<br>' for(var j = 0;j<toolTipData[i].value.length;j++){ toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>" } } } console.log(toolTiphtml) // console.log(convertData(data)) return toolTiphtml; } else { var toolTiphtml = '' for(var i = 0;i<toolTipData.length;i++){ if(params.name==toolTipData[i].name){ toolTiphtml += toolTipData[i].name+':<br>' for(var j = 0;j<toolTipData[i].value.length;j++){ toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>" } } } console.log(toolTiphtml) // console.log(convertData(data)) return toolTiphtml; } } }, // legend: { // orient: 'vertical', // y: 'bottom', // x: 'right', // data: ['credit_pm2.5'], // textStyle: { // color: '#fff' // } // }, visualMap: { show: true, min: -15, max: 35, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true, seriesIndex: [1], inRange: { // color: ['#3B5077', '#031525'] // 蓝黑 // color: ['#ffc0cb', '#800080'] // 红紫 // color: ['#3C3B3F', '#605C3C'] // 黑绿 // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑 // color: ['#23074d', '#cc5333'] // 紫红 color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#1488CC', '#2B32B2'] // 浅蓝 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 } }, /*工具按钮组*/ // toolbox: { // show: true, // orient: 'vertical', // left: 'right', // top: 'center', // feature: { // dataView: { // readOnly: false // }, // restore: {}, // saveAsImage: {} // } // }, geo: { show: true, map: mapName, label: { normal: { show: false }, emphasis: { show: false, } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7', } } }, series: [{ name: '散点', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function(val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: true }, emphasis: { show: true } }, itemStyle: { normal: { color: '#05C3F9' } } }, { type: 'map', map: mapName, geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: true }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, data: data }, { name: '点', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', //气泡 symbolSize: function(val) { var a = (maxSize4Pin - minSize4Pin) / (max - min); var b = minSize4Pin - a * min; b = maxSize4Pin - a * max; return a * val[2] + b; }, label: { normal: { show: true, textStyle: { color: '#fff', fontSize: 9, } } }, itemStyle: { normal: { color: '#F62157', //标志颜色 } }, zlevel: 6, data: convertData(data), }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function(a, b) { return b.value - a.value; }).slice(0, 5)), symbolSize: function(val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: 'yellow', shadowBlur: 10, shadowColor: 'yellow' } }, zlevel: 1 }, ] }; myChart.setOption(option); if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
servlet层
package com.zlc.servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.zlc.dao.IWeatherDao; import com.zlc.dao.impl.WeatherDaoImpl; import com.zlc.entity.WeatherBean; import com.zlc.service.IWeatherService; import com.zlc.service.impl.WeatherServiceImpl; /** * @author Zhao Lucang * @version 创建时间：2021年2月27日 下午1:06:40 * 类说明 */ public class WeatherSearch02 extends HttpServlet { /** * Constructor of the object. */ public WeatherSearch02() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 定义接收编码 request.setCharacterEncoding("UTF-8"); // 定义输出 response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); int Date=Integer.parseInt(request.getParameter("Date")); IWeatherService service = new WeatherServiceImpl(); IWeatherDao dao = new WeatherDaoImpl(); List<WeatherBean> weatherhighlow = new ArrayList<WeatherBean>(); List<WeatherBean> weathermid = new ArrayList<WeatherBean>(); weatherhighlow = service.queryAllWeathersByDateHighLow(Date); weathermid = service.queryAllWeathersByDateMid(Date); request.setAttribute("weatherhighlow", weatherhighlow); request.setAttribute("weathermid", weathermid); request.getRequestDispatcher("../Demo02.jsp").forward(request, response); //response.sendRedirect("../Demo02.jsp"); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }
结果如下：
