GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → funlee → Vue Visualization

funlee / Vue Visualization

Vue 结合 D3.js 进行数据可视化开发的练手案例

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

webpackvuejs2vue-routeraxiosmapchartsd3v4

Projects that are alternatives of or similar to Vue Visualization

Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+140.8%)
Mutual labels:  webpack, axios, vuejs2, vue-router
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+483.2%)
Mutual labels:  webpack, axios, vuejs2, vue-router
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (+99.2%)
Mutual labels:  webpack, axios, vuejs2, vue-router
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (+104.8%)
Mutual labels:  webpack, axios, vuejs2, vue-router
Flask Vuejs Madblog
基于 Flask 和 Vue.js 前后端分离的微型博客项目，支持多用户、Markdown文章（喜欢/收藏文章）、粉丝关注、用户评论（点赞）、动态通知、站内私信、黑名单、邮件支持、管理后台、权限管理、RQ任务队列、Elasticsearch全文搜索、Linux VPS部署、Docker容器部署等
Stars: ✭ 541 (+332.8%)
Mutual labels:  webpack, axios, vue-router
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+952.8%)
Mutual labels:  webpack, axios, vue-router
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+979.2%)
Mutual labels:  webpack, axios, vue-router
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-87.2%)
Mutual labels:  webpack, axios, vue-router
Manhuaren
vue2.0全家桶，仿漫画人官网（移动端）
Stars: ✭ 18 (-85.6%)
Mutual labels:  webpack, vuejs2, vue-router
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+941.6%)
Mutual labels:  webpack, axios, vue-router
Cordovue
A sample Apache Cordova application using VueJS.
Stars: ✭ 66 (-47.2%)
Mutual labels:  webpack, vuejs2, vue-router
Vue Music
cloud-music(网易云音乐)
Stars: ✭ 500 (+300%)
Mutual labels:  axios, vuejs2, vue-router
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+297.6%)
Mutual labels:  webpack, vuejs2, vue-router
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+438.4%)
Mutual labels:  webpack, axios, vue-router
Laravel Vue
This application is test and implemented by Laravel 5.4 and Vue.js 2.
Stars: ✭ 46 (-63.2%)
Mutual labels:  axios, vuejs2, vue-router
Putongoj Fe
The front end of the Putong Online Judge -- An online judge with nothing special
Stars: ✭ 74 (-40.8%)
Mutual labels:  webpack, axios, vue-router
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+2352%)
Mutual labels:  webpack, vuejs2, vue-router
Vue2 Qq
一个基于兴趣，为了学习，提高能力的项目
Stars: ✭ 90 (-28%)
Mutual labels:  axios, vuejs2, vue-router
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (+123.2%)
Mutual labels:  webpack, axios, vue-router
Vue Spa
vue-spa ： vue + vue-router + axios + vuex + vux 快速成型移动端项目，直接使用。欢迎star
Stars: ✭ 46 (-63.2%)
Mutual labels:  webpack, axios, vue-router
View All Similar Projects ➔

vue-visualization

这是一个尝试利用 Vue 结合 D3.js 进行数据可视化开发的练手案例

项目背景

公司的业务是给政府部门做数据可视化的，开发环境和运行环境都是在公安内网中进行的，由于不能使用互联网，因此项目开发没有采用前端工程化的方案，但自己却想尝试一下，看看用框架开发可视化项目是什么样子，因此就做了这个   

主要功能

  • 多页面项目，利用 vue-router 进行路由管理
  • 练习了常用图表（柱状图、饼图、地图）在 Vue 中的实现
  • 数据采用 Mockjs 模拟实现，全是随机数据

技术栈

安装

git clone https://github.com/funlee/vue-visualization.git
cd vue-visualization
npm install
npm run dev

然后在浏览器里输入：http:localhost:8080 即可访问

在线访问：http://show.funlee.cn/vue-visualization

心得

D3.js 是基于数据来操作 DOM 的 JavaScript 库，而 Vue 允许开发者明确地向 DOM 呈现数据并抽象出复杂的逻辑；这两个都试图做类似的事情，但是如果组合在一起可能难以保持逻辑一致，因此在绘制图表的时候，要明确图表的 DOM 由谁来管理；我的心得就是，简单的（平面直角坐标系图表）图表由 Vue 来管理，复杂的图表（SVG-PATH居多的）由 D3.js 来管理

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].