使用Echarts和Ajax動態載入資料進行大資料視覺化

土豆拍死馬鈴薯發表於2017-08-27
Echarts大資料視覺化

在前面的帖子【Java/Web呼叫Hadoop進行MapReduce示例】中，我們實現了JavaWeb呼叫Hadoop統計使用者上傳的文字檔案中的單詞出現的次數。

效果如下：

現在我們使用Echarts進行資料視覺化，達到如下目的：




二、伺服器端的改動

相比之前，伺服器端改用json返回資料，將排過序的map返回，key為單詞，value為該單詞出現的次數。

@RequestMapping("/wordcount")
	//呼叫Hadoop進行mapreduce
	public void wordcount(HttpServletRequest request,
			HttpServletResponse response) {
		Map<String,Integer> tempMap = new HashMap<String,Integer>();
		List<String> strlist= new ArrayList<String>();
		System.out.println("進入controller wordcount ");
		User user = (User) request.getSession().getAttribute("user");
		System.out.println(user);
		// if(user == null)
		// return "login";
		WordCount c = new WordCount();//新建單詞統計任務
		String username = user.getU_username();
		String input = "hdfs://chenjie-virtual-machine:9000/user/" + username
				+ "/wordcountinput";//指定Hadoop檔案系統的輸入資料夾
		String output = "hdfs://chenjie-virtual-machine:9000/user/" + username
				+ "/wordcountoutput";//指定Hadoop檔案系統的輸出資料夾
		String reslt = output + "/part-r-00000";//預設輸出檔案
		try {
			Thread.sleep(3*1000);
			c.main(new String[] { input, output });//呼叫單詞統計任務
			Configuration conf = new Configuration();//新建Hadoop配置
			conf.addResource(new Path("/opt/hadoop-1.2.1/conf/core-site.xml"));//新增Hadoop配置，找到Hadoop部署資訊
			conf.addResource(new Path("/opt/hadoop-1.2.1/conf/hdfs-site.xml"));//Hadoop配置，找到檔案系統

			FileSystem fileSystem = FileSystem.get(conf);//得打檔案系統
			Path file = new Path(reslt);//找到輸出結果檔案
			FSDataInputStream inStream = fileSystem.open(file);//開啟
			URI uri = file.toUri();//得到輸出檔案路徑
			System.out.println(uri);
			String data = null;
			while ((data = inStream.readLine()) != null ) {
				strlist.add(data);
				int bt = data.lastIndexOf('\t');//Hadoop的輸出檔案每一行為word   times的形式，單詞和次數之間為一個tab鍵（\t）
				tempMap.put(data.substring(0,bt), Integer.parseInt(data.substring(bt+1,data.length())));
				//System.out.println(data.substring(0,bt) + "出現了" + Integer.parseInt(data.substring(bt+1,data.length())) + "次");
				//response.getOutputStream().println(data);//講結果檔案寫回使用者網頁
			}
			//response.getOutputStream().println("success.");//講結果檔案寫回使用者網頁

			inStream.close();
		
			tempMap = sortByValue(tempMap);//將該Map按出現次數從大到小排序
		
			Map<String,Integer> resultMap = new HashMap<String,Integer>();
			Set<String> keys = tempMap.keySet();
			int size = 50;//找到前20個
			for(String key : keys)
				{
				if(size==0)
					break;
				resultMap.put(key, tempMap.get(key));
				size--;
				}
			
	
			Gson gson = new Gson();
			String json  = gson.toJson(resultMap);//將結果轉化為json字串
			request.getSession().setAttribute("json", json);//存入session中
			response.getWriter().write(json);//返回json字串
		} catch (Exception e) {
			System.err.println(e.getMessage());
			e.printStackTrace();
		}
	}

	public static <K, V extends Comparable<? super V>> Map<K, V> sortByValue(Map<K, V> map) {
        List<Map.Entry<K, V>> list = new LinkedList<>(map.entrySet());
        Collections.sort(list, new Comparator<Map.Entry<K, V>>() {
            @Override
            public int compare(Map.Entry<K, V> o1, Map.Entry<K, V> o2) {
                return (o2.getValue()).compareTo(o1.getValue());//從大到小
            }
        });

        Map<K, V> result = new LinkedHashMap<>();
        for (Map.Entry<K, V> entry : list) {
            result.put(entry.getKey(), entry.getValue());
        }
        return result;
    }



三、前端

1、ajax從後臺獲得資料：

function getResult()
  {
      //alert(dataURL);
	//http://192.168.153.128:8080/CJHadoopOnline/hadoop/wordcountResult
      $.ajax({
          type: "POST",
          url:"hadoop/wordcountResult",
          async:false,
          success:function(map){
            alert(map);    
            //處理得到的json資料
          }
      });
  }
</script>


2、Echarts柱狀圖畫法 


  <script type="text/javascript">
function getResult()
  {
      //alert(dataURL);
	//http://192.168.153.128:8080/CJHadoopOnline/hadoop/wordcountResult
      $.ajax({
          type: "POST",
          url:"hadoop/wordcountResult",
          async:false,
          success:function(map){
            alert(map);
           
            var jsonobj=eval('('+map+')');//將json字串轉為json物件
            
            var keys = new Array();//新建一個陣列儲存所有的key
            var values = new Array();//新建一個陣列儲存所有的value
            for(var key in jsonobj)
            	{
            	keys.push(key);
            	values.push(jsonobj[key]);//sonobj[key]為key對應的value
            	}
            
            var myChart = echarts.init(document.getElementById('main'));
         // 顯示標題，圖例和空的座標軸
         myChart.setOption({
             title: {
                 text: 'Hadoop處理的詞頻統計'
             },
             tooltip: {},
             legend: {
                 data:['出現次數']
             },
             xAxis: {
                 data: []
             },
             yAxis: {},
             series: [{
                 name: '出現次數',
                 type: 'bar',
                 data: []
             }]
         });
            
         myChart.setOption({
             xAxis: {
                 data: keys
             },
             series: [{
                 // 根據名字對應到相應的系列
                 name: '出現次數',
                 data: values
             }]
         });
            
            
          }
      });
  }
</script>

3、Echarts字元雲畫法 

function getResult()
  {
      //alert(dataURL);
	//http://192.168.153.128:8080/CJHadoopOnline/hadoop/wordcountResult
      $.ajax({
          type: "POST",
          url:"hadoop/wordcountResult",
          async:false,
          success:function(map){
            alert(map);
           
            var jsonobj=eval('('+map+')');//將json字串轉換為json物件
           
            var items = new Array();//新建一個物件陣列，從官方靜態事例data: [{},{},{}]看出資料是一個物件陣列
      
            for(var key in jsonobj)
            	{
            	var item = new Object(); //新建一個物件
            	item.name = key;//該物件的name屬性值為key
            	item.value = jsonobj[key];//該物件的value屬性值為jsonobj[key];
            	items.push(item);
            	}
   				
            var chart = echarts.init(document.getElementById('main'));

            var option = {
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    
                    data:items
                    /*
                     data: [
                        {
                            name: '詞雲',
                            value: 10000,
                            textStyle: {
                                normal: {
                                    color: 'black'
                                },
                                emphasis: {
                                    color: 'red'
                                }
                            }
                        },
                        {
                            name: '雲端計算',
                            value: 555
                        },
                        {
                            name: '人工智慧',
                            value: 550
                        }
                    ]
                    */
                   
                } ]
            };

            chart.setOption(option);
            window.onresize = chart.resize;
      
          }
      });
  }
</script>

原始碼：

https://github.com/tudoupaisimalingshu/CJHadoopOnline


相關文章