数据库数据查询

//首页地图统计 /main/json/customerMap

@RequiresUser

@RequiresPermissions(value = { "polar:backstage","hospCollectInfo:view:list"})

@ErrorMsg(tag = "首页地图统计", type = ErrorType.JSON,writeLogs = false)

@RequestMapping(value = "/customerMap", produces = "application/json;charset=utf-8")

@ResponseBody

public ResponseJson customerMap() throws ParseException {

MapString, Object> condition = new HashMap<>();

Date date = new Date();

//获取本月的时间

Date thisMonthTime = TimeUtils.getThisMonthTime(date);

//地图数据统计

// 通过医院和箱子表关联查询首页地图信息,按照月时间过滤,县区分组

List mainEntityList = boxActService.selectMapInfoByMonthTime(thisMonthTime);

List> list = new ArrayListing, Object>>();

for (MainEntity mainEntity : mainEntityList) {

Map map = new HashMap<>();

map.put("name",mainEntity.getQy());

map.put("grxfwName","感染性废物:");

map.put("grxfwValue",mainEntity.getGrxfw() == null ? 0 : mainEntity.getGrxfw());

map.put("ssxfwName","损伤性废物:");

map.put("ssxfwValue",mainEntity.getSsxfw() == null ? 0 : mainEntity.getSsxfw());

map.put("blxfwName","病理性废物:");

map.put("blxfwValue",mainEntity.getBlxfw() == null ? 0 : mainEntity.getBlxfw());

map.put("ywxfwName","药物性废物:");

map.put("ywxfwValue",mainEntity.getYwxfw() == null ? 0 : mainEntity.getYwxfw());

map.put("hxxfwName","药物性废物:");

map.put("hxxfwValue",mainEntity.getHxxfw() == null ? 0 : mainEntity.getHxxfw());

map.put("allCountName","总箱数:");

map.put("allCountValue",mainEntity.getAllCount() == null ? 0 : mainEntity.getAllCount());

map.put("allWeightName","总重量:");

map.put("allWeightValue",mainEntity.getAllWeight() == null ? 0 : mainEntity.getAllWeight());

map.put("value", new Random().nextInt(2000)); //随机生成1-2000,用于地图颜色展示

list.add(map);

}

condition.put("list",list);

return new ResponseJson(Constants.CODE_SUCCESS, condition);

}

sql语句查询

select id="selectMapInfoByMonthTime" resultType="MainEntity">

select

c.text as qy,

d.grxfw as grxfw,

d.ssxfw as ssxfw,

d.blxfw as blxfw,

d.ywxfw as ywxfw,

d.hxxfw as hxxfw,

d.allCount as allCount,

d.allWeight as allWeight

from t_polar_dict c LEFT JOIN (SELECT

a.qy as qy,

count(CASE b.lx WHEN '感染性废物' THEN '1' ELSE null END) as grxfw,

count(CASE b.lx WHEN '损伤性废物' THEN '1' ELSE null END) as ssxfw,

count(CASE b.lx WHEN '病理性废物' THEN '1' ELSE null END) as blxfw,

count(CASE b.lx WHEN '药物性废物' THEN '1' ELSE null END) as ywxfw,

count(CASE b.lx WHEN "化学性废物" THEN '1' ELSE null END) as hxxfw,

count(b.id) as allCount,

sum(b.zl) as allWeight

from leadthing_customer a, leadthing_box_act b

where a.id = b.yyid and b.dz='收集' and DATE_FORMAT( b.createTime ,'%Y-%m')= DATE_FORMAT(#{createTime},'%Y-%m') GROUP BY a.qy) d on d.qy =c.value WHERE c.groupId = 'region'

/select>

实体类接收数据(添加get set方法)

package com.leadthing.mediwaste.main;

import polar.island.core.entity.BasicEntity;

import java.util.Date;

public class MainEntity extends BasicEntity {

private String qy;

private Long grxfw;

private Long ssxfw;

private Long blxfw;

private Long ywxfw;

private Long hxxfw;

private Long allCount;

private Double allWeight;

}

html代码

div class="layui-col-md6">

div class="layui-card" style="margin-left: 15px;">

iv class="layui-card-header">

日照市各辖区本月医废收集情况图(统计年月:n class="nowdate" id="showtime">2020-04span>)

div>

iv class="layui-card-body" id="map" style="height: 648px;">>

/div>

/div>

js代码

$(function () {

randomValue();

var myChartMap;

$.get('./static/layui/rizhaoshi.geoJson', function (rizhaoshiJson) {

echarts.registerMap('rizhaoshi', rizhaoshiJson);

myChartMap = echarts.init(document.getElementById('map'));

var optionMap = {

tooltip: {

formatter: function (params, ticket, callback) {

var values = params.name + params.seriesName + '
' +

params.data.grxfwName + ':' + params.data.grxfwValue + '
' +

params.data.ssxfwName + ':' + params.data.ssxfwValue + '
' +

params.data.blxfwName + ':' + params.data.blxfwValue + '
' +

params.data.ywxfwName + ':' + params.data.ywxfwValue + '
' +

params.data.hxxfwName + ':' + params.data.hxxfwValue + '
' +

params.data.allCountName + ':' + params.data.allCountValue + '
' +

params.data.allWeightName + ':' + params.data.allWeightValue;

return values;

}

},

visualMap: {

min: 0,

max: 2000,

splitNumber: 4,

left: 'left',

top: 'bottom',

text: ['高', '低'],

inRange: {

color: ['#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C']

},

textStyle: {

color: '#000'

},

show: true

},

geo: {

map: 'rizhaoshi',

roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。

zoom: 1.21,

label: {

normal: {

show: true,

fontSize: '12',

color: 'rgba(0,0,0,1)'

}

},

itemStyle: {

normal: {

borderColor: 'rgba(0, 0, 0, .3)'

},

emphasis: {

areaColor: '#F3B329', // 鼠标选择区域颜色

shadowOffsetX: 0,

shadowOffsetY: 0,

shadowBlur: 10,

borderWidth: 1,

shadowColor: 'rgba(0, 0, 0, 0.1)'

}

}

},

series: [{

name: '医废收集情况',

type: 'map',

// map: 'rizhaoshi',

geoIndex: 0,

data: []

}]

};

// 使用刚指定的配置项和数据显示图表。

myChartMap.setOption(optionMap);

});

function randomValue() {

$.ajax({

type: "post",

url: ctx + "/main/json/customerMap",

dataType: "json",

success: function (result) {

if (result.data == null || result.code == "000000") {

var data = result.data;

myChartMap.setOption({

//'感染性废物','损伤性废物','病理性废物','药物性废物','化学性废物'

series: [{

name: '医废收集情况',

type: 'map',

geoIndex: 0,

data: data.list

}]

})

} else {

layer.alert("系统异常!", {

time: 2000,

icon: 2,

skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅

});

}

}

});

};

});

地图经纬度值填写再文件夹里面

Echart统计图-map地图相关推荐

  1. Vue中使用echart实现中国地图统计图

    Vue中使用echart实现中国地图统计图 前言 Echart版本的确定 全局导入或按需导入 在对应的页面调用echart 前后端数据交互注意事项 前言 在Vue2.x开发中,为了更好地展示某一个时间 ...

  2. 润乾报表echarts统计图省份地图设置

     需求是制作单个省份的地图,比如,要制作一张江西省的产业分布图,通过echarts设置,首先要有江西省地图的js或者是json,在润乾设计器中有自带的模板可以直接使用,report5\web\we ...

  3. EChart中使用地图方式总结(转载)

    EChart中使用地图方式总结 2018年02月06日 22:18:57 来源:https://blog.csdn.net/shaxiaozilove/article/details/79274772 ...

  4. Echart实现中国地图和地图打点

    一.概述 首先ECharts 是一个使用 JavaScript 实现的开源可视化库.兼容当前绝大部分浏览器,而且提供大量可交互.可高度个性化定制的图表,满足开发者各种需求. 今天主要展示echarts ...

  5. 使用Echart搭配百度地图创建某一地区热点图的注意点

    使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程. 效果图: 代码: <!DOCTYPE html> <html style=&quo ...

  6. vue+eChart实现省份地图

    vue+eChart实现省份地图 import echarts from "echarts"; require("echarts/theme/macarons" ...

  7. echarts map地图数据Json制作教程

    首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包 有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...

  8. uni app map 地图 漂浮问题及方案

    uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

  9. Vue + echart 实现中国地图 和 省市地图(可切换省份

    vue + echart 实现中国地图 和 省市地图(可切换省份) - 伏沙金 - 博客园

最新文章

  1. 数据库迁移用到的命令
  2. 20181023 上课截图
  3. Cuckoo Hashing的应用及性能优化
  4. linux防火墙怎么添加端口,手工添加Linux防火墙端口
  5. Create QR Code
  6. Qt:OpenCV—Q图像处理基本操作(Code)
  7. dotnet core调试docker下生成的dump文件
  8. 天池 在线编程 求和查找
  9. Unity3D脚本学习1
  10. mysql查找数据库文件位置
  11. excel常用函数公式
  12. PostgreSQL 时区问题
  13. 【数据库内核】基于代价的优化器引擎-代价估算
  14. 全屏背景图移动端滚动时白底问题
  15. Tracup|工作时节省时间的三个奇异但是有用的小妙招
  16. 康威定律对架构设计的指导意义
  17. 安卓动画系统 - 安卓R
  18. GBase 8a MPP Cluster 数据加载参数及语句
  19. @Valid对象嵌套List对象校验无效的解决方案
  20. 牛年地图导航 2023年最新版车载版 包用

热门文章

  1. 2019年AI领域回顾:稳定发展还是幻想破灭?
  2. 从幻想到现实,虚拟人的成长之路
  3. 运行期报“#FFxxxxxx”不是属性“xxxxx”的有效值
  4. 日行一pwn:pwn1_sctf_2016
  5. 万物互联所必需的泛在物联网建设需要多少钱?成本低到不可想象
  6. centos安装包安装最新版nginx
  7. 腾讯云服务器的项目部署
  8. Excel日期修改为统一月份
  9. 你深入解析过java虚拟机:C1编译器,从HIR到LIR吗?
  10. C# 按Esc键关闭窗体