hadoop下生成echarts关系图
数据
1 O700 O2833 2 1800 1 O700 O331 1 1900 1 O700 O3425 1 600 1 O700 O350 1 960 1 O700 O3516 2 2100 1 O700 O3826 2 960
读取文件类
public class FileReadFromHdfs { public static List<Data> getStringByTXT() { Configuration conf=new Configuration(); String txtFilePath = "hdfs://地址:9000/文件"; StringBuffer buffer = new StringBuffer(); FSDataInputStream fsr = null; BufferedReader bufferedReader = null; String lineTxt = null; List<Data> datas=new ArrayList<Data>(); try { FileSystem fs = FileSystem.get(URI.create(txtFilePath),conf); fsr = fs.open(new Path(txtFilePath)); bufferedReader = new BufferedReader(new InputStreamReader(fsr)); while ((lineTxt = bufferedReader.readLine()) != null) { String line=lineTxt.toString(); String[] arr=line.split("\t"); Data data=new Data(); data.setaString(arr[0]); data.setbString(arr[1]); //data.setcString(arr[2]); datas.add(data); } } catch (Exception e) { e.printStackTrace(); } finally { if (bufferedReader != null) { try { bufferedReader.close(); } catch (IOException e) { e.printStackTrace(); } } } return datas; }
echarts关系图页面
<title>数据分析</title> </head> <body> <% FileReadFromHdfs4 fileReadFromHdfs4 =new FileReadFromHdfs4(); List<Plane> planes=fileReadFromHdfs4.getStringByTXT(); FileReadFromHdfs5 fileReadFromHdfs5 = new FileReadFromHdfs5(); List<HangXian> hangXians =fileReadFromHdfs5.getStringByTXT(); %> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:800px;width: 1500px"></div> <!-- ECharts单文件引入 --> <script src="echarts.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> <script type="text/javascript"> var w = 400; // svg宽度 var h = 200; // svg高度 var dataset = []; // 坐标点数据集合 var xRange = Math.random() * 1000; // x坐标的范围 var yRange = Math.random() * 1000; // y坐标的范围 var num = 50; // 点的个数 var padding = 50; // 描点区域距离svg边界的间距 // 基于准备好的dom，初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: 'NPM Dependencies' }, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series : [ { type: 'graph', layout: 'none', // progressiveThreshold: 700, data:[ <% Plane[] planes2 =new Plane[planes.size()/30]; for(int i=0 ; i<(planes2.length ); i++) { planes2[i]=planes.get(i); int num=Integer.parseInt(planes2[i].getNum()); %> { x: Math.floor(Math.random()*xRange), y: Math.floor(Math.random()*yRange), name:'<%=planes2[i].getStart()%>', symbolSize: <%=num/10000%>, itemStyle: { normal: { color:'#'+Math.floor(Math.random()*0xffffff).toString(16) } } }, <% } %> ], edges: [ <% HangXian[] hangXians2=new HangXian[hangXians.size()]; for(int j=0;j<hangXians2.length;j++){ hangXians2[j]=hangXians.get(j); %> { source:'<%=hangXians2[j].getStart()%>', target:'<%=hangXians2[j].getEnd()%>', }, <% } %> ], label: { emphasis: { position: 'right', show: true } }, roam: true, focusNodeAdjacency: true, lineStyle: { normal: { width: 0.5, curveness: 0.3, opacity: 0.7 } } } ] }; // 为echarts对象加载数据 myChart.setOption(option); </script> </body> </html>
