基于vue、vuex、vue-router、echarts搭建的数据展示平台
2016-11-18 10:34
921 查看
真的好久没有更新博客了,但是我最近并没有偷懒哦,一直在学习vue这个框架,并且用它做了一个小项目,现在就给大家分享一下我的这个还比较有意思的小项目咯,本项目是基于vue2.0开发的。
在线展示:http://119.29.57.165:8080/family
源码:https://github.com/hieeyh/tong2-family
本教程是基于你已经有一定vue基础之上的,如果你还不了解什么是vue建议先去学习一下
然后,利用vue-cli构建一个vue项目
node_modules是各种依赖模块
src中是vue组件及入口文件
static中放置静态文件
index.html是页面入口文件
myHead组件是页面头部,myNav组件是页面左侧导航栏,myFoot是页面底部,router-view组件是vue-router中渲染路径匹配到的视图组件。每个组件的具体实现可以去github项目地址去看源码。
然后,在src文件夹下面的main.js文件中添加路由相关的代码,如下:
从路由映射的配置中可以看出,访问网站的根路由会直接跳转到/wordcloud。路由映射的组件中用到了百度的echarts库,这是一个很好用的图表库。
这是一个vue的单文件组件,script中,首先导入echarts库,前提是已经安装了echarts库,输入以下命令安装:
data对象中是画图要用到的一些数据,drawpie方法用来画图,接收一个DOM对象,然后在mounted构子函数中调用drawpie即可。
mounted中要包含vm.$nextTick才能保证该实例已经插入文档
注意:在store.js中要引入babel-polyfill(先安装),否则会报错,报错原因是Babel默认只转换新的JavaScript句法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法都不会转码。所以必须使用babel-polyfill,为当前环境提供一个垫片。
然后修改main.js文件,引入store:
修改App.vue文件,如下:
到此,就基本上大功告成了,在命令行中输入 npm run dev预览一下。
会生成一个dist文件夹,该文件夹中就是我们可以用来发布的代码,直接将代码上传到你的服务器上就可以啦。
灵感来源
这是一个数据可视化相关的项目,作为一个学生班主任,需要对班上同学的各方面的情况都有所了解,于是我便做了一个问卷调查来了解学生各方面的情况。然后我又想到可以分析我们班的群聊记录呀,根据群聊记录可以得到班上同学之间的亲密度和班级群聊活跃度等信息。自然而然,我就想着可以搭建一个平台来展示这些数据,既然是数据当然是以图表的方式来展示更加直观,然后折中选择了echarts这个图标库。至于为什么要选择用vue这个插件,之前只是觉得学了vue可以练练手,做完之后发现vue真的很轻量也很好上手,结合vuex和vue-router基本能完成我项目中的所有需求。在线展示:http://119.29.57.165:8080/family
源码:https://github.com/hieeyh/tong2-family
本教程是基于你已经有一定vue基础之上的,如果你还不了解什么是vue建议先去学习一下
项目初始构建
首先全局安装vue-cli,vue-cli是vue自己的项目构建工具,几个简单的步骤就可以帮助你快速构建一个vue项目。npm install -g vue-cli
然后,利用vue-cli构建一个vue项目
# 创建一个基于 "webpack" 模板的新项目 $ vue init webpack family # 安装依赖 $ cd family $ npm install
项目文件解释
build中是webpack基本配置文件,开发环境配置文件,生产环节配置文件node_modules是各种依赖模块
src中是vue组件及入口文件
static中放置静态文件
index.html是页面入口文件
基本页面实现
项目创建好之后,就开始实现自己想要的页面了,修改src文件夹下的App.vue文件,如下:<template> <div id="#app"> <!-- 导航栏 --> <my-head></my-head> <my-nav></my-nav> <transition> <router-view></router-view> </transition> <my-foot></my-foot> </div> </template> <script> import myHead from './components/header' import myNav from './components/nav' import myFoot from './components/foot' export default { name: 'app', components: { myHead, myNav, myFoot } } </script>
myHead组件是页面头部,myNav组件是页面左侧导航栏,myFoot是页面底部,router-view组件是vue-router中渲染路径匹配到的视图组件。每个组件的具体实现可以去github项目地址去看源码。
创建配置路由
显然,我要做的是一个单页面应用,要用到vue-router,先安装vue-router,输入如下命令:npm install --save vue-router
然后,在src文件夹下面的main.js文件中添加路由相关的代码,如下:
import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' Vue.use(VueRouter) // 定义路由组件 const Worldcloud = require('./components/cloud.vue') const Building = require('./components/building.vue') const Canteen = require('./components/canteen.vue') const Selfstudy = require('./components/selfstudy.vue') const Difficult = require('./components/difficult.vue') const Interest = require('./components/interest.vue') const Bedroom = require('./components/bedroom.vue') const Graduate = require('./components/graduate.vue') const Getup = require('./components/getup.vue') const Gotobed = require('./components/gotobed.vue') const Eat = require('./components/eat.vue') const Amuse = require('./components/amuse.vue') const Single = require('./components/single.vue') const Chat = require('./components/chat.vue') const Onlyme = require('./components/onlyme.vue') // 定义 4000 路由,配置路由映射 const routes = [ { path: '/', redirect: '/wordcloud' }, { path: '/wordcloud', component: Worldcloud }, { path: '/building', component: Building }, { path: '/canteen', component: Canteen }, { path: '/selfstudy', component: Selfstudy }, { path: '/difficult', component: Difficult }, { path: '/interest', component: Interest }, { path: '/bedroom', component: Bedroom }, { path: '/graduate', component: Graduate }, { path: '/getup', component: Getup }, { path: '/gotobed', component: Gotobed }, { path: '/eat', component: Eat }, { path: '/amuse', component: Amuse }, { path: '/single', component: Single }, { path: '/chat', component: Chat }, { path: '/onlyme', component: Onlyme } ] new Vue({ el: '#app', template: '<App/>', components: { App }, router })
从路由映射的配置中可以看出,访问网站的根路由会直接跳转到/wordcloud。路由映射的组件中用到了百度的echarts库,这是一个很好用的图表库。
怎么画图
怎么用echarts画图呢?其实官网上有很多实例,下面以bedroom.vue组件为例来简单说明,bedroom.vue代码如下:<template> <div class="main_content"> <div id="bedroom"></div> </div> </template> <script> import echarts from 'echarts' export default { data() { return { chart: null, opinion: ['学习氛围差', '学习氛围一般', '学习氛围很好'], opinionData: [ {value:26, name:'学习氛围差'}, {value:31, name:'学习氛围一般'}, {value:8, name:'学习氛围很好'} ] } }, methods: { drawPie (id) { this.chart = echarts.init(document.getElementById(id)) this.chart.setOption({ title: { text: '寝室学习氛围情况调查', left: 'center', top: 10, textStyle: { fontSize: 24, fontFamily: 'Helvetica', fontWeight: 400 } }, tooltip: { trigger: 'item', formatte: "{b}: {c} ({d}%)" }, toolbox: { feature: { saveAsImage: {}, dataView: {} }, right: 15, top: 10 }, legend: { orient: 'vertical', left: 5, top: 10, data: this.opinion, }, series: [ { name: '寝室学习氛围', type: 'pie', radius: ['50%', '70%'], center: ['50%', '60%'], avoidLabelOverlap: false, label: { emphasis: { show: true, textStyle: { fontSize: '24', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: this.opinionData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffset: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) } }, mounted() { this.$nextTick(function() { this.drawPie('bedroom') }) } } </script> <style scoped> #bedroom { position: relative; left: 50%; margin-left: -400px; margin-bottom: 70px; width: 800px; height: 600px; border: solid #D01257 1px; box-shadow: 0 0 8px #FB90B7; border-radius: 10px; } </style>
这是一个vue的单文件组件,script中,首先导入echarts库,前提是已经安装了echarts库,输入以下命令安装:
npm install --save echarts
data对象中是画图要用到的一些数据,drawpie方法用来画图,接收一个DOM对象,然后在mounted构子函数中调用drawpie即可。
两点说明
drawpie方法接收的DOM对象需要有确定的宽高,否则图像不显示mounted中要包含vm.$nextTick才能保证该实例已经插入文档
实现登录功能
登录功能基于vuex(vue状态管理)和浏览器的sessionStorage实现的。首先在src文件夹下新建store文件夹,存放vuex的store(仓库),新建三个文件store.js、login.js、user.js。login.js中存储登录状态,user.js中存储用户登录信息,store.js加载login和user模块。注意:在store.js中要引入babel-polyfill(先安装),否则会报错,报错原因是Babel默认只转换新的JavaScript句法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法都不会转码。所以必须使用babel-polyfill,为当前环境提供一个垫片。
然后修改main.js文件,引入store:
import store from './store/store' ... ... new Vue({ el: '#app', template: '<App/>', components: { App }, router, store })
修改App.vue文件,如下:
<template> <div id="#app"> <!-- 导航栏 --> <my-head></my-head> <my-nav></my-nav> <transition> <router-view></router-view> </transition> <my-mask v-if="canlogin"></my-mask> <my-login v-if="canlogin"></my-login> <my-foot></my-foot> </div> </template> <script> ... import myMask from './components/mask' import myLogin from './components/login' export default { ... data() { return { canlogin: false } }, computed: { canlogin() { return this.$store.state.login.islogin } } } </script>
到此,就基本上大功告成了,在命令行中输入 npm run dev预览一下。
项目发布
项目可以在本地预览了,但是要怎么发布到网上呢?首先,在命令行中输入npm run build
会生成一个dist文件夹,该文件夹中就是我们可以用来发布的代码,直接将代码上传到你的服务器上就可以啦。
相关文章推荐
- 基于vue、vuex、vue-router、echarts搭建的数据展示平台
- 基于vue、vuex、vue-router、echarts搭建的数据展示平台
- 面向服务体系架构(SOA)和数据仓库(DW)的思考基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台
- 大数据分析平台搭建教程:基于Apache Zeppelin Notebook和R的交互式数据科学
- 基于Hadoop的数据分析平台搭建 - 大数据
- 内测“百度图说” 基于Web的可视化数据分享平台,嵌入ECharts
- 基于深度学习框架的火灾识别报警平台搭建----OpenCV3.1.0读取dav视频数据出错
- 基于Hadoop的数据分析平台搭建 - 大数据
- 基于go+vue实现的golang每日新闻数据浏览与检索平台(推荐)
- clojure实战——基于logstash搭建日志数据获取与整理平台(2)
- 基于ArcGIS10.0和Oracle10g的空间数据管理平台一(C#开发)-系统功能介绍及展示
- 基于vue-cli vue-router搭建底部导航栏移动前端项目
- 基于Spring MVC的ECharts动态数据实时展示
- vue 中使用vue-echarts-v3编写chart柱状图,动态展示数据
- clojure实战——基于logstash搭建日志数据获取与整理平台(1)
- 基于ECharts,JQueryUI的可拖拽数据展示web页面
- JeeFast是一款基于SpringBoot+Mybatis-Plus+Bootstrap+Vue搭建的JAVA WEB快速开发平台
- 基于apache ambari 的大数据平台搭建并运行WordCount
- 基于Apache Ambari搭建Hadoop大数据平台
- JeeFast是一款基于SpringBoot+Mybatis-Plus+Bootstrap+Vue搭建的JAVA WEB快速开发平台