Платформа отображения данных на основе vue, vuex, vue-router и echarts.

Vue.js Vuex ECharts vue-router

Давно не обновлял свой блог, но в последнее время не ленился, изучил фреймворк Vue и сделал на нем небольшой проект, а теперь поделюсь с вами своим интересным небольшим проектом. проект разработан на базе vue2.0.

источник вдохновения

Это проект, связанный с визуализацией данных.Как завучу, мне нужно знать все аспекты учеников в классе, поэтому я составил анкету, чтобы понять ситуацию учеников во всех аспектах. Затем я подумал об анализе записей группового чата нашего класса.Согласно записям группового чата, мы можем получить такую ​​информацию, как близость между одноклассниками в классе и активность группового чата класса. Естественно, я подумал о создании платформы для отображения этих данных.Поскольку данные, конечно, более интуитивно понятны для отображения в виде диаграмм, я выбрал библиотеку значков echarts в качестве компромисса. Что касается того, почему я решил использовать плагин vue, я просто подумал, что смогу потренировать свои руки после изучения vue.После этого я обнаружил, что vue действительно легкий и простой в использовании.Сочетание vuex и vue-router может в основном выполнить все потребности моего проекта.

Онлайн дисплей:http://119.29.57.165:8080/family
Исходный код:Github.com/hi EE имеет хороший/такой же...
Это руководство основано на том факте, что у вас уже есть определенная основа 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

Описание файла проекта

  • Сборка представляет собой базовый файл конфигурации веб-пакета, файл конфигурации среды разработки и файл конфигурации производственной ссылки.

  • node_modules — это различные зависимые модули

  • В src находятся компоненты vue и входные файлы

  • Поместите статические файлы в статические

  • index.html — это файл входа на страницу.

Базовая реализация страницы

После создания проекта начните реализацию нужной страницы.Измените файл App.vue в папке src следующим образом:

<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. -маршрутизатор. Конкретную реализацию каждого компонента можно перейти по адресу проекта github, чтобы увидеть исходный код.

Создайте маршрут конфигурации

Очевидно, что я хочу сделать одностраничное приложение.Чтобы использовать vue-router, сначала установите vue-router и введите следующую команду:

npm install --save vue-router

Затем добавьте код, связанный с маршрутизацией, в файл main.js в папке src следующим образом:

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')

// 定义路由，配置路由映射
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. Компоненты отображения маршрута используют Baidu.echartsбиблиотека, это очень полезная библиотека для построения диаграмм.

как нарисовать

Как рисовать с помощью диаграмм? На самом деле примеров на официальном сайте много.Ниже приводится краткое описание компонентаBedroom.vue.Код спальни.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.В скрипте сначала импортируйте библиотеку echarts, при условии, что библиотека echarts установлена, для установки введите следующую команду:

npm install --save echarts

Объект данных - это некоторые данные, используемые для рисования.Метод drawpie используется для рисования изображения, получения объекта DOM, а затем вызова drawpie в смонтированном конструкторе.

Два очка

  1. Объект DOM, полученный методом drawpie, должен иметь определенную ширину и высоту, иначе изображение не будет отображаться.

  2. vm.$nextTick должен быть включен в mount, чтобы экземпляр был вставлен в документ.

Реализовать функцию входа

Функция журнала на основе sessionStorage vuex (управление состоянием vue) и реализации браузера. Сначала создайте новую папку в папке src store, хранилище vuex store (склад), три новых файла store.js, login.js, user.js. login.js хранит статус входа в систему, user.js хранит информацию о входе пользователя, модули загрузки store.js и логин пользователя.

Уведомление: babel-polyfill должен быть введен в store.js (сначала установите его), иначе будет сообщено об ошибке. Причина ошибки в том, что Babel по умолчанию преобразует только новый синтаксис JavaScript, а не новые API, такие как Iterator, Generator, Set, Maps, Proxy, Global объекты, такие как Reflect, Symbol, Promise и некоторые методы, определенные для глобальных объектов, не будут перекодированы. Таким образом, babel-polyfill должен использоваться для обеспечения прокладки для текущей среды.

Затем измените файл main.js и добавьте хранилище:

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, и эта папка является кодом, который мы можем использовать для публикации, просто загрузите код прямо на свой сервер.

Категории