内容简介:使用解决跨域访问,需安装使用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 发布更新,数据透视分析能力更加强大
- 数据分析是什么,如何完善数据分析知识体系
- 大数据分析工程师入门(二十):数据分析方法
- 蚂蚁数据分析平台的演进及数据分析方法的应用
- 数据分析的准备工作:从问题分析到数据清洗
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。