<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>新型冠状病毒肺炎实时地图</title> <style> #main { margin: 20px auto; /* 外边距 */ 1000px; height: 720px; } </style> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> </head> <body> <div id="main"></div> </body> <script> var myChart = echarts.init(document.getElementById('main')); var dataList = []; <c:if test="${!empty courses}"> <c:forEach items="${courses}" var="item"> var obj = { name: "${item.local}", value: "${item.num}" }; dataList.push(obj); </c:forEach> </c:if> /* window.dataList = [ <c:forEach items="${courses}" var="item"> alert("${item.num}");{ name: "${item.local}", value: "${item.num}" }, </c:forEach> ]; */ option = { tooltip: { triggerOn: "click", formatter: function(e, t, n) { return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value } }, visualMap: { min: 0, max: 1000, left: 26, bottom: 40, showLabel: !0, text: ["高", "低"], pieces: [{ gt: 50, label: "> 50 人", color: "#7f1100" }, { gte: 10, lte: 50, label: "10 - 50 人", color: "#ff5428" }, { gte: 1, lt: 10, label: "1 - 9 人", color: "#ff8c71" }, { gt: 0, lt: 1, label: "疑似", color: "#ffd768" }, { value: 0, color: "#ffffff" }], show: !0 }, geo: { map: "china", roam: !1, scaleLimit: { min: 1, max: 2 }, zoom: 1.23, top: 120, label: { normal: { show: !0, fontSize: "14", color: "rgba(0,0,0,0.7)" } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: 'rgba(0, 0, 0, 0.2)', borderColor: "rgba(0, 0, 0, 0.2)" }, emphasis: { areaColor: "#f2d5ad", shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } }, series: [{ name: "用户分布", type: "map", geoIndex: 0, data: dataList }] }; myChart.setOption(option); </script> </html>
中国地图，毕设研社区用户位置显示
传值关键代码：
var dataList = []; <c:if test="${!empty courses}"> <c:forEach items="${courses}" var="item"> var obj = { name: "${item.local}", value: "${item.num}" }; dataList.push(obj); </c:forEach> </c:if>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>新型冠状病毒肺炎实时地图</title> <style> #main { margin: 20px auto; /* 外边距 */ 1000px; height: 720px; } </style> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> </head><body><div id="main"></div></body><script>var myChart = echarts.init(document.getElementById('main'));
var dataList = [];<c:if test="${!empty courses}"><c:forEach items="${courses}" var="item">var obj = {name: "${item.local}", value: "${item.num}"};dataList.push(obj);</c:forEach></c:if>/*window.dataList = [<c:forEach items="${courses}" var="item">alert("${item.num}");{ name: "${item.local}", value: "${item.num}"},</c:forEach>
];*/option = {tooltip: { triggerOn: "click", formatter: function(e, t, n) { return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value }},visualMap: { min: 0, max: 1000, left: 26, bottom: 40, showLabel: !0, text: ["高", "低"], pieces: [{ gt: 50, label: "> 50 人", color: "#7f1100" }, { gte: 10, lte: 50, label: "10 - 50 人", color: "#ff5428" }, { gte: 1, lt: 10, label: "1 - 9 人", color: "#ff8c71" }, { gt: 0, lt: 1, label: "疑似", color: "#ffd768" }, { value: 0, color: "#ffffff" }], show: !0},geo: { map: "china", roam: !1, scaleLimit: { min: 1, max: 2 }, zoom: 1.23, top: 120, label: { normal: { show: !0, fontSize: "14", color: "rgba(0,0,0,0.7)" } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: 'rgba(0, 0, 0, 0.2)', borderColor: "rgba(0, 0, 0, 0.2)" }, emphasis: { areaColor: "#f2d5ad", shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } }},series: [{ name: "用户分布", type: "map", geoIndex: 0, data: dataList}]};
myChart.setOption(option);</script></html>