Giter Site home page Giter Site logo

hackathonvisualization's Introduction

搭建这个项目

安装环境

1. 软件安装

安装nodejs, vscode

2. npm配置

给npm换源 (淘宝源)

npm config set registry http://registry.npm.taobao.org/

安装yarn并换源

npm install -g yarn
yarn config set registry http://registry.npm.taobao.org/

3. Clone项目

git clone [email protected]:HackathonVisualization/HackathonVisualization.git

4. 安装项目

yarn install

运行项目

yarn start

然后就可以在开发者模式运行这个项目.
在浏览器打开 http://localhost:3000 便可以浏览这个项目.

支持代码热更新.

构建项目

yarn build

编译好的文件会输出到 build 文件夹, 这时候只需要把 build 文件夹挂载到网站上就行了.

项目目录结构

  • public: 用于存放网页静态文件, 比如网页图标, 网页标题啥的
  • src: 代码存放主要位置
    • component: 用于存放可视化控件的主要文件夹
      • Charts.tsx: 其中的一个控件示例
    • App.css: 项目css代码的主要位置
    • App.tsx: 项目主要代码, 例如界面的渲染, Echarts的主要内容啥的
    • utils.ts: 通过Github API获取数据的函数库
  • README2.md: 如果你想从头构建这个项目, 可以参考我构建这个项目的过程

其他文件都是不太重要的文件, 无视就好.

项目分工

后端 (伪)

主要任务就是在 utils.ts 使用 Github API 添加获取相应数据的函数. 大概就像 getCountOfCommits 那样的函数就行.

这个工作主要是获取数据, 处于前端和后端之间, 所以我就随意地称为 后端(伪).

需要了解的知识:

前端

主要任务就是构思和优化前端界面, 比如加个logo, 改个标题, 添加动效, 使用Antd, 优化界面美观度啥的.

还有一个很重要的工作, 给页面加个 Router 路由.

主要工作在 App.cssApp.tsx 这两个文件.

需要了解的知识:

数据可视化

主要任务就是使用 Echarts 将数据进行可视化.

主要工作在 component 这个文件夹. 通过 Echarts 数据可视化添加Component.

需要了解的知识:

hackathonvisualization's People

Contributors

kottory avatar orangex4 avatar submergence2000 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.