echart通过ajax获取数据

通过ajax获取后台数据

Controller层：

@RequestMapping(value="/index5",method=RequestMethod.POST)public @ResponseBody Map<String, Object> echartsIndex51(){Map<String, Object> map=new HashMap<>();List<Echarts> list=echartsService.getdata();List<Object> category=new ArrayList<>();List<Object> man=new ArrayList<>();List<Object> woman=new ArrayList<>();for (int i = 0; i < list.size(); i++) {category.add(list.get(i).getProvince_id());man.add(list.get(i).getMan());woman.add(list.get(i).getWoman());}map.put("category", category);map.put("man", man);map.put("woman", woman);        map.put("result", "success");       return map;}

js：

$(function() {var btn = $("#getdata");var dataSize;// 样式var mychart = echarts.init(document.getElementById('main'));mychart.setOption({title : {text : '各省男女人数统计'},legend : {},xAxis : {type : 'category',data:[]},yAxis : {},// tooltip:提示框组件tooltip : {trigger : 'axis',axisPointer : {type : 'cross',crossStyle : {color : 'red'},lineStyle : {color : 'red'}}},// toolbox:工具栏toolbox : {emphasis : {},show : true,showTitle : true,feature : {saveAsImage : {},// 保存为图片restore : {},// 还原dataView : {},// 数据视图magicType : {type : ['line', 'bar']},// 数据缩放dataZoom : {}}},series : [{name:'男',type : 'bar',data:[]}, {name:'女',type : 'bar',data:[]}]});// 异步获取数据btn.click(function(){$.post('/echart/index5',function(data){mychart.setOption({xAxis : {type : 'category',data:data.category},series : [{name:'男',type : 'bar',data:data.man}, {name:'女',type : 'bar',data:data.woman}]});},'json');});});

echart通过ajax获取数据相关推荐

vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
ajax 微信code获取_获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "= ...
ajax获取数据中文乱码问题最简单的完美解决方案
ajax获取数据中文乱码问题最简单的完美解决方案参考文章: (1)ajax获取数据中文乱码问题最简单的完美解决方案 (2)https://www.cnblogs.com/konglxblog/p/1 ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的opti ...

echart通过ajax获取数据

通过ajax获取后台数据

echart通过ajax获取数据相关推荐

最新文章

热门文章