图片做多的网站是哪个,纪念册设计制作图片,炫佑网站建设,企业公章查询系统目录 前言
一、列表及图表信息展示
1、数据过滤调整
2、信息列表及图表展示
3、Excel写入
二、界面可视化
1、Echarts图表和列表展示
2、城市详情和下载功能设计
三、成果展示
1、图表展示 2、部分城市数据分析
总结 前言 今天是五一黄金周假期第二天#xff0c;不知…
目录 前言
一、列表及图表信息展示
1、数据过滤调整
2、信息列表及图表展示
3、Excel写入
二、界面可视化
1、Echarts图表和列表展示
2、城市详情和下载功能设计
三、成果展示
1、图表展示 2、部分城市数据分析
总结 前言 今天是五一黄金周假期第二天不知道各位小伙伴们是出门在外旅游还是路上。在上一篇博文中基于SpringBoot和PostGIS的各省与地级市空间距离分析在这篇博客中使用SpringBoot基于PostGIS空间数据库实现了对各省省会城市与地级市的空间距离分析。虽然地图保留了很好的空间位置信息但是对于对于展示数据不是很直观同时有一些小伙伴说想要提供完整的地市距离列表和统计图表最好还能分省将对应地市的空间距离导出成excel以方便共享和使用。 本文即是在这样的需求场景下诞生博文重点介绍如何将地级市空间距离信息在进行列表展示同时如何制作Echarts地级市柱状图然后讲述了如何进行Excel数据导出最后以几个省份为例分析这几个省份的空间地理距离特点。祖国大好河山让我们共同奋斗。
一、列表及图表信息展示 本小节重点讲解在应用中如何进行列表及图表信息的展示其中图表控件采用Echarts进行柱状图展示。这里对各省信息列表进行一个重新过滤。考虑到北京市、上海市、天津市、重庆市这四个直辖市的市中心与下面的区县距离都比较近因此在省级行政范围中将直辖市去掉。于此同时香港特别行政区和澳门特别行政区也是一样的原因在信息展示页面一并把两个特别行政区去掉在后面的空间分析中直辖市和特别行政区都不再进行地级市距离分析范围内对于区县级别的距离分析中倒是可以考虑纳入进来。
1、数据过滤调整 要实现数据的过滤在biz_province这张表的类型中进行type过滤由于采用了Mybatis-Plus框架这里在写代码时只需要进行type的not in 过滤即可下面来看具体的实现
Override
public ListProvince selectList4Gn(Province province) {QueryWrapperProvince queryWrapper new QueryWrapperProvince();if(StringUtils.isNotBlank(province.getName())){queryWrapper.like(name, province.getName());}queryWrapper.select( id,code,name,type );ListString inData new ArrayListString(2);inData.add(直辖市);inData.add(特别行政区);queryWrapper.notIn(type, inData);//过滤特别行政区和直辖市queryWrapper.orderByAsc(code);return this.baseMapper.selectList(queryWrapper);
}2、信息列表及图表展示 这里我们在省级行政区划的操作栏新增两个按钮开一个是查看详情按钮另外一个是下载当前省份空间距离的按钮。先来进行查看详情按钮的设计与实现。在后台的控制器中新增以下两个方法主要用于详情页面的展示和图表信息的展示。
RequiresPermissions(eq:province:distance:details)
GetMapping(/details/{code})
public String echartsView(ModelMap mmap,PathVariable(code) String code){ListGeographicName list geoNameService.findListByProvinceCode(code);mmap.put(dataList, list);mmap.put(code, code);return prefix /details;}PostMapping(/echarts/provinceline/{code})ResponseBodypublic AjaxResult provinceLine(PathVariable(code) String code){String charts geoNameService.buildProvinceChart(code);AjaxResult result AjaxResult.success();result.put(data, charts);return result;} 这里需要注意的是echarts的图表数据采用后端生成的模式使用后台的Json构建。
Overridepublic String buildProvinceChart(String code) {String result ;GsonOption option new GsonOption();option.title().text(地级市与省会距离统计图单位千米);option.tooltip().trigger(Trigger.axis);option.legend(距离);option.legend().y(Y.bottom).padding(0);option.toolbox().show(true).feature(new MagicType(Magic.line, Magic.bar).show(true), Tool.saveAsImage);option.calculable(true);ListString provinces new ArrayListString();ListBigDecimal eqCounts new ArrayListBigDecimal();ListGeographicName dataList this.findListByProvinceCode(code);int index 0;for (GeographicName vo : dataList) {if(index 0) {index ;continue;}index ;provinces.add(vo.getName());eqCounts.add(vo.getDist().divide(new BigDecimal(1000)));}CategoryAxis categoreAxis new CategoryAxis();categoreAxis.data(provinces.toArray()).axisLabel().interval(0).rotate(20);option.xAxis(categoreAxis);option.yAxis(new ValueAxis());Bar bar new Bar(距离);bar.data(eqCounts.toArray());bar.markPoint().data(new PointData().type(MarkType.max).name(最大值), new PointData().type(MarkType.min).name(最小值));bar.markLine().data(new PointData().type(MarkType.average).name(平均值));option.series(bar);result option.toString();return result;}
3、Excel写入 为了方便直接下载指定省份下辖地级市的空间城市距离。我们将对应省份下属行政区直接以excel信息的形式给出同时在excel中直接把各地级市与省会城市的直线距离也列了出来。为了直接使用JavaBean的模式来定义excel列需要在model层进行属性绑定。通过类中的Excel(name 城市距离单位米)来配置当前属性对应的导出excel列。
package com.yelang.project.extend.earthquake.domain;
import java.io.Serializable;
import java.math.BigDecimal;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.yelang.framework.aspectj.lang.annotation.Excel;
import com.yelang.framework.handler.PgGeometryTypeHandler;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
Data
ToString
AllArgsConstructor
NoArgsConstructor
TableName(value biz_geographic_name,autoResultMap true)
public class GeographicName implements Serializable{private static final long serialVersionUID -3694849578429480952L;TableId(value pk_id)Excel(name 序号)private Long pkId;Excel(name 城市名称)private String name;Excel(name 城市汉语拼音)private String pinyin;Excel(name 类别)private String classz;Excel(name 备注)private String bz;private String slx;public GeographicName(String name, String pinyin, String classz, String bz, String slx, String geom) {super();this.name name;this.pinyin pinyin;this.classz classz;this.bz bz;this.slx slx;this.geom geom;}TableField(typeHandler PgGeometryTypeHandler.class)private String geom;TableField(existfalse)private String geomJson; TableField(existfalse)Excel(name 城市距离单位米)private BigDecimal dist;//距离
} 在controller中调用api进行excel的写入关键的业务逻辑代码如下所示
RequiresPermissions(eq:province:distance:export)
Log(title 城市距离, businessType BusinessType.EXPORT)
PostMapping(/export/{code})
ResponseBody
public AjaxResult export(PathVariable(code) String code){ListGeographicName list geoNameService.findListByProvinceCode(code);ExcelUtilGeographicName util new ExcelUtilGeographicName(GeographicName.class);Province province provinceService.findByCode(code);return util.exportExcel(list, province.getName() 城市距离信息表);
} 通过以上的代码基本就实现了数据导出和可视化的后台代码的编写。下面根据需要我们来提供对应的前端页面代码逻辑。
二、界面可视化 本小节主要对界面可视化的设计与代码实现进行深度说明主要包含两个子功能点第一个Echarts图表和列表展示第二个是下载指定省份的城市信息列表闲言少语直接进入正题。
1、Echarts图表和列表展示 俗话说一图胜千言一个比较好的统计表格能快速的让大家迅速的理解数据要素。所以与枯燥的静态表格相比我们提供一个对应地级市的空间距离柱状分布图。为了有一个直观的感受我们将图表放置在页面的左边而列表信息放在页面的右边。
!DOCTYPE html
html langzh xmlns:thhttp://www.thymeleaf.org xmlns:shirohttp://www.pollix.at/thymeleaf/shiro
headth:block th:includeinclude :: header(ECharts) /
/head
body classgray-bgdiv classrowdiv classcol-sm-7div classibox float-e-marginsdiv classibox-titleh5距离统计/h5div classibox-toolsa classcollapse-linki classfa fa-chevron-up/i/aa classdropdown-toggle data-toggledropdown href#i classfa fa-wrench/i/aul classdropdown-menu dropdown-userlia href#选项1/a/lilia href#选项2/a/li/ula classclose-linki classfa fa-times/i/a/div/divdiv classibox-contentdiv styleheight:350px idecharts-province-chart/div/div/div/divdiv classcol-sm-5div classibox float-e-marginsdiv classibox-contenttable classtable table-bordered white-bgtheadtrth width50%城市名称/thth距离(公里)/th/tr/theadtbodytr th:eachdata,itemStat:${dataList} th:if${itemStat.count 1}td [[${itemStat.count - 1}]]、[[${data.name}]]/tdtd th:text${#numbers.formatDecimal((data.dist / 1000 ), 1, 2)}/td/tr/tbody/table/div/div/div/divth:block th:includeinclude :: footer /th:block th:includeinclude :: echarts-js /script typetext/javascriptvar charts new Array();var provinceLineChart;var minprovinceChart;var mapoption;$(function () {provinceLineChart echarts.init(document.getElementById(echarts-province-chart));$(window).resize(provinceLineChart.resize);charts.push(provinceLineChart);initProvinceChart();$(window).resize(function() {for(var i 0; i charts.length; i) {charts[i].resize();}});//解决tab切换不显示问题 在加载窗口后重新渲染。$(a[data-toggletab]).on(shown.bs.tab, function(e) {for(var i 0; i charts.length; i) {charts[i].resize();}});});function initProvinceChart(){var code [[${code}]];$.ajax({type: POST,url: ctx eq/province/distance/echarts/provinceline/ code,data: {},dataType : json,success: function(serverdata){if(serverdata ! ){var serverJsonData eval((serverdata.data));provinceLineChart.setOption(serverJsonData,true);$(window).resize(provinceLineChart.resize);}},error:function(data){parent.layer.alert(系统发生错误, {icon: 5});}});}/script
/body
/html
2、城市详情和下载功能设计 我们在省级行政区的操作栏中增加一个“查看详情”按钮和“下载”按钮。用户点击“查看详情”会自动打开一个弹出框将城市对应的所有地级市进行数据展示。点击“下载”按钮则会自动下载对应行政区划的数据成excel格式的。因此需要在原来的列表中进行修改同时增加两个处理的逻辑函数。
{title: 操作,align: center,formatter: function(value, row, index) {var actions [];actions.push(a classbtn btn-success btn-xs editFlag hrefjavascript:void(0) onclickpreview(\ row.code \,\row.id\)i classfa fa-send-o/i/a );actions.push(a classbtn btn-info btn-xs editFlag hrefjavascript:void(0) onclickdetails(\ row.code \,\row.id\)i classfa fa-eye/i/a );actions.push(a classbtn btn-primary btn-xs editFlag hrefjavascript:void(0) onclickdownloadFile(\ row.code \,\row.id\)i classfa fa-download/i/a);return actions.join();}
} 对应的查看详情的处理方法如下
function details(code,id){parent.layer.open({type: 2,title: [详情,font-size:16px;text-align:center;font-weight: bold;],scrollbar:false,area: [80%, 90%],content: prefix /details/ code ,btn:[],yes:function(index,layero){},cancel: function(index, layero){ parent.layer.close(index);return false; } }); } 下载附件的时候需要注意实际生成excel时会先将文件写入到本次然后通过公共接口去下载数据然后在后台删除对应的物理文件。实际情况可以根据我们的需求来合理调整相应的逻辑。
function downloadFile(code,id){var url prefix /export/ code;$.post(url, {}, function(result) {if (result.code web_status.SUCCESS) {window.location.href ctx common/download?fileName encodeURI(result.msg) delete true;} else if (result.code web_status.WARNING) {$.modal.alertWarning(result.msg)} else {$.modal.alertError(result.msg);}$.modal.closeLoading();});
} 经过以上的步骤基本完成前端的业务逻辑的编写下面进行前后端的功能继承测试相关功能是否达到我们的实际需求。
三、成果展示 本小节主要完成对相关开发成果的综合展示包括echarts图表和标准网页列表以及excel附件的下载。除了展示具体的成果我们也结合相关的统计数据对展示的图表信息进行一个简单分析当然欢迎其它小伙伴对数据进行准确的分析也可以结合空间位置和其他参数进行空间建模。一起发现时空之美。
1、图表展示 这里主要以系统截图的方式实现对系统图表功能和相关列表的展示进行演示。 河北省地级市距离展示示意图 点击列表操作栏中的第二个按钮即查看详情按钮点击查看详情后可以详细看到其图表统计分析结果和列表统计信息。 地级市与省会距离详情页面 与查看详情类似在操作栏中可以直接点击下载将实现直接下载对应省份的相关数据表格。 说明由于该数据采用的是2015年的随着现在城市化的进程涉及到一些行政区划合并、删除、划转。本文中的数据有一个不是很准确如果数据不对仅作为参考最标准的数据还是以自然资源部们发布的官方数据为准。 序号城市名称城市汉语拼音类别备注城市距离单位米1783889052488028162石家庄市Shijiazhuang ShiAD省会城市01783888852373487639衡水市Hengshui ShiAD地级市106931.867477081783888852373487637邢台市Xingtai ShiAD地级市107691.707907831783888852373487635保定市Baoding ShiAD地级市124101.094626341783888852373487643邯郸市Handan ShiAD地级市157107.893795211783888852373487636沧州市Cangzhou ShiAD地级市205780.928815491783888852373487632廊坊市Langfang ShiAD地级市251191.023727591783888850716737539张家口市Zhangjiakou ShiAD地级市304396.286807831783888852373487633唐山市Tangshan ShiAD地级市363795.217946061783888850716737540承德市Chengde ShiAD地级市438525.35152431783888852373487634秦皇岛市Qinhuangdao ShiAD地级市487995.12411063 2、部分城市数据分析 下满我们依然选取几个省份来进行数据分析。以上面河北省为例首先我们在百度中查询河北的城市信息。 河北省(中华人民共和国省级行政区)别称冀,全省面积18.88万平方千米,辖石家庄、唐山、秦皇岛、邯郸、邢台、保定、张家口、承德、沧州、廊坊、衡水11个市。从河北的城市距离来看300公里范围内的城市就有7个所有城市不超过500公里。 下面来看经济比较强的一些省份的空间距离先来看看江苏省的。 江苏省下辖南京市、无锡市 、徐州市、常州市、苏州市、南通市、连云港市、淮安市、盐城市、扬州市、镇江市、泰州市、宿迁市13个地级市。其各城市空间距离如下 城市名称距离(公里)1、镇江市60.782、扬州市68.813、常州市114.654、泰州市114.785、无锡市156.806、淮安市167.917、苏州市189.468、盐城市191.739、南通市195.5810、宿迁市216.5011、徐州市276.5212、连云港市283.91 可以看到江苏省内的各地级市其空间距离9个事200公里以内所有城市都在300公里以内。这样的距离使得各个地方的经济发展更加密切吧。 为了节约篇幅这里再列一个省份新疆维吾尔自治区。新疆现有14个地(州、市),包括5个自治州、5个地区和乌鲁木齐、克拉玛依、吐鲁番、哈密4个地级市。 城市名称距离(公里)1、昌吉回族自治州32.242、吐鲁番市160.233、巴音郭楞蒙古自治州258.774、克拉玛依市291.065、阿勒泰地区448.386、博尔塔拉蒙古自治州458.597、塔城地区487.248、塔城地区487.249、哈密地区491.1810、伊犁哈萨克自治州505.8611、阿克苏地区672.6912、和田地区989.5813、克孜勒苏柯尔克孜自治州1054.7714、喀什地区1081.40 通过空间距离可以看到新疆真的地大全疆离乌鲁木齐市300公里内的只有3个城市和田地区和喀什地区等将近1000公里。这么远的距离对于经济和人员交流都是一种限制吧。
总结 好了以上就是本文的主要内容。 本文即是在这样的需求场景下诞生博文重点介绍如何将地级市空间距离信息在进行列表展示同时如何制作Echarts地级市柱状图然后讲述了如何进行Excel数据导出最后以几个省份为例分析这几个省份的空间地理距离特点。五一劳动节致敬伟大的劳动人民致敬每一位奋斗者让我们都保持昂的扬斗志不断奋斗。
