hieeyh / tong2-family Goto Github PK

基于vue、vuex、vue-router、echarts的数据可视化展示平台

JavaScript 21.71% HTML 0.83% Vue 68.97% Python 8.49%

tong2-family's Introduction

tong2-family

使用vue2.0、vuex、vue-router2.0、echarts等搭建的一个数据展示平台不支持IE8及其以下版本，单页面应用对华科电信大二学生的做了一些调查，对调查结果进行可视化展示，同时分析了通信1502班的群聊记录，得到班级群聊活跃度等信息基于vuex实现了简单的登录功能

运行步骤

# 安装依赖
npm install

# 在本地启动服务，并且通过localhost:8080地址进行访问
npm run dev

# 编译并压缩代码便于发布
npm run build

# 运行单元测试
npm run unit

在线访问

http://119.29.57.165:8080/family
注意：只有用通信1502班同学的qq号登陆才能看到我的群聊活跃时间

源码说明

.
|-- IM_analyze                       // 用python进行群聊数据分析的相关代码
|-- build                            // 项目构建相关代码
|-- config                           // 项目开发环境配置
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|       |-- store.js                 // 加载各种store模块
|       |-- login.js                 // 登录状态相关store
|       |-- user.js                  // 用户相关store
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static
|   |-- data                         // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico
|-- index.html                       // 入口页面
|-- package.json                     // 项目配置相关信息
.

教程

我的博客：http://hyuhan.com/2016/11/17/A-data-display-platform/

联系作者

tong2-family's People

Contributors

Stargazers

Watchers

Forkers

ofroad weiningning duck-tang tomfanxiaojun painkiller7 mowebtool-util snapline sys2007 balmainctf cnbin imac8t liweiliwei helloqingfeng lzqmyb junweihe chenbioyi226 jefth xudongdong bl-front-end justpushcar leo851211 taotao365s mzg123 xingmengmeng apple006 august-xu yufangangzi gechen123 optimuse jasonck marvincreate yuanyuan123456789 davidmr001 mngogo itsky365 lee66 guoxp luckfan guoyu07 web-yuzm tang-ni zhshch leetia316 wenqianshao deng565430 tangyang8942 michaellct zevfung pl2476 185096473 mickeyzaku wmy1992 dhpasa lichengtao1989 wujunchuan fayewong25 pxz199381 erictop3 imoacs anyanhui h274799010 marlonyjg gruad supperjet scaffoldings nanyangaa data258 tasfe youjinxu yusirxiaer csy763 johnmyqin zian502 qlnujsjlzy linkfar unclemeric kathy214 huangcongqing patrickleeee yutao7026 hanmichael msi1979 lisongyu tiantianli523 littleant1111 learning-from-books xlliu yangjunlovejingjing ricardo-m-hu yolocgt thirdking wanihaobango xiaowen2013 yomya martinwithyou speshow142 raincoolly love2157dream nullcaption ruiaylin

tong2-family's Issues

初始化chart

你好，我看到你的vue组件的data里只定义了一个chart，但是我只定义一个想显示多个的时候会被覆盖掉，只显示最后一个，我想问一下你是不是还有做别的措施？

关于获取json数据失败的问题

遇到的一个问题
你的源码我下下来，本地运行能跑起来。但是我自己在参考你的代码写的时候，使用 npm run dev后报了一个如下错误：

页面出现：

workerage.vue是我新建的一个"同事年龄区间统计"的一个组件，在这个组件中使用import data from 'static/data/data.json';来导入json数据，应该是这个地方的问题，但是不知道要怎么解决这个问题？还请有时间帮我看一下，谢谢

我的data.json文件代码如下：

{
 "workerAge" :{
   "age":["20以下","20~25","25~30","30~35","35~40","45~50","50~55"],
   "num":[2,4,25,18,10,6,2]
 }
}

我的workerage.vue代码如下：

<template>
  <div>
    <div id="workerAge"></div>
  </div>
</template>
<script>
  import echarts from 'echarts';
  import data from 'static/data/data.json';
export default{
  data(){
    return{
      chart:null
    };
  },
  methods:{
    drawBar(id){
      this.chart=echarts.init(document.getElementById('workerAge'));
      this.chart.setOption({
        title:'职员年龄情况',
        legend:['人数'],
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            magicType:{show: true, type: ['line', 'bar']},
            saveAsImage: {show: true},
            dataView: {show: true, readOnly: false}
          },
          top: 10,
          right: 15
        },
        calculable: true,
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:[
          {
            type:'category',
            data:data.workerAge.age
          }
        ],
        yAxis:[
          {
            type:'value',
            name:'人数',
            max:50
          }
        ],
        series:[
          {
            name:'年龄区间',
            type:'bar',
            markPoint:{
              data:[
                {type:'max',name:'最大值'},
                {type:'min',name:"最小值"}
              ]
            },
            markLine:{
              data:[
                {type:'average',name:'平均值'}
              ]
            },
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: '#726dd1',
                shadowColor: 'rgba(0, 0, 0, 0.4)',
                shadowBlur: 20
              }
            },
            data:data.workerAge.num

          }
        ]

      })

    }
  },
  mounted() {//todo33
    this.$nextTick(function() {
      this.drawBar('workerAge');
      var that = this;
      var resizeTimer = null;
      window.onresize = function() {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          that.drawBar('workerAge');
        }, 100);
      }
    });
  }
}
</script>
<style scoped>
  #workerAge {
    position: relative;
    left: 50%;
    width: 90%;
    height: 600px;
    margin-left: -45%;
    box-shadow: 0 0 10px #726dd1;
    border-radius: 10px;
  }
</style>