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 ，同時執行了上面的兩個過程。
第一個替換了對應的訪問參數。
第二個給客戶端返回了數據。