首先引入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;
	}