前端數(shù)據(jù)分析工具開發(fā)

ernest.wang 發(fā)布于2019-08-23 18:13 / 796人閱讀

摘要：上傳文件上傳文件的后端服務(wù)使用實(shí)現(xiàn)。表格使用實(shí)現(xiàn)動(dòng)態(tài)列名數(shù)組操作資料創(chuàng)建排序刪除追加轉(zhuǎn)字符串拼接數(shù)組循環(huán)字符串操作拆分等類型轉(zhuǎn)換事件表格點(diǎn)擊行事件組件騰訊地圖繪制數(shù)據(jù)繪制選中點(diǎn)組件熱力圖與百度地圖擴(kuò)展

上傳文件 上傳文件的后端服務(wù)

使用Python Flask實(shí)現(xiàn)。

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實(shí)現(xiàn)

// action指定上傳文件后臺服務(wù), on-success指定上傳成功后執(zhí)行的方法

    點(diǎn)擊上傳
    只能上傳txt文件，分隔符為	


// 在Vue中指定數(shù)據(jù)fileName、計(jì)算屬性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實(shí)現(xiàn)動(dòng)態(tài)列名

JS數(shù)組操作

資料
創(chuàng)建、排序、刪除、追加、reverse、slice、join轉(zhuǎn)字符串、concat拼接數(shù)組、forEach循環(huán)

JS字符串操作

split拆分、parseInt等類型轉(zhuǎn)換

事件

表格點(diǎn)擊行事件

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: "©  {
                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);
          // 繪制選中點(diǎn)
          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 = "熱力圖與百度地圖擴(kuò)展";
      this.map.setOption(option = this.option);
      var bmap = this.map.getModel().getComponent("bmap").getBMap();
      bmap.addControl(new BMap.MapTypeControl());
      this.map.setOption(option, true);
    }
  }
  
});

GPU云服務(wù)器云服務(wù)器前端開發(fā)工具前端開發(fā)用什么工具前端開發(fā)數(shù)據(jù)庫數(shù)據(jù)倉庫開發(fā)工具

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104858.html

發(fā)表評論

登陸后可評論

0條評論

ernest.wang

男|高級講師

我要關(guān)注我要私信

TA的文章

DeepSeek R1系列模型一鍵部署教程，支持云端免費(fèi)體驗(yàn)！

閱讀 1585·2025-02-07 13:29
特朗普勝任，將對跨境電商賣家產(chǎn)生哪些影響？

閱讀 1010·2024-11-07 18:25
幻獸帕魯常見問題匯總

閱讀 131506·2024-02-01 10:43
在Linux和Windows上部署帕魯?shù)膮^(qū)別？

閱讀 1382·2024-01-31 14:58
怎么重啟幻獸帕魯云服務(wù)器？

閱讀 1150·2024-01-31 14:54
幻獸帕魯自建服務(wù)器存檔備份及回檔 - windows篇

閱讀 83577·2024-01-29 17:11
小白必讀教程，幻獸帕魯服務(wù)器手動(dòng)部署教程 - Windows篇

閱讀 3880·2024-01-25 14:55
A800GPU租用-A800顯卡

閱讀 2396·2023-06-02 13:36

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端數(shù)據(jù)分析工具開發(fā)

Upload new File

相關(guān)文章

**前端開發(fā)者指南（2017）**

**前端開發(fā)者指南（2017）**

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

**前端開發(fā)知識點(diǎn)整理**

**前端開發(fā)知識點(diǎn)整理**

發(fā)表評論

0條評論

ernest.wang

男|高級講師

TA的文章

DeepSeek R1系列模型一鍵部署教程，支持云端免費(fèi)體驗(yàn)！

特朗普勝任，將對跨境電商賣家產(chǎn)生哪些影響？

幻獸帕魯常見問題匯總

在Linux和Windows上部署帕魯?shù)膮^(qū)別？

怎么重啟幻獸帕魯云服務(wù)器？

幻獸帕魯自建服務(wù)器存檔備份及回檔 - windows篇

小白必讀教程，幻獸帕魯服務(wù)器手動(dòng)部署教程 - Windows篇

A800GPU租用-A800顯卡

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端數(shù)據(jù)分析工具開發(fā)

Upload new File

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！