Echart统计图-map地图

你的名字 2021-09-07 06:00 628阅读 0赞

数据库数据查询

<table> 
 <tbody> 
 <tr> 
 <td> //首页地图统计 /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&gt; condition = new HashMap&lt;&gt;(); Date date = new Date(); //获取本月的时间 Date thisMonthTime = TimeUtils.getThisMonthTime(date); //地图数据统计 // 通过医院和箱子表关联查询首页地图信息，按照月时间过滤，县区分组 List mainEntityList = boxActService.selectMapInfoByMonthTime(thisMonthTime); List&gt; list = new ArrayListing, Object&gt;&gt;(); for (MainEntity mainEntity : mainEntityList) { Map map = new HashMap&lt;&gt;(); 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); } </td> 
 </tr> 
 </tbody> 
</table>

sql语句查询

<table> 
 <tbody> 
 <tr> 
 <td> select id="selectMapInfoByMonthTime" resultType="MainEntity"&gt; 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&gt; </td> 
 </tr> 
 </tbody> 
</table>

实体类接收数据（添加get set方法）

<table> 
 <tbody> 
 <tr> 
 <td> 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; } </td> 
 </tr> 
 </tbody> 
</table>

html代码

<table> 
 <tbody> 
 <tr> 
 <td> div class="layui-col-md6"&gt; div class="layui-card" style="margin-left: 15px;"&gt; iv class="layui-card-header"&gt; 日照市各辖区本月医废收集情况图(统计年月：n class="nowdate" id="showtime"&gt;2020-04span&gt;) div&gt; iv class="layui-card-body" id="map" style="height: 648px;"&gt;&gt; /div&gt; /div&gt; </td> 
 </tr> 
 </tbody> 
</table>

js代码

<table> 
 <tbody> 
 <tr> 
 <td> $(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友情扩展。关于皮肤的扩展规则，去这里查阅 }); } } }); }; }); </td> 
 </tr> 
 </tbody> 
</table>

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