echarts以地图形式显示中国疫情情况实现点击省份下钻
首先要导入对应的包。下钻用到各个省份的json文件等内容导入之后进行相关的操作。
首先是从数据库中读取相应的数据文件。通过list方式。只有在ser出转化为json文件。在jsp页面通过ajax来进行数据的获取。返回json对象。
获取数据库中的信息保存到list对象集合之中简单如下：
public static ArrayList<heibeicity> findDate(String Date)
{
// TODO Auto-generated method stub
String sql = "select * from hebei_city_info where Date ='" +Date+ "'";
ArrayList<heibeicity> list =new ArrayList<heibeicity>();
Connection con=null;
PreparedStatement psts=null;
ResultSet rs=null;
try
{
con=DBUtil.getConn();
psts=con.prepareStatement(sql);
rs=psts.executeQuery();//记录返回的结果
while(rs.next())
{
heibeicity user1=new heibeicity();
user1.setCity(rs.getString("City"));
user1.setNew_confirmed_num(rs.getString("new_confirmed_num"));
user1.setConfirmed_num(rs.getString("confirmed_num"));
user1.setDead_num(rs.getString("dead_num"));
user1.setZhong_num(rs.getString("zhong_num"));
user1.setCured_num(rs.getString("cured_num"));
user1.setDate(rs.getString("date"));
list.add(user1);
} DBUtil.close(rs, psts, con);
return list;
} catch (SQLException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
return list;
}
之后将这个list转换成json类型返回ajax：
response.setContentType("text/plain; charset=UTF-8");
userdao userdao=new userdao();
ArrayList<info1> info_list=userdao.findpro();
HttpSession session = request.getSession();
session.setAttribute("info_list",info_list);
Gson gson = new Gson();
String json = gson.toJson(info_list);
response.getWriter().write(json);
之后就是生成整个地图进行显示各个省份的内容：
代码中的主要部分如下：
for(var i=0;i<;i++){
var d = {
};
d["name"] = data[i].Province;//.substring(0, 2);
d["value"] = data[i].Confirmed_num;
d["Yisi_num"] = data[i].Yisi_num;
d["Cured_num"] = data[i].Cured_num;
d["Dead_num"] = data[i].Dead_num;
mydata.push(d);
}
tooltip : {
trigger: 'item',
formatter : function(params) {
return params.name + '<br/>' + '确诊人数 : '
+ params.value + '<br/>' + '死亡人数 : '
+ params['data'].Dead_num + '<br/>' + '治愈人数 : '
+ params['data'].Cured_num + '<br/>'+ '疑似患者人数 : '
+ params['data'].Yisi_num;
}//数据格式化
},
第一个一定要有name\value的复制，name帮助判断是哪个省市。之后value来进行判断省份的颜色。，第一个中的例如
下边的tooltip是显示提示信息的；
主要的代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.yiqing.users.*"%>
<%@page import="java.util.ArrayList"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#myEcharts {
width: 800px;
height: 500px;
border: solid 1px red;
margin: 0 auto;
}
</style>
<!-- 引入 echarts.js -->
<script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>
<!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->
<script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
<meta charset="utf-8">
<title>中国疫情图</title>
<!-- 引入 echarts.js -->
<script src="${pageContext.request.contextPath}/resource/echarts.js"></script>
</head>
<body>
<!--为echarts准备一个dom容器-->
<div id="myEcharts"></div>
<script>
window.onload=function(){
$.ajax({//()里面是JSON数据，外层要加上{}。
url:"lianxi2",//处理页面地址，表示ajax要用哪个页面处理
data:{code:"n001"},//传递到处理页面的值，也是JSON数据，要用{}。如果传2个值就在{}里面加逗号，再写另外1个值。
type:"POST",//传值方式，一般用POST方式，注意POST要大写。
dataType:"JSON",//返回值的类型。1.TEXT文本，字符串。2.JSON数据 3.XML可扩展标记语言，主要用在数据传递。
async:true,
success:function(data){//表示处理成功之后做什么,后面跟一个匿名函数。回调函数，表示处理页面处理完数据以后执行这个函数。data表示处理页面返回的值，用形参接收。
var mydata = new Array(0);
alert(data[0].Province+data[0].Cured_num);
for(var i=0;i<32;i++){
var d = { };
d["name"] = data[i].Province;//.substring(0, 2); d["value"] = data[i].Confirmed_num;
d["Yisi_num"] = data[i].Yisi_num;
d["Cured_num"] = data[i].Cured_num;
d["Dead_num"] = data[i].Dead_num;
mydata.push(d);
}
//初始化echarts实例
var myChart = echarts.init(document.getElementById('myEcharts'));
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger: 'item',
formatter : function(params) {
return params.name + '<br/>' + '确诊人数 : '
+ params.value + '<br/>' + '死亡人数 : '
+ params['data'].Dead_num + '<br/>' + '治愈人数 : '
+ params['data'].Cured_num + '<br/>'+ '疑似患者人数 : '
+ params['data'].Yisi_num;
}//数据格式化
},
title: {
text: '中国疫情图',
left: 'center'
}, legend: {
orient: 'vertical',
left: 'left',
data: ['中国疫情图']
},
visualMap: {
type: 'piecewise',
pieces: [
{ min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
{ min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
{ min: 150, max: 499, label: '确诊150-499人', color: '#974236' },
{ min: 50, max: 149, label: '确诊50-149人', color: '#ee7263' },
{ min: 1, max: 49, label: '确诊1-49人', color: '#f5bba7' },
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
left: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '确诊数',
type: 'map',
mapType: 'china',
nameMap : {
'南海诸岛' : '南海诸岛',
'北京' : '北京市',
'天津' : '天津市',
'上海' : '上海市',
'重庆' : '重庆市',
'河北' : '河北省',
'河南' : '河南省',
'云南' : '云南省',
'辽宁' : '辽宁省',
'黑龙江' : '黑龙江省',
'湖南' : '湖南省',
'安徽' : '安徽省',
'山东' : '山东省',
'新疆' : '新疆维吾尔自治区',
'江苏' : '江苏省',
'浙江' : '浙江省',
'江西' : '江西省',
'湖北' : '湖北省',
'广西' : '广西壮族自治区',
'甘肃' : '甘肃省',
'山西' : '山西省',
'内蒙古' : "内蒙古自治区",
'陕西' : '陕西省',
'吉林' : '吉林省',
'福建' : '福建省',
'贵州' : '贵州省',
'广东' : '广东省',
'青海' : '青海省',
'西藏' : '西藏自治区',
'四川' : '四川省',
'宁夏' : '宁夏回族自治区',
'海南' : '海南省',
'台湾' : '台湾',
'香港' : '香港',
'澳门' : '澳门'
},
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: mydata
}
]
}; //使用指定的配置项和数据显示图表
myChart.setOption(option);
myChart.on('click', function (params) {
alert(params.name);
var url = "lianxi3?city_name="+ params.name;
window.location.href =url;
}); },
error:function(){//处理页面出错以后执行的函数。 }
});
} </script>
</body>
</html>
之后就是对下钻的操作了。添加province的对应的json文件。之后代码如下：
<%@ 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>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min(1).js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/china.js"></script>
<script src="${pageContext.request.contextPath }/js/china.js"></script> <script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<title>Insert title here</title> </head>
<body>
<div id="ditu2" style="width: 700px;height: 700px;margin: 0 auto;"></div>
</body>
<script type="text/javascript"> $.ajax({
url:"lianxi33",
async:true,
type:"POST",
dataType:"json",
data:{"City":"${city_name}",
},
success:function(data){
alert(data[1].City+data[1].Dead_num);
alert(data.length);
var mydata2= new Array(0); for(var i=1;i<data.length;i++){
var d2 = {};
d2["name"] = data[i].City+'市';
d2["value"] = data[i].Confirmed_num;
d2["Dead_num"] = data[i].Dead_num; mydata2.push(d2);
} var chart = echarts.init(document.getElementById("ditu2"));
$.getJSON('json/province/${city_name}.json', function(data) {
echarts.registerMap('${city_name}', data);
chart.setOption(option = {
tooltip: {
trigger: 'item',
formatter:
function(params) { return params.name + '<br/>' + '确诊人数 : ' + params.value + '<br/>' + '死亡人数 : ' + params['data'].Dead_num;
}//数据格式化 *
},
//左侧小导航图标
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: [
{start: 500, end:100000},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
},
series : {
type : 'map',
map : '${city_name}',
roam: true,
layoutCenter : [ '50%', '50%' ],
layoutSize : '100%',
label : {
normal : {
show : true,
textStyle : {
color : '#fff'
}
},
emphasis : {
show : false,
textStyle : {
color : '#fff'
}
}
},
itemStyle : {
normal : {
areaColor : 'rgba(24,65,91,0.3)',
borderColor : '#9DDCEB',
borderWidth : 3,
shadowColor : '#9DDCEB',
shadowBlur : 20
},
emphasis : {
areaColor : 'rgba(24,65,91,0.3)'
}
},
data:mydata2
}
})
});
},
error:function(){
alert("请求失败");
}, });
</script>
</html>
点击湖北时，得到的界面如下：
echarts以地图形式显示中国疫情情况实现点击省份下钻的更多相关文章
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- 如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。
原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...
- 【FusionCharts学习-3】显示中国地图
概述 使用FusionCharts显示中国地图 资源获取 地图下载地址:http://www.fusioncharts.com/download/maps/definition/ 将下载的地图拷贝 ...
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- echarts使用------地图生成----省市地图的生成及其他相关细节调整
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...
- ECharts 实现地图散点图上（转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
- openlayers-统计图显示(中国区域高亮)
openlayers版本: v3.19.1-dist 统计图效果: 案例下载地址:https://gitee.com/kawhileonardfans/openlayers-examp ...
- iOS_地图之显示附近微博
1.首先需要新建一个MKMapView地图对象,在storyBoard中拖拽一个,在工程中导入MapKit.framework: 2.遵守MKMapViewDelegate协议,设定显示地 ...
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
随机推荐
- OpenCV3入门（十四）图像特效—挤压、哈哈镜、扭曲
一.图像挤压特效 1.原理 图像压效果本质的图像坐标的非线性变换,将图像向内挤压,挤压的过程产生压缩变形,从而形成的效果. 挤压效果的实现是通过极坐标的形式,设图像中心为O(x,y),某点距离中心O的 ...
- Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？
问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下 <d ...
- MySQL基础篇(06)：事务管理，锁机制案例详解
本文源码:GitHub·点这里 || GitEE·点这里 一.锁概念简介 1.基础描述 锁机制核心功能是用来协调多个会话中多线程并发访问相同资源时,资源的占用问题.锁机制是一个非常大的模块,贯彻MyS ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
- React笔记1
目录 1.react基础:类组件.函数式组件.ES5/ES6继承 2.生命周期钩子函数 3.什么是JSX 4.props和state有什么区别 5.路由配置 6.自定义封住组件 7.React 状态管 ...
- CF codeforces A. New Year Garland【Educational Codeforces Round 79 (Rated for Div. 2)】
A. New Year Garland time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 03.第一个Go程序
第一个Go程序 Hello World 现在我们来创建第一个Go项目--hello.在我们的GOPATH下的src目录中创建hello目录. 在该目录中创建一个main.go文件: package m ...
- OpenCV-Python Shi-tomas拐角检测器和益于跟踪的特征 | 三十八
目标 在本章中, 我们将学习另一个拐角检测器:Shi-Tomasi拐角检测器 我们将看到以下函数:cv.goodFeaturesToTrack() 理论 在上一章中,我们看到了Harris Corne ...
- Redis数据结构——quicklist
之前的文章我们曾总结到了Redis数据结构--链表和Redis数据结构--压缩列表这两种数据结构,他们是Redis List(列表)对象的底层实现方式.但是考虑到链表的附加空间相对太高,prev 和 ...
- jmeter4.0介绍一
apache JMeter™应用程序是开放源码软件, 一个100% 纯 Java 应用程序, 旨在加载测试功能行为和测量性能.它最初设计用于测试 Web 应用程序, 但后来扩展到其他测试功能. Jme ...