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.效果

每次點擊查詢圖標展示都會變化