您的位置：首页 > 其它

关于echarts和ajax的简单运用

2017-09-25 09:02 274 查看

最近有一个很好的机会让我去公司摸鱼。~~

然后接触了echarts和ajax的运用

刚开始一直没想明白后面慢慢开始了解起来。

通过springmvc框架下在control类引入jacakson包对得到的泛型List转换为 json数据。传递给前台显示。

代码如下：

control类：@Controller
public class EchartsContorller {

@Autowired

private EchartsService echartsService;

@RequestMapping(value = "test",produces ="text/html; charset=utf-8")
public void echartsTest(HttpServletResponse Response, HttpServletRequest Request, Model model)throws Exception
{
List<EchartsEntity> list = echartsService.getEchartsAll();
List<EchartsEntity> list1 = new ArrayList<EchartsEntity>();

for(int i=0;i<list.size();i++)
{
list1.add(i,list.get(i));
}
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(list1);

Response.setCharacterEncoding("UTF-8");
Response.setContentType("text/html,charset=utf-8");
Response.getWriter().print(json);

}

}
前台JSP:

<script type="text/javascript">
var names=[];
var prices=[];
var timer= null;

function clearData()
{
if(names.length!=0)names=[];
if(prices.length!=0)prices=[];

}
$(document).ready(function () {
$("#test").click(function aa() {
clearInterval(timer);
timer=setInterval(function () {
clearData();
$.ajax(
{
type:"post",
async:true,
url:'test.do',
data:{},
dataType:"json",
scriptCharset:'utf-8',
success:function (result) {
if(result)
{
for (var i=0;i<result.length;i++)
{
names.push(result[i].testname);
prices.push(result[i].price);
}
mychart.hideLoading();
mychart.setOption({
xAxis:{
data:names
},
series:[{
data:prices
}]
});
}
}
}
)

},1000);

})
})
</script>

</head>
<body>
<div id="main" style="width:600px;height: 400px;"></div>
<script type="text/javascript">
var mychart = echarts.init(document.getElementById('main'));

var option = {
title:{
text:'Echart入门'
},

tooltip:{
trigger:'axis'
},
toolbox:
{
show:true,
feature:{
dataZoom:{
yAxisIndex:'none'
},
dataView:{readOnly:false},
magicType:{
type:['line','bar']
},
restore:{},
saveAsImage:{}
},
},
legend:{
data:['销量']
},
xAxis:{
type:'category',
data:[]
},
yAxis:{},
series:[
{
name:'价格',
type:'line',
data:[],
markPoint: {
symbol:'pin',
symbolSize:80
},
}
]
};
mychart.clear();
mychart.setOption(option);
mychart.showLoading();

</script>

展示结果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航