使用 kbmMW 后台支持Echarts 地图显示
Echarts 是非常不错的web 图形显示前端JS 库，具体应用可以参考https://echarts.apache.org/zh/index.html
我们经常会使用Echarts 显示一个省份或地区的某个指标，今天实例一下如何使用kbmmw 和Echarts 结合
显示数据。
我们以一个省份实例，首先我们做一个省份地图模板。
我们把这个html 模板命名位showmap.heilongjiang.html ，中间为省份名。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="/xalionrest/scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/xalionrest/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/xalionrest/echarts/map/province/heilongjiang.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("container"));
option = {
title: {
text: '黑龙江省数量 （2020）'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} 头'
},
//左侧小导航图标
visualMap: {
min:10,
max:400000,
show : true,
text:['高','低'] ,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']}
},
series: [{
name:'heilongjiang',
type: 'map',
map:'黑龙江',
mapType: 'province',
selectedMode: 'single',
roam: false,
zoom: 1.2,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[]
}]
};
myChart.setOption(option, true);
// 异步加载数据
$.get('/xalionrest/provnum?<#urlallparams>').done(function (result) {
// 填入数据
var js;
js=JSON.parse(result);
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: 'heilongjiang',
data:js
}]
});
});
</script>
</body>
</html>
这个html 里面引用的js 库，请大家自行在网上下载。
我们在kbmmw 的rest 服务器里面，建立对应的函数。
[kbmMW_Method]
function provnum(
[kbmMW_Rest('value: "$prov", required: true')] const prov:string;
[kbmMW_Rest('value: "$date1", required: true')] const date1:string;
[kbmMW_Rest('value: "$date2", required: true')] const date2:string):string;
[kbmMW_Rest('method:get, path:"showprovmap",responseMimeType:"text/html"')]
[kbmMW_Method]
function showprovmap(
[kbmMW_Rest('value: "$prov", required: true')] const prov:string;
[kbmMW_Rest('value: "$date1", required: true')] const date1:string;
[kbmMW_Rest('value: "$date2", required: true')] const date2:string):string;
function TkbmMWCustomHTTPSmartService1.showprovmap(const prov, date1,
date2: string): string;
var
sd:TkbmMWHTTPServiceDefinition;
fc:TkbmMWHTTPFileCategory;
path,root:string;
ss:Tstringstream;
allparams:string;
begin
sd:=TkbmMWHTTPServiceDefinition(ServiceDefinition);
root:=sd.RootPath[mwhfcHTML];
if root<>'' then
root:=IncludeTrailingBackslash(root);
path:=root+lowercase(sd.name)+PathDelim+'showmap.'+prov+'.html'; //根据参数获取对应的模板
if not fileexists(path) then
begin
result:='can''t find '+path;
exit;
end;
allparams:='prov='+prov+'&date1='+date1+'&date2='+date2; //生成替换的参数
ss:=Tstringstream.Create('',Tencoding.UTF8);
try
ss.LoadFromFile(path);
result:=ss.DataString;
result:=result.Replace('<#urlallparams>',allparams);
finally
ss.Free;
end;
end;
function TkbmMWCustomHTTPSmartService1.provnum(const prov:string;const date1:string;const date2:string): string;
var
sqls,func:string;
jsm: TkbmMWJSONMarshal;
myr:Txalionresult;
json,outjson:TkbmMWONCustomObject;
datajson: TkbmMWONArray;
str:TkbmMWJSONStreamer;
mydate1,mydate2:Tdatetime;
function str2date(const dates:string):Tdatetime;
var
ys,ms,ds:string;
yy,mm,dd:integer;
begin
if length(dates)<>8 then
begin
result:=date;
exit;
end;
ys:=copy(dates,1,4);
ms:=copy(dates,5,2);
ds:=copy(dates,7,2);
if not trystrtoint(ys,yy) then
begin
result:=date;
exit;
end;
if not trystrtoint(ms,mm) then
begin
result:=date;
exit;
end;
if not trystrtoint(ds,dd) then
begin
result:=date;
exit;
end;
if not TryEncodeDate(yy, mm, dd, Result) then
result:=date;
end;
begin
func:=RequestTransportStream.Func;
if ((func='GET') or (func='POST')) then
ProcessCORSRequest;
myr:=Txalionresult.Create;
mydate1:=str2date(date1);
mydate2:=str2date(date2);
jsm:=TkbmMWJSONMarshal.Create;
str:=TkbmMWJSONStreamer.Create;
try
sqls:='select city as name , pignum as value from hljall'; //
sqls:=sqls+' where date>=:date1 and date<=:date2 and prov=:prov' ; //定义日期和省份
cx.Params[0].AsDate:=mydate1;
cx.Params[1].AsDate:=mydate2;
cx.Params[2].Asstring:=prov;
cx.sql.text:=sqls;
try
cx.open;
except
on E: Exception do
begin
// log.Error(E.Message);
myr.oks:='error';
myr.values:=E.Message;
result:=otojsonstr(myr);
Exit;
end;
end;
jsm.AnonymousRoot:=true;
json:=jsm.ValueToON(cx); //序列化查询结果
datajson:=TkbmMWONObject(json).AsArray['data'];
Result:=str.SaveToUTF16String(datajson);
finally
myr.Free;
jsm.Free;
str.Free;
end;
end;
运行服务器，然后再浏览器里面测试。
我们看看后台的运行过程。
后台加载了对应的js ，同时执行了上面的两个过程。
第一个替换了对应的访问参数。
第二个给客户端返回了数据。
浙公网安备 33010602011771号