内容简介:使用解决跨域访问,需安装使用Element UI实现
上传文件
上传文件的后端服务
使用 Python Flask 实现。
import os from flask import Flask, request, redirect, url_for, send_from_directory from werkzeug import secure_filename from flask_cors import CORS UPLOAD_FOLDER = '/path/to/the/uploads' ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif']) app = Flask(__name__) CORS(app) app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS @app.route('/', methods=['GET', 'POST']) def upload_file(): if request.method == 'POST': file = request.files['file'] if file and allowed_file(file.filename): filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) return redirect(url_for('uploaded_file', filename=filename)) return ''' <!doctype html> <title>Upload new File</title> <h1>Upload new File</h1> <form action="" method=post enctype=multipart/form-data> <p><input type=file name=file> <input type=submit value=Upload> </form> ''' @app.route('/uploads/<filename>') def uploaded_file(filename): return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
解决跨域访问,需安装 flask-cors
上传组件
使用Element UI实现
// action指定上传文件后台服务, on-success指定上传成功后执行的方法 <el-upload class="upload-demo" action="http://xxxx:xxxx/upload" :on-success="handleSuccess" :show-file-list="true" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传txt文件,分隔符为\t</div> </el-upload> // 在Vue中指定数据fileName、计算属性fileContent、以及上传成功后的方法handleSuccess new Vue({ el: '#app', data: { fileName: null }, computed: { fileContent: function() { if(this.fileName != null) { return this.fileName.response; } } }, methods: { handleSuccess: function(response, file, fileList) { this.fileName = file; return this.$confirm(`上传 ${ file.name }成功!`); } } });
TSV解析
使用 d3-dsv 库。
<script src="https://d3js.org/d3-dsv.v1.min.js"></script> d3.tsvParse("foo\tbar\n1\t2"); // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]
表格
使用v-for实现动态列名
<el-table :data="inputData" style="width: 100%" height="250"> <el-table-column v-for="col in columns" :prop="col" :label="col" > </el-table-column> </el-table>
JS数组操作
创建、 排序 、删除、追加、reverse、slice、join转字符串、concat拼接数组、forEach循环
JS字符串操作
split拆分、parseInt等类型转换
事件
表格点击行事件
<el-table :data="getPageData()" style="width: 100%" @row-click="updateRow"> </el-table>
Leaflet组件
Vue.component("leaflet", { props: ['table_data', 'selected_row'], data() { return { map: null, layer: null, point: null }; }, template: '<div></div>', mounted: function() { this.init(); this.update(); this.highlight(); }, watch: { table_data: function () { this.update(); }, selected_row: function() { this.highlight(); } }, methods: { init: function() { this.map = L.map(this.$el.id).setView([29.802946,106.396835], zoom = 10); L.tileLayer( 'https://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0', { maxZoom: 18, subdomains: "0123", tms: true, attribution: '© <a href="http://map.qq.com/">腾讯地图</a>', } ).addTo(this.map); }, update: function() { if(this.layer != null) this.layer.removeFrom(this.map); if(this.point != null) this.point.removeFrom(this.map); // 绘制数据 var markerArray = Array(); this.table_data.forEach((pnt) => { var date = new Date(pnt['collecttime']*1000); markerArray.push(L.circle([pnt["bmuserlat"], pnt["bmuserlng"]]).bindTooltip(date+"")); // L.circle([pnt["bmuserlat"], pnt["bmuserlng"]], {radius:15}).addTo(this.map); }); this.layer = L.featureGroup(markerArray).addTo(this.map); this.map.fitBounds(this.layer.getBounds()); }, highlight: function() { if(this.point != null) this.point.removeFrom(this.map); // 绘制选中点 if(this.selected_row != null) { this.point = L.circleMarker([this.selected_row['bmuserlat'], this.selected_row['bmuserlng']], {color: "red"}).addTo(this.map).bindPopup(this.selected_row['collecttime'] + ""); } } } });
ECharts组件
Vue.component('echarts-heatmap', { props: ['table_data'], data: function() { return { map: null } }, computed: { plot_data: function() { //GCJ-02 to BD-09 function bd_encrypt(gcjLat, gcjLon) { x_pi = 3.14159265358979324 * 3000.0 / 180.0; var x = gcjLon, y = gcjLat; var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); var bdLon = z * Math.cos(theta) + 0.0065; var bdLat = z * Math.sin(theta) + 0.006; return { 'lat': bdLat, 'lon': bdLon }; } var heatArray = Array(); this.table_data.forEach(function(item) { var x = Math.round(item['bmuserlng'] * 1000) / 1000; var y = Math.round(item['bmuserlat'] * 1000) / 1000; var res = bd_encrypt(y, x); var x = res.lon; var y = res.lat; var idx = item["color_idx"] heatArray.push([x, y, idx]); }); var heatMap = []; heatArray.reduce(function(res, value){ if(!res[value]) { res[value] = value; heatMap.push(value); } return res; }, {}); var result = []; heatMap.reduce(function(res, value) { k = [value[0], value[1]] if(!res[k]) { res[k] = [value[0], value[1], 0]; result.push(res[k]); } res[k][2] += 1; return res; }, {}); var max = 0; result.reduce(function(res, value){ if(res < value[2]) { res = value[2]; max = res; } return res; }, 0); //result = result.filter(word => word[2] == max); console.log(result); return(result); }, option: function() { var points = this.plot_data; center = points.reduce(function(res, value){ return [res[0] + value[0], res[1] + value[1]]; }, [0,0]); let center_x = center[0] / points.length; let center_y = center[1] / points.length; return { animation: false, bmap: { center: [center_x, center_y], zoom: 14, roam: true }, visualMap: { show: false, top: 'top', min: 0, max: 5, seriesIndex: 0, calculable: true, inRange: { color: ['blue', 'blue', 'green', 'yellow', 'red'] } }, series: [{ type: 'heatmap', coordinateSystem: 'bmap', data: points, pointSize: 5, blurSize: 6 }]} } }, template: '<div></div>', mounted: function() { this.initMap(); this.updateMap(); }, watch: { table_data: function() { this.updateMap(); } }, methods: { initMap: function() { this.map = echarts.init(this.$el); } , updateMap: function() { var app = {}; app.title = '热力图与百度地图扩展'; this.map.setOption(option = this.option); var bmap = this.map.getModel().getComponent('bmap').getBMap(); bmap.addControl(new BMap.MapTypeControl()); this.map.setOption(option, true); } } });
以上所述就是小编给大家介绍的《前端数据分析工具开发》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端工程实践之数据埋点分析系统
- 纯前端表格控件 SpreadJS 发布更新,数据透视分析能力更加强大
- 数据分析是什么,如何完善数据分析知识体系
- 大数据分析工程师入门(二十):数据分析方法
- 蚂蚁数据分析平台的演进及数据分析方法的应用
- 数据分析的准备工作:从问题分析到数据清洗
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Head First JavaScript Programming
Eric T. Freeman、Elisabeth Robson / O'Reilly Media / 2014-4-10 / USD 49.99
This brain-friendly guide teaches you everything from JavaScript language fundamentals to advanced topics, including objects, functions, and the browser’s document object model. You won’t just be read......一起来看看 《Head First JavaScript Programming》 这本书的介绍吧!