资讯专栏INFORMATION COLUMN

前端数据分析工具开发

ernest.wang / 717人阅读

摘要:上传文件上传文件的后端服务使用实现。表格使用实现动态列名数组操作资料创建排序删除追加转字符串拼接数组循环字符串操作拆分等类型转换事件表格点击行事件组件腾讯地图绘制数据绘制选中点组件热力图与百度地图扩展

上传文件 上传文件的后端服务

使用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 """
    
    Upload new File
    

Upload new File

""" @app.route("/uploads/") def uploaded_file(filename): return send_from_directory(app.config["UPLOAD_FOLDER"], filename)

解决跨域访问,需安装flask-cors

上传组件

使用Element UI实现

// action指定上传文件后台服务, on-success指定上传成功后执行的方法

    点击上传
    
只能上传txt文件,分隔符为
// 在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库。


d3.tsvParse("foo	bar
1	2"); // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]
表格

使用v-for实现动态列名


      
      
JS数组操作

资料
创建、排序、删除、追加、reverse、slice、join转字符串、concat拼接数组、forEach循环

JS字符串操作

split拆分、parseInt等类型转换

事件

表格点击行事件


Leaflet组件
Vue.component("leaflet", {
  props: ["table_data", "selected_row"],
  data() {
    return {
      map: null,
      layer: null,
      point: null
    };
  },
  template: "
", 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: "© 腾讯地图", } ).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: "
", 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); } } });

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104858.html

相关文章

  • 前端开发者指南(2017)

    摘要:第二部分学习前端开发第二部分指出了学习成为一个前端开发者所需的自学资源和教学资源译者注教学资源包括有讲师指导的付费课程计划学院和训练营。第三部分前端开发工具第三部分简要地介绍和指出了一些前端圈內的工具。 参与者(排名不分先后):blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...

    kviccn 评论0 收藏0
  • 前端开发者指南(2017)

    摘要:第二部分学习前端开发第二部分指出了学习成为一个前端开发者所需的自学资源和教学资源译者注教学资源包括有讲师指导的付费课程计划学院和训练营。第三部分前端开发工具第三部分简要地介绍和指出了一些前端圈內的工具。 参与者(排名不分先后):blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...

    Salamander 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Sike 评论0 收藏0

发表评论

0条评论

ernest.wang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<