Уведомление: новейшая система с низким кодом и большим экраном GoView была открыта, подробности см.: https://gitee.com/MTrun/go-view

Долгосрочные спонсоры

1. Описание проекта

• Проект представляет собой «проект с данными на большом экране», основанный на Vue, Datav и Echart. Он использует компоненты Vue для динамического обновления и рендеринга данных, а внутренние диаграммы могут быть свободно заменены. Некоторые диаграммы используют собственные компоненты DataV и могут быть изменены. Для получения дополнительной информации нажмите ниже на документацию DataV.

• Версия Vue3 доступна здесь. Она реализована с использованием Hooks+TypeScript и предлагает новые функции для изучения!

• Здесь вы можете найти версию React. Она имеет новый интерфейс и выглядит очень хорошо!

• Проекту требуется полноэкранный режим (нажмите F11).

• В некоторых областях проекта используется глобальная регистрация, что увеличивает размер пакета. В реальных приложениях рекомендуется использовать импорт по требованию.

• После извлечения проекта рекомендуется переименовать файлы в соответствии с вашей функциональной областью. На данный момент они просто упорядочены по местоположению.

• Среда проекта: Vue-cli-5.x, DataV-2.7.3, Echarts-4.6.0 (если есть проблемы с версией 5.x, переключитесь на версию 4.x), Webpack-4.0, Npm-9.x, Node-v18.

• Извлекайте код из основной ветки master. Остальные ветки являются ветвями разработки.

• Если вам нужны другие данные карты, пожалуйста, проверьте мои другие проекты (есть коллекция карт).

Ссылки для дружбы:

1. Vue официальная документация
2. Официальная документация DataV
3. Примеры echarts, API документации echarts

Демонстрация проекта

2. Введение в основные файлы

3. Использование

Запуск проекта

Перед началом работы необходимо установить nodejs и pnpm. После загрузки проекта запустите pnpm в главном каталоге проекта для установки зависимостей. После установки зависимостей используйте vue-cli или напрямую используйте команду npm run serve, чтобы запустить проект. После запуска проекта необходимо вручную перейти в полноэкранный режим (нажать F11). Если при компиляции проекта появляется сообщение об отсутствии зависимости от фреймворка DataV, введите npm install @jiaminghi/data-view или yarn add @jiaminghi/data-view, чтобы установить его вручную.

Создание компонентов визуализации диаграмм

Все диаграммы ECharts основаны на компоненте common/echart/index.vue. Они уже отслеживают изменения данных и экрана и могут динамически отображать данные и размеры диаграмм. При мониторинге окон небольшого размера используется функция устранения дребезга для управления частотой обновления, что экономит производительность браузера.

В проекте настроена тема по умолчанию для диаграмм ECharts, расположенная по адресу common/echart/theme.json.

Компонент визуализации диаграммы поддерживает следующие параметры, которые можно настроить в соответствии с бизнес-требованиями.

Динамическое отображение диаграмм

Пример динамической визуализации диаграмм находится в каталоге components. Файл index отвечает за получение и обработку данных, а файл chart отвечает за мониторинг и визуализацию данных.

Основная логика файла chart:

<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
</template>

<script>
  // Импорт инкапсулированного компонента
import Echart from '@/common/echart'
export default {
  // Определение конфигурационных данных
  data(){ return { options: {}}},
  // Объявление компонента
  components: { Echart},
  // Получение данных
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  // Мониторинг, также можно использовать вычисляемые свойства для реализации этой функции
  watch: {
    cdata: {
      handler (newData) {
        this.options ={
          // Здесь настроено ECharts
        }
      },
      // Немедленный мониторинг
      immediate: true,
      // Глубокий мониторинг
      deep: true
    }
  }
};
</script> ### Повторное использование компонента диаграммы

Пример повторного использования компонента диаграммы — модуль «пропускная способность задач и процент выполнения задач» в центральной части. Две диаграммы похожи, различие заключается в цвете и основных данных визуализации. Нужно только передать соответствующие уникальные идентификаторы и стили, а затем принять их в повторно используемом компоненте components/echart/center/centerChartRate и присвоить значения в соответствующих позициях.

Например, в месте вызова views/center.vue определите данные и передайте их компоненту:

```js
// Вызов компонента
<span>Пропускная способность сегодняшних задач</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>Процент выполнения сегодняшних задач</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
...
import centerChart from "@/components/echart/center/centerChartRate";

data() {
  return {
    rate: [
      {
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
        id: "centerRate2",
        tips: 40,
        colorData: {
          ...
        }
      }
    ]
  }
}

Замена рамки

Рамка создана с использованием компонентов DataV. Необходимо найти соответствующее местоположение в каталоге views и заменить его. Конкретные типы можно найти на официальном сайте DataV. Например:

<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>

Изменение диаграммы

Перейдите непосредственно к файлу в components/echart и измените его на желаемый вид echarts. Примеры можно посмотреть на официальной странице сообщества echarts.

Решение адаптивности с помощью Mixins

Использование Mixins для внедрения функций адаптации диаграмм к изменениям размера экрана. Функция находится в utils/resizeMixins.js и применяется в common/echart/index.vue для инкапсуляции рендеринга компонентов. Основное внимание уделяется внедрению функций в this.chart.

Адаптация экрана

В версии 1.5 проект отказался от гибкого плагина и вернул rem к px. Используется более универсальный метод масштабирования css3:scale. Ссылаясь на views/index через ref, содержимое масштабируется при изменении экрана. Базовым размером проекта является 1920px*1080px, поэтому поддерживается заполнение экрана в том же соотношении. Если соотношение не совпадает, автоматически рассчитывается центрированное заполнение, а недостающие части остаются пустыми. Реализация кода находится в src/utils/userDraw. Если есть другие методы адаптации, пожалуйста, поделитесь ими.

Запрос данных

Текущий проект не использует запросы данных между передней и задней частью, рекомендуется использовать axios для запросов данных. Конфигурация axios выполняется в main.js.

• Пример конфигурации main.js для axios (может отличаться):

import axios from 'axios';

// Поместите метод в прототип Vue, чтобы его можно было использовать глобально
Vue.prototype.$http = axios.create({
  // Устанавливаем время ожидания 20 секунд
  timeout: 20000,
  baseURL: 'http://172.0.0.1:80080', // Здесь указан адрес сервера
});