使用 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 ，同时执行了上面的两个过程。

第一个替换了对应的访问参数。

第二个给客户端返回了数据。