Vorwort
Im vorherigen Blog-Beitrag haben wir erklärt, wie man mit Java Echarts-Diagrammgenerierungskomponenten im Hintergrund generiert. Der Blog-Beitrag lautet wie folgt:
Im vorherigen Blog wurde die Generierung von Echarts-Diagrammen vereinzelt vorgestellt. Bei der Generierung von Diagrammen werden die Datenquelleninformationen jedoch grundsätzlich im Voraus festgelegt, was statischen Daten entspricht. Für das Szenario des dynamischen Datenzugriffs ist es beispielsweise erforderlich, Hintergrunddaten dynamisch über Ajax abzurufen und die Daten dann in der Front-End-Diagrammkomponente festzulegen. In diesem Artikel wird das Ruoyi-Framework als Beispiel verwendet, um den dynamischen Zugriff auf Daten basierend auf der Ajax-Technologie ausführlich zu erläutern, damit die Leser verstehen können, wie dynamische Datenzugriffscodes in der Praxis entwickelt werden.
1. Maven-Abhängigkeitsdefinition
Das Demoprojekt ist in Form einer Maven-Abhängigkeit definiert. Hier müssen Sie die Java-Hintergrundgenerierungskomponente von Echarts und das Gson-Paket vorstellen. Gson ist ein Abhängigkeitspaket zum Generieren von Echarts-Komponenten. Bitte fügen Sie es unbedingt hinzu.
<!-- 增加Echarts java统一处理类 -->
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.6.2</version>
</dependency>2. Datensimulationsgenerierung
Zur Vereinfachung der Demonstration wird zur Simulation der Datenabfrage für die Datenkonstruktion nur Java verwendet. In tatsächlichen Situationen ist es erforderlich, die tatsächlichen Daten in der Datenbank abzufragen. Das in diesem Beispiel gezeigte Szenario besteht darin, die Informationen zum SMS-Versandvolumen einer Abteilung im letzten Monat abzufragen.
Dies wird in zwei Funktionen implementiert: Die erste Funktion besteht darin, den Zeitstempel jedes Tages im Vormonat zu generieren, was für die Anzeige im Echarts-Diagramm praktisch ist. Die Methode lautet wie folgt. Hierbei ist zu beachten, dass der letzte Monat mithilfe der Kalenderklasse -1 ermittelt wird:
private List<String> getEveryDayOfMonth() {
List<String> result = new ArrayList<String>();
//获取Calendar
Calendar calendar=Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, 1);
calendar.add(Calendar.MONTH, -1);//获取上个月
Date startDate = calendar.getTime();
//设置日期为本月最大日期
calendar.set(Calendar.DATE, calendar.getActualMaximum(Calendar.DATE));
Date endDate = calendar.getTime();
while(startDate.getTime() <= endDate.getTime()){
String dayStr = DateUtils.parseDateToStr("yyyy-MM-dd", startDate);
result.add(dayStr);
calendar.setTime(startDate);
calendar.add(Calendar.DATE,1);
Date tempDate = calendar.getTime();
startDate = tempDate;
}
return result;
}Auf dieser Basis simulieren wir den Informationsversand jeden Tag innerhalb eines Monats und generieren Echarts-Objekte.
public String buildOrgzSendSmsCount(String orgzName) {
String result = "";
List<String> dateList = this.getEveryDayOfMonth();
GsonOption option = new GsonOption();
option.title().text("【" + orgzName + "】上月短信统计（单位：条）");
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);
List<String> months = new ArrayList<String>();
List<Integer> sendCounts = new ArrayList<Integer>();
Random random = new Random();
for (String date : dateList) {
months.add(date);
sendCounts.add(random.nextInt(100));
}
CategoryAxis categoreAxis = new CategoryAxis();
categoreAxis.data(months.toArray()).axisLabel().interval(0).rotate(30);
option.xAxis(categoreAxis);
option.yAxis(new ValueAxis());
Bar bar = new Bar("短信发送量");
bar.data(sendCounts.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. Hintergrundschnittstellenaufruf
Der Hintergrund verwendet eine offene Schnittstelle, um externe Aufrufe bereitzustellen. Zur Vereinfachung der Demonstration werden nicht zu viele Parameter hinzugefügt. Die tatsächliche Situation kann bei Bedarf relevante Parameter übergeben. Hierbei ist zu beachten, dass bei Verwendung des AjaxResult-Objekts für die Ausgabe das zurückgegebene Objekt zurückgegeben wird JSON-Parameter verwenden Daten zum Übertragen.
@PostMapping("/echarts/getmsgsendchart")
@ResponseBody
public AjaxResult msgSendChart(){
String charts = echartService.buildOrgzSendSmsCount("信息技术部");
AjaxResult result = AjaxResult.success();
result.put("data", charts);
return result;
}Viertens: HTML5-Webseitendefinition
Auf der HTML-Seite wird der folgende Code verwendet, um das Objekt des SMS-Versandvolumendiagramms zu definieren. Der Schlüsselcode lautet wie folgt. Beachten Sie, dass die Höhe des Diagramms hier direkt auf 200 Pixel festgelegt ist:
<div id="tab-4" class="tab-pane">
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>短信发送量</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div style="height:200px" id="echarts-msgsend-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>Fünftens: Ajax-Dateninitialisierung
Verwenden Sie Jquery+Bootstrap, um das Diagramm zu initialisieren.
msgsendChart = echarts.init(document.getElementById("echarts-msgsend-chart"));
$(window).resize(msgsendChart.resize);
charts.push(msgsendChart);
initMsgSendChart();function initMsgSendChart(){
$.ajax({
type: "POST",
url: ctx + "/demo/report/echarts/getmsgsendchart",
data: {},
dataType : "json",
success: function(serverdata){
if(serverdata != ""){
var serverJsonData = eval('('+serverdata.data+')');
msgsendChart.setOption(serverJsonData,true);
$(window).resize(msgsendChart.resize);
}
},
error:function(data){
parent.layer.alert('系统发生错误！', {icon: 5});
}
});
}Beachten Sie, dass der obige Code lautet: var serverJsonData = eval('('+serverdata.data+')'); Hier wird die Eval-Funktion für die Parameterkonvertierung verwendet. Gleichzeitig ist zu beachten, dass serverdata.data; die Die Daten dahinter sind die zuvor erwähnten. Der übergebene Hintergrund gibt den Schlüssel in AjaxResult zurück.
6. Diagrammdarstellung und Prozessanalyse
Simulieren Sie den Anzeigeeffekt der Histogrammseite der SMS-Versandvolumenstatistik.
Werfen wir einen Blick auf die spezifische Situation der Schnittstellenanforderung:
{"msg":"操作成功","code":0,"data":"{\"calculable\": true,\"title\": {\"text\": \"【信息技术部】上月短信统计（单位：条）\"},\"toolbox\": {\"feature\": {\"magicType\": {\"show\": true,\"title\": {\"bar\": \"柱形图切换\",\"stack\": \"堆积\",\"tiled\": \"平铺\",\"line\": \"折线图切换\"},\"type\": [\"line\",\"bar\"]},\"saveAsImage\": {\"show\": true,\"title\": \"保存为图片\",\"type\": \"png\",\"lang\": [\"点击保存\"]}},\"show\": true},\"tooltip\": {\"trigger\": \"axis\"},\"legend\": {\"data\": [\"短信发送量\"],\"y\": \"bottom\",\"padding\": 0},\"xAxis\": [{\"type\": \"category\",\"axisLabel\": {\"interval\": 0,\"rotate\": 30},\"data\": [\"2023-07-01\",\"2023-07-02\",\"2023-07-03\",\"2023-07-04\",\"2023-07-05\",\"2023-07-06\",\"2023-07-07\",\"2023-07-08\",\"2023-07-09\",\"2023-07-10\",\"2023-07-11\",\"2023-07-12\",\"2023-07-13\",\"2023-07-14\",\"2023-07-15\",\"2023-07-16\",\"2023-07-17\",\"2023-07-18\",\"2023-07-19\",\"2023-07-20\",\"2023-07-21\",\"2023-07-22\",\"2023-07-23\",\"2023-07-24\",\"2023-07-25\",\"2023-07-26\",\"2023-07-27\",\"2023-07-28\",\"2023-07-29\",\"2023-07-30\",\"2023-07-31\"]}],\"yAxis\": [{\"type\": \"value\"}],\"series\": [{\"name\": \"短信发送量\",\"type\": \"bar\",\"markPoint\": {\"data\": [{\"name\": \"最大值\",\"type\": \"max\"},{\"name\": \"最小值\",\"type\": \"min\"}]},\"markLine\": {\"data\": [{\"name\": \"平均值\",\"type\": \"average\"}]},\"data\": [60,87,89,81,69,65,89,45,1,29,25,27,24,79,50,23,20,8,60,72,31,61,7,10,57,5,65,74,64,29,4]}]}"}Zusammenfassen
Das Obige stellt den Hauptinhalt dieses Artikels dar. In diesem Artikel wird das Ruoyi-Framework als Beispiel verwendet, um den dynamischen Zugriff auf Daten basierend auf der Ajax-Technologie ausführlich zu erläutern, damit die Leser verstehen können, wie dynamische Datenzugriffscodes entwickelt werden. Das Schreiben ist voreilig und es gibt zwangsläufig viele Probleme. Freunde sind herzlich willkommen, Kritik und Korrekturen vorzunehmen.