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