Ajax를 사용하여 Ruoyi에서 Echarts 차트를 동적으로 생성하는 방법

머리말

        이전 블로그 포스트에서 java를 사용하여 백그라운드에서 Echarts 차트 생성 구성 요소를 생성하는 방법을 설명했습니다.블로그 포스트는 다음과 같습니다.

일련 번호	블로그 링크
1	JAVA 개발 기반 Echarts 백그라운드 생성 프레임워크
2	Ruoyi 단일 프로젝트와 Echarts4.2.1 지도의 통합을 위한 아이디어 및 솔루션
삼	Echarts 멀티차트 통합 시 탭 모드에서 Ruoyi 단일 버전이 표시되지 않는 문제 해결

        이전 블로그에서 Echarts 차트의 생성이 분산된 방식으로 소개되었습니다. 그러나 차트를 생성할 때 데이터 소스 정보는 기본적으로 미리 설정되어 있으며 이는 정적 데이터와 동일합니다. 예를 들어 동적 데이터 액세스 시나리오의 경우 ajax를 통해 백그라운드 데이터를 동적으로 얻은 다음 데이터를 프런트 엔드 차트 구성 요소로 설정해야 합니다. 이 기사에서는 독자가 동적 데이터 액세스 코드를 개발하는 방법을 이해할 수 있도록 Ruoyi 프레임워크를 예로 들어 Ajax 기술을 기반으로 하는 데이터의 동적 액세스에 대해 자세히 설명합니다.

1. Maven 의존성 정의

        데모 프로젝트는 Maven 의존성 방식으로 정의되어 있습니다.여기서 Echarts의 자바 백그라운드 생성 컴포넌트와 Gson 패키지를 소개해야 합니다.Gson은 echarts 컴포넌트를 생성하기 위한 의존성 패키지입니다.꼭 추가해 주세요.

<!-- 增加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. 데이터 시뮬레이션 생성

        데모의 단순화를 위해 데이터 구성을 위한 데이터 쿼리를 시뮬레이트하는 데 Java만 사용됩니다. 실제 상황에서는 데이터베이스의 실제 데이터를 쿼리해야 합니다. 이 예제에서 설명하는 시나리오는 지난 달 부서의 SMS 발송량 정보를 조회하는 것입니다.

        이것은 두 가지 기능으로 구현됩니다.첫 번째 기능은 Echarts 차트에 표시하기에 편리한 이전 달의 매일 타임스탬프를 생성하는 것입니다. 방법은 다음과 같으며 여기서 주의할 점은 마지막 달은 달력 클래스 -1을 사용하여 구한다는 것입니다.

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;
	}

        이를 바탕으로 한 달 동안 매일 데이터를 보내는 정보를 시뮬레이션하고 Echarts 객체를 생성합니다.

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. 백그라운드 인터페이스 호출

        배경은 개방형 인터페이스를 사용하여 외부 호출을 제공합니다.데모의 편의를 위해 너무 많은 매개변수를 추가하지 않습니다.실제 상황은 필요에 따라 관련 매개변수를 전달할 수 있습니다.여기서 AjaxResult 개체를 출력에 사용할 때 반환된 json 매개 변수는 데이터를 사용하여 수행합니다.

@PostMapping("/echarts/getmsgsendchart")
@ResponseBody
public AjaxResult msgSendChart(){
    String charts = echartService.buildOrgzSendSmsCount("信息技术部");
    AjaxResult result = AjaxResult.success();
    result.put("data", charts);
    return result;
}

네, HTML5 웹 페이지 정의

        html 페이지에서 다음 코드는 SMS 발신량 차트의 객체를 정의하는 데 사용됩니다.키 코드는 다음과 같습니다.여기서 차트의 높이는 200px로 직접 설정됩니다.

<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>

다섯, Ajax 데이터 초기화

        Jquery+bootstrap을 사용하여 차트를 초기화하고,

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});
		    	}
	    });
}

        참고로 위의 코드는 var serverJsonData = eval('('+serverdata.data+')'); 여기서 매개변수 변환을 위해 eval 함수를 사용합니다. 뒤의 데이터는 앞에서 언급한 것입니다. 전달된 배경은 AjaxResult의 키를 반환합니다.

6. 차트 표시 및 프로세스 분석

        SMS 전송 볼륨 통계의 히스토그램 페이지 표시 효과를 시뮬레이션합니다. 

 특정 인터페이스 요청 상황을 살펴보겠습니다.

{"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]}]}"}

요약하다

        이상은 본 기사의 주요 내용이며, 본 기사는 Ruoyi 프레임워크를 예로 들어 Ajax 기술을 기반으로 데이터의 동적 접근에 대해 심도 있게 설명하여 독자들이 동적 데이터 접근 코드를 개발하는 방법을 이해할 수 있도록 한다. 글이 성급하고 필연적으로 많은 문제가 있으며 친구들의 비판과 수정을 환영합니다.