javaweb EChart绘制折线图

首先引入echart的js包:

<script type="text/javascript" src="front/resource/js/echarts.min.js"></script>

<script type="text/javascript" src="front/resource/js/jquery-1.9.1.min.js"></script>

 

 html页面如下:

<div id="main" style="width: 90%;height:120%;"></div>

相关jquery ajax初始化函数如下:

<script type="text/javascript">
function echartInit(){
	var option = {
	   	    tooltip: {
	   	        trigger: 'axis'
	   	    },
	   	    legend: {
	   	    	left: '3%',
	   	    	data:['价格走势']
	   	    },
	   	    grid: {
	   	    	top:'20%',
	   	        left: '2%',
	   	        right: '3%',
	   	        bottom: '10%',
	   	        containLabel: true
	   	    },
	   	    toolbox: {
	   	        feature: {
	   	            saveAsImage: {}
	   	        }
	   	    },
	   	    xAxis: {
	   	        type: 'category',
	   	        boundaryGap: false,
	   	        data: []
	   	    },
	   	    yAxis: {
	   	        type: 'value'
	   	    },
	   	    series:{
	   	       	type:'line',
	   	        stack: '价格',
	   	        itemStyle : { normal: {label : {show: false}}},
	   	        data:[]
	   	    }
	   	};
	$.ajax({
		  type: 'POST',
		  url: baseurl+"/front/app/home/getPriceTrendcyShow.htm",
		  data: {
			  goodclassId:baojia_goodclass
		  },
		  success: function(result){
			//进行请求后要数据
  		    //x轴显示
  		    option.xAxis.data = result.name;
  		    //主体内容
  		   	option.series.data = result.data.data;
  		  	option.series.name = result.data.name;
			// 基于准备好的dom,初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			myChart.hideLoading();
			// 使用刚指定的配置项和数据显示图表
			myChart.setOption(option,true);
			myChart.hideLoading();
		  },
		  error : function(errorMsg) {
	            alert("无该品类实时成交数据!");
	      },
		  dataType : "json"
		});
}
    </script>

 后台Controller如下:

@RequestMapping(value="/getPriceTrendcyShow")
	@ResponseBody
	public Object getPriceTrendcyShow(HttpServletRequest request,HttpServletResponse response,
			@RequestParam(name="kindId",defaultValue="1") String kindId,
			@RequestParam(name="currentPage",defaultValue="1") int pageno){
		List<String> dateList = new ArrayList<>();
		JSONObject json=new JSONObject();
		Series seriesVo = new Series();
		List<BigDecimal> priceList = new ArrayList<>();
		Map<String,Object> mmp = new HashMap<>();
		Map<String, Object> tMp = new HashMap<>();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd");
		//参数传递
		tMp.put("kindId", kindId);
		mmp = this.priceConditionService.getPriceTrendcy(tMp,pageno,10);
		Integer ErrorCode = (Integer) mmp.get("ErrorCode");
		if(ErrorCode!=null&&ErrorCode.equals(DictionaryCode.ERROR_WEB_REQ_SUCCESS)){
			List<PriceTrendIfo> plist = (List<PriceTrendIfo>) mmp.get("Obj");
			if(plist.size()<=0){
				try {
		        	response.setContentType("text/html;charset=utf-8");
					response.getWriter().write("");
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				return null;
			}
			for (PriceTrendIfo priceTrendIfo : plist) {
				DecimalFormat df = new DecimalFormat("0.000");
				
				//priceList.add(BigDecimal.valueOf(priceTrendIfo.getCurrentAVGPrice()));
				priceList.add(new BigDecimal(df.format(priceTrendIfo.getCurrentAVGPrice())));
				try {
					Date date = sdf.parse(priceTrendIfo.getDealDate());
					dateList.add(sdf2.format(date));
				} catch (ParseException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
			
			ezs_goods_class goodsClass = goodsClassMapper.selectByPrimaryKey(Long.valueOf(kindId));
			//对列表进行转向处理
			Collections.reverse(priceList);
			Collections.reverse(dateList);
			seriesVo.setData(priceList);
			seriesVo.setName(goodsClass.getName());
	        json.put("name", dateList);
	        json.put("data", seriesVo);
	        try {
	        	response.setContentType("text/html;charset=utf-8");
				response.getWriter().write(json.toString());
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else{
			//无数据
			try {
	        	response.setContentType("text/html;charset=utf-8");
				response.getWriter().write("");
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return null;
	}

猜你喜欢

转载自blog.csdn.net/weixin_42130892/article/details/81303619