使用Echarts和Ajax动态加载数据进行大数据可视化

在前面的帖子【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