使用echarts绘制折线图

一、下载Echarts库,下载地址为:http://www.echartsjs.com/download.html
使用echarts绘制折线图_第1张图片
二、贴上demo代码
(1)前台代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>





测试曲线插件









(2)后台代码

@RequestMapping(value="/testEchars",method =RequestMethod.GET,produces = "application/json; charset=utf-8")
	public String testEchars(){
		List> resultList = new ArrayList>();
		Map rultMap0 = new HashMap();
		rultMap0.put("RESULT", "0.0");
		rultMap0.put("CTIME", "2018-10-10");
		resultList.add(rultMap0);
		Map rultMap1 = new HashMap();
		rultMap1.put("RESULT", "0.1");
		rultMap1.put("CTIME", "2018-10-11");
		resultList.add(rultMap1);
		Map rultMap2 = new HashMap();
		rultMap2.put("RESULT", "0.2");
		rultMap2.put("CTIME", "2018-10-12");
		resultList.add(rultMap2);
		Map rultMap3 = new HashMap();
		rultMap3.put("RESULT", "0.3");
		rultMap3.put("CTIME", "2018-10-13");
		resultList.add(rultMap3);
		Map rultMap4 = new HashMap();
		rultMap4.put("RESULT", "0.4");
		rultMap4.put("CTIME", "2018-10-14");
		resultList.add(rultMap4);
		Map rultMap5 = new HashMap();
		rultMap5.put("RESULT", "0.5");
		rultMap5.put("CTIME", "2018-10-15");
		resultList.add(rultMap5);
		Map rultMap6 = new HashMap();
		rultMap6.put("RESULT", "0.6");
		rultMap6.put("CTIME", "2018-10-16");
		resultList.add(rultMap6);
		request.setAttribute("resultList", JsonUtils.listToJson(resultList));
		return "echart/testEchars";
	}

这个方法是在controller里面进入测试曲线图页面的跳转方法,里面会给一些初始化数据,返回前台。
前台调用var resultList = JSON.parse(’${resultList}’);接收数据然后显示,显示效果如下:
使用echarts绘制折线图_第2张图片

@RequestMapping(value="/getEcharsData",method =RequestMethod.POST,produces = "application/json; charset=utf-8")
	@ResponseBody
	public String getEcharsData(){
		List> resultList = new ArrayList>();
		Map rultMap0 = new HashMap();
		rultMap0.put("RESULT", "0.7");
		rultMap0.put("CTIME", "2018-10-17");
		resultList.add(rultMap0);
		Map rultMap1 = new HashMap();
		rultMap1.put("RESULT", "0.8");
		rultMap1.put("CTIME", "2018-10-18");
		resultList.add(rultMap1);
		Map rultMap2 = new HashMap();
		rultMap2.put("RESULT", "0.9");
		rultMap2.put("CTIME", "2018-10-19");
		resultList.add(rultMap2);
		Map rultMap3 = new HashMap();
		rultMap3.put("RESULT", "1.0");
		rultMap3.put("CTIME", "2018-10-20");
		resultList.add(rultMap3);
		return JsonUtils.listToJson(resultList);
	}

这个方法是前台向后台请求数据时,调用的接口。前台通过queryResults()向后台请求数据,然后更新图表。
点击页面的“更新数据”按钮会从后台请求数据更新,显示如下:
使用echarts绘制折线图_第3张图片

注:demo环境是SMM框架

你可能感兴趣的:(JavaWeb前端)