echarts3点击按钮动态更新数据

1.后台代码（模拟数据）

@RequestMapping("/queryMiddleAppinfo")
	@ResponseBody
	public Map queryMiddleAppinfo(){
		List<Integer> list1 = new ArrayList<Integer>();
		list1.add((int)Math.floor(Math.random()*20+1));
		list1.add((int)Math.floor(Math.random()*20+1));
		list1.add((int)Math.floor(Math.random()*20+1));
		list1.add((int)Math.floor(Math.random()*20+1));
		list1.add((int)Math.floor(Math.random()*20+1));
		list1.add((int)Math.floor(Math.random()*20+1));
		list1.add((int)Math.floor(Math.random()*20+1));
		
		List<Integer> list2 = new ArrayList<Integer>();
		list2.add((int)Math.floor(Math.random()*20+1));
		list2.add((int)Math.floor(Math.random()*20+1));
		list2.add((int)Math.floor(Math.random()*20+1));
		list2.add((int)Math.floor(Math.random()*20+1));
		list2.add((int)Math.floor(Math.random()*20+1));
		list2.add((int)Math.floor(Math.random()*20+1));
		list2.add((int)Math.floor(Math.random()*20+1));
		
		Map map = new HashMap();
		map.put("man", list1);
		map.put("women", list2);
		
		return map;
	}

2.前台界面

按钮

<button class="layui-btn" data-type="reload">搜索</button>

存放图标的div

<div id="main-line" style="height: 450px;"></div>

3.echarts代码

// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
        	 
        	    tooltip: {
        	        trigger: 'axis'
        	    },
        	    legend: {
        	        data: ['男', '女']
        	    },
        	    toolbox: {
        	        show: false,
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    calculable: true,
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: ['1930', '1940', '1950', '1960', '1970', '1980','1990']
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value'
        	        }
        	    ],
        	    series: [
        	        {
        	            name: '男',
        	            type: 'bar',
        	            data: [],
        	            markPoint: {
        	                data: [
        	                    {type: 'max', name: '最大值'},
        	                    {type: 'min', name: '最小值'}
        	                ]
        	            }
        	        },
        	        {
        	            name: '女',
        	            type: 'bar',
        	            data: [],
        	            markPoint: {
        	                data: [
        	                    {type: 'max', name: '最大值'},
        	                    {type: 'min', name: '最小值'}
        	                ]
        	            }
        	        }
        	    ]
        });

4.点击搜索按钮触发的函数

function loadsexnums(){
        	var nums_man=[];    //存放男性数量
            var nums_women=[];    //存放女性数量
            
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            
            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "/queryMiddleAppinfo",    //请求发送到TestServlet处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                    	   var man = result.man;
                    	   var women = result.women;
                           for(var i=0;i<man.length;i++){       
                        	   nums_man.push(man[i]);    //挨个取出类别并填入类别数组
                           }
                           for(var i=0;i<women.length;i++){       
                        	   nums_women.push(women[i]);    //挨个取出销量并填入销量数组
                           }
                           
                           myChart.hideLoading();    //隐藏加载动画
                           myChart.setOption({        //加载数据图表
                        	   series: [
                            	        {
                            	            data: nums_man //此处只对data数据修改即可
                            	        },
                            	        {
                            	            data: nums_women
                            	        }
                            	    ]
                           }); 
                           
                    }
                
               },
                error : function(errorMsg) {
                	alert("图表请求数据失败!");
                	myChart.hideLoading();
                }
           })
        }

5.效果

每次点击查询图标展示都会变化