关键词:
本项目需要用到的时echarts,接下来展示文件目录
接下来展示各个文件的内容
base文件内容:
package three; public class base String value; String name; public String getValue() return value; public void setValue(String value) this.value = value; public String getName() return name; public void setName(String name) this.name = name;
base1文件内容
package three; public class base1 String name; String value; public String getName() return name; public void setName(String name) this.name = name; public String getValue() return value; public void setValue(String value) this.value = value;
base3date文件内容:
package three; public class base3date public static String date;
Get文件内容:
package three; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import db.DBUtil; public class Get public static List<base> find(String table,String id) List<base> list=new ArrayList<base>(); boolean c; String str[]="辽宁省","吉林省","黑龙江省","河北省","山西省","陕西省","山东省","安徽省","江苏省","浙江省","河南省","湖北省","湖南省","江西省","台湾","福建省","云南省","海南省","四川省","贵州省","广东省","甘肃省","青海省","西藏自治区","新疆维吾尔自治区","广西壮族自治区","内蒙古自治区","宁夏回族自治区 ","北京市","天津市","上海市","重庆市","香港","澳门" ; String str0[]="辽宁","吉林","黑龙江","河北","山西","陕西","山东","安徽","江苏","浙江","河南","湖北","湖南","江西","台湾","福建","云南","海南","四川","贵州","广东","甘肃","青海","西藏","新疆","广西","内蒙古","宁夏 ","北京","天津","上海","重庆","香港","澳门" ; int num[]=new int[34]; for(int i=0;i<34;i++) num[i]=0; Connection conn=DBUtil.getConn(); Statement state=null; try state=conn.createStatement(); String sql="select * from "+table+" where Date =‘"+id+"‘"; ResultSet rs=state.executeQuery(sql); while(rs.next()) if(!(rs.getString(3).equals("")||rs.getString(3)==null)&&(rs.getString(4).equals("")||rs.getString(4)==null)) for(int i=0;i<34;i++) if(str[i].equals(rs.getString(3))) int s=Integer.parseInt(rs.getString(5)); num[i]+=s; rs.close(); state.close(); conn.close(); for(int i=0;i<34;i++) base b=new base(); b.setName(str0[i]); b.setValue(num[i]+""); list.add(b); System.out.println("over"); catch(Exception e) return list; public static List<base1> find(String table,String id,String shengfen) List<base1> list=new ArrayList<base1>(); boolean c; String str[]="辽宁省","吉林省","黑龙江省","河北省","山西省","陕西省","山东省","安徽省","江苏省","浙江省","河南省","湖北省","湖南省","江西省","台湾","福建省","云南省","海南省","四川省","贵州省","广东省","甘肃省","青海省","西藏自治区","新疆维吾尔自治区","广西壮族自治区","内蒙古自治区","宁夏回族自治区 ","北京市","天津市","上海市","重庆市","香港","澳门" ; Connection conn=DBUtil.getConn(); Statement state=null; try state=conn.createStatement(); String sql="select * from "+table+" where Date =‘"+id+"‘ and Province = ‘"+shengfen+"‘"; ResultSet rs=state.executeQuery(sql); System.out.println("城市"); while(rs.next()) if(!(rs.getString(3).equals("")||rs.getString(3)==null)&&!(rs.getString(4).equals("")||rs.getString(4)==null)) System.out.println(rs.getString(4)); System.out.println(rs.getString(5)); base1 b=new base1(); b.setName(rs.getString(4)); b.setValue(rs.getString(5)); list.add(b); rs.close(); state.close(); conn.close(); System.out.println("over"); catch(Exception e) return list;
Province文件内容:
package three; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import two.base2date; /** * Servlet implementation class Province */ @WebServlet("/Province") public class Province extends HttpServlet private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public Province() super(); // TODO Auto-generated constructor stub protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException arg1.setContentType("text/html;charset=utf-8"); arg0.setCharacterEncoding("utf-8"); arg1.setCharacterEncoding("utf-8"); String str[]="辽宁省","吉林省","黑龙江省","河北省","山西省","陕西省","山东省","安徽省","江苏省","浙江省","河南省","湖北省","湖南省","江西省","台湾","福建省","云南省","海南省","四川省","贵州省","广东省","甘肃省","青海省","西藏自治区","新疆维吾尔自治区","广西壮族自治区","内蒙古自治区","宁夏回族自治区 ","北京市","天津市","上海市","重庆市","香港","澳门" ; String str0[]="辽宁","吉林","黑龙江","河北","山西","陕西","山东","安徽","江苏","浙江","河南","湖北","湖南","江西","台湾","福建","云南","海南","四川","贵州","广东","甘肃","青海","西藏","新疆","广西","内蒙古","宁夏 ","北京","天津","上海","重庆","香港","澳门" ; System.out.println("!!!!!!!"); String shengfen=arg0.getParameter("shengfen"); String date=base3date.date; String shengfen0=arg0.getParameter("shengfen0"); System.out.println(shengfen); System.out.println(shengfen0); for(int i=0;i<34;i++) if(shengfen.equals(str0[i])) shengfen=str[i]; break; List<base1> list = Get.find("info", date, shengfen); arg0.setAttribute("mapDataJson", JSONArray.fromObject(list)); arg0.setAttribute("province", shengfen0); arg0.getRequestDispatcher("Three/NewFile1.jsp").forward(arg0, arg1); /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException // TODO Auto-generated method stub response.getWriter().append("Served at: ").append(request.getContextPath()); /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException // TODO Auto-generated method stub doGet(request, response);
Three文件内容:
package three; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import two.Get; import two.TwoBean; import two.base2date; /** * Servlet implementation class Three */ @WebServlet("/Three") public class Three extends HttpServlet private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public Three() super(); // TODO Auto-generated constructor stub protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException arg0.setCharacterEncoding("utf-8"); arg1.setCharacterEncoding("utf-8"); String str[]="辽宁省","吉林省","黑龙江省","河北省","山西省","陕西省","山东省","安徽省","江苏省","浙江省","河南省","湖北省","湖南省","江西省","台湾","福建省","云南省","海南省","四川省","贵州省","广东省","甘肃省","青海省","西藏自治区","新疆维吾尔自治区","广西壮族自治区","内蒙古自治区","宁夏回族自治区 ","北京市","天津市","上海市","重庆市","香港","澳门" ; String str0[]="辽宁","吉林","黑龙江","河北","山西","陕西","山东","安徽","江苏","浙江","河南","湖北","湖南","江西","台湾","福建","云南","海南","四川","贵州","广东","甘肃","青海","西藏","新疆","广西","内蒙古","宁夏 ","北京","天津","上海","重庆","香港","澳门" ; String shengfen = arg0.getParameter("shengfen"); System.out.println("生风:"+shengfen); TwoBean tb=new TwoBean(); Get g=new Get(); for(int i=0;i<32;i++) if(shengfen.equals(str0[i])) tb=g.find1("info", base2date.date, str[i]); System.out.println(tb.getQuezhen()); Gson gson = new Gson(); String json = gson.toJson(tb); try arg1.getWriter().println(json); catch (Exception e) e.printStackTrace(); finally arg1.getWriter().close(); /* * map = new HashMap<String, Object>(); map.put("name","河北"); * map.put("value",2400); list.add(map); */ /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException // TODO Auto-generated method stub response.getWriter().append("Served at: ").append(request.getContextPath()); /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException // TODO Auto-generated method stub doGet(request, response);
ThreeServlet文件内容:
package three; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; /** * Servlet implementation class ThreeServlet */ @WebServlet("/ThreeServlet") public class ThreeServlet extends HttpServlet private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public ThreeServlet() super(); // TODO Auto-generated constructor stub protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException arg1.setContentType("text/html;charset=utf-8"); arg0.setCharacterEncoding("utf-8"); arg1.setCharacterEncoding("utf-8"); String date=arg0.getParameter("date"); base3date.date=date; List list=Get.find("info", date); arg0.setAttribute("mapDataJson", JSONArray.fromObject(list)); /* * List<TwoBean> all=Get.find1("info", date); Gson gson = new Gson(); String * json = gson.toJson(all); arg0.setAttribute("message", json); */ arg0.getRequestDispatcher("Three/NewFile.jsp").forward(arg0, arg1); /*map = new HashMap<String, Object>(); map.put("name","河北"); map.put("value",2400); list.add(map);*/ /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException // TODO Auto-generated method stub response.getWriter().append("Served at: ").append(request.getContextPath()); /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException // TODO Auto-generated method stub doGet(request, response);
NewFile文件内容:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script src="$pageContext.request.contextPath/js/echarts.min.js"></script> <script src="$pageContext.request.contextPath/js/jquery-1.8.3.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <div id="mainMap" style="height:300px;width:600px;"></div> <form action="$pageContext.request.contextPath/ThreeServlet"method="post"style="margin-top:450px"> <p>请按照给定的样例输入<input type="text"placeholder="2020-02-08 02:28:59"name="date"style="width:300px;height:80"><span><input type="submit" value="查询"style="width:120px;height:35px;margin-left:400px;background-color:#bdd7f2"></span></p> </form> <script type="text/javascript"> var str0=["辽宁","吉林","黑龙江","河北","山西","陕西","山东","安徽","江苏","浙江","河南","湖北","湖南","江西","台湾","福建","云南","海南","四川","贵州","广东","甘肃","青海","西藏","新疆","广西","内蒙古","宁夏 ","北京","天津","上海","重庆","香港","澳门"]; var str1=["liaoning","jilin","heilongjiang","hebei","shanxi","shanxi1","shandong","anhui","jiangsu","zhejiang","henan","hubei","hunan","jiangxi","taiwan","fujian","yunnan","hainan","sichuan","guizhou","guangdong","gansu","qinghai","xizang","xinjiang","guangxi","neimenggu","ningxia","beijing","tianjin","shanghai","chongqing","xianggang","aomen"]; var province; var province0; var mapDataJson=‘$mapDataJson‘; var json=JSON.parse(mapDataJson); var quezhen; var yisi; var zhiyu; var siwang; // 路径配置 require.config( paths: echarts: ‘http://echarts.baidu.com/build/dist‘ ); // 使用 require( [ ‘echarts‘, ‘echarts/chart/map‘ // 使用柱状图就加载bar模块,按需加载 ], function (ec) // 基于准备好的dom,初始化echarts图表 var myChart_map = ec.init(document.getElementById(‘mainMap‘)); var itemStyle = normal:label: show:true, formatter:‘b‘, textStyle: fontSize: 10,fontWeight : ‘bold‘ , emphasis:label:show:true ; var option_map = title : text: ‘‘, subtext: ‘应用使用次数‘, x:‘center‘ , tooltip : trigger: ‘item‘ , legend: orient: ‘vertical‘, x:‘left‘, data:[‘次数‘] , dataRange: min: 0, max: 2500, x: ‘left‘, y: ‘bottom‘, text:[‘高‘,‘低‘], // 文本,默认为数值文本 calculable : true , series : [ name: ‘总数‘, type: ‘map‘, mapType: ‘china‘, roam: false, // itemStyle: // normal:label:show:true, // emphasis:label:show:true // , itemStyle: itemStyle, data:getData() ] ; //option_map.series[0].data=json; // 为echarts对象加载数据 myChart_map.setOption(option_map); myChart_map.on(‘click‘, function (params) var city = params.name; alert(city); var now=new Date().getTime(); var params = ; params["shenfen"] = city; var option = myChart_map.getOption(); option.series[0].map = city; for(var i=0;i<34;i++) if(str0[i]==city) province0=str1[i]; province=str0[i]; break; var url="Province?shengfen0="+province0+"&shengfen="+province; window.location.href = url; /* $.getJSON("Message", shengfen: city, function(json) alert("确诊人数:"+json.quezhen+" 疑似人数:"+json.yisi+" 治愈人数:"+json.zhiyu+" 死亡人数:"+json.siwang); ); */ ); ); function getData() return json; </script> </body> </html>
NewFile1文件内容:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>Echarts Map</title> <style> #app width: 1000px; height: 500px; </style> </head> <body> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script> var mapDataJson=‘$mapDataJson‘; var json=JSON.parse(mapDataJson); var province=‘<%=request.getAttribute("province")%>‘; axios.get(‘json/‘+province+‘.json‘).then((data) => echarts.registerMap(province, data.data) let chart = echarts.init(document.getElementById(‘app‘)) var itemStyle = normal:label: show:true, formatter:‘b‘, textStyle: fontSize: 10,fontWeight : ‘bold‘ , emphasis:label:show:true ; var option_map = title : text: ‘‘, subtext: ‘确诊人数‘, x:‘center‘ , tooltip : trigger: ‘item‘ , legend: orient: ‘vertical‘, x:‘left‘, data:[‘次数‘] , dataRange: min: 0, max: 2500, x: ‘left‘, y: ‘bottom‘, text:[‘高‘,‘低‘], // 文本,默认为数值文本 calculable : true , series : [ name: ‘总数‘, type: ‘map‘, map: province, roam: false, // itemStyle: // normal:label:show:true, // emphasis:label:show:true // , itemStyle: itemStyle, data:getData() ] ; //option_map.series[0].data=json; // 为echarts对象加载数据 chart.setOption(option_map); ); function getData() return json; </script> </body> </html>
数据库部分内容截图:
在实现了柱状图和普通地图之后这个下钻就是在普通地图的基础之上添加一个点击事件然后进行更新跳转。
还有就是echarts没有自带市级的地图所以我们还要从网上找他的js文件或者json文件我就是找了大半天看到的。
echart中国地图下钻实现代码(代码片段)
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@pageisELIgnored="false"%><%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>... 查看详情
vue+echarts+geojson+makeapie实现地图下钻和数据显示(代码片段)
...实现过程:1、下载json:地址: https://hxkj.vip/demo/echartsMap/或者:EasyMap 下载的有的并非是严格的json文件,选用用 json.cn 进行转换2、vue文件中引入json 查看详情
vue+echarts4.x地图下钻/散点分布以及热力图
...面的小伙伴一些参考,如果帮到你请点赞d=====( ̄▽ ̄*)b中国地图下显示为热力图,显示精确分布点只是demo所以数据是自己写的假数据只有几条点击进入省份地图,在地图之外还有那个小箭头是数据的原因不是bug改下数据就好先... 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;做一个展示中国城市的下钻地图使用:Vue3ViteTypescriptecharts实现效果:准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-compone 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;做一个展示中国城市的下钻地图使用:Vue3ViteTypescriptecharts实现效果:准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-compone 查看详情
使用echarts实现一个可拖拽缩放的立体地图
...据全新的需求重构一个老的项目,首页需要做一个立体的中国地图,原先的平面地图使用的是高德与echarts结合,地图用高德,点用echarts,而现在要做立体的地图,并且不需要世界地图的背景,于是我直接放弃了高德直接改全部... 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;做一个展示中国城市的下钻地图使用:Vue3ViteTypescriptecharts实现效果:准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-component--templatevue-ts命令创建出项目在项目的配置时,需要安装一些... 查看详情
关于echarts地图下钻。
...,关于地图下钻。这里做了个简单的青岛地图下钻,初学echarts,做的不精,凑合看看吧。 第一步呢,先引入echarts等文件,这是最基本的。 第二步,到官网下载青岛各区的json包,网址 http://ecomfe.github.... 查看详情
vue进阶(幺玖肆):vantui实现dialog弹框动态显示message(代码片段)
...、实现步骤三、涉及知识点四、拓展阅读一、前言在利用Echarts实现地图展示时,需要实现点击某一省份,模态框形式给出相应的省份信息,点击模态框中的下钻按钮,实现下钻至该省份下的区域地图部分,以... 查看详情
echarts百度接口实现数据下钻
...idth=device-width,initial-scale=1.0"><metaname="description"content="ECharts"><metaname="author"content="kener.linfeng@gmail.com"><title>ECharts&middo 查看详情
react+echarts实现地图(代码片段)
6importReact,Componentfrom‘react‘;7importaxiosfrom‘axios‘;8importechartsfrom‘echarts/lib/echarts‘;9import‘echarts/lib/component/tooltip‘;10import‘echarts/lib/component/title‘;11import‘echarts/lib/co 查看详情
echarts实现地图(代码片段)
文章以河南省为例一、先下载eacherts相关js文件(echarts.min.js)和echarts使用到的地图插件(map)ecarts.min.js在echarts官网下载,map插件下载地址:https://github.com/zhxiangfei/echarts-map (包含全国、各省城市)二、代码<scripttype="text/j... 查看详情
echarts中国地图各个省市自治区自定义颜色(代码片段)
前言最近接了一个外包的项目,其中有个需求是这样的,需要展示一个中国的统计地图,要求每个省市区都是不一样的颜色,必须特别区分开。以及隐藏南海部分。看了Echats相关文档,发现有类似的demo,但不是特别符合要... 查看详情
25继续echarts实现中国地图
1、以上是实现的效果下边是实现的代码,上一篇地图没有颜色,是因为没有引入zrender包,因为echarts画地图是基于zrender实现的<!DOCTYPEhtml><html><header><metacharset="utf-8"><!--引入ECharts文件--><scriptsrc="jquery-1.7.2.m... 查看详情
vue中使用echarts实现中国地图(代码片段)
第一种效果:不同省份颜色不同代码:注意:①要实现这种效果,地图数据的name一定要是省份的名字,要不然颜色出不来;②一定要有visualMap配置,并且它的seriesIndex属性对应的是series的数组下标;... 查看详情
echarts实现中国地图数据展示(代码片段)
...echarts;一般运用到条形、折线、扇形图,今天说一说在中国地图上展示各地数据;首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码:ft9n也可以在github上克隆下来:ht 查看详情
php+jquery+json实现中国省市区三级联动
定义省市区结构的JSON文件代码:city.data.js:varcityData=[{ value:‘110000‘, text:‘北京市‘, children:[{ value:"110100", text:"北京市", children:[{ value:"110101", text:"东城区" },{ value:"110102", text:"西城区" },{ 查看详情
echarts实现中国地图(代码片段)
本项目是从数据库中获取数据然后在web页面上展示地图界面,用到了echarts接下来是目录展示: 接下来展示各个文件的内容base2文件的内容:packagetwo;publicclassbase2Stringshengfen;Stringrenshu;publicStringgetShengfen()returnshengfen;publ... 查看详情