1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/pengxiaotian-datav-vue

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

DataV Vue

  • 💪 Vue 3.0+
  • ⚡ Vite 3.0+
  • 🍍 Pinia 2.0+
  • 🔥 TypeScript 4.0+
  • 🔥 ECharts 5.0+

О вкладе

До завершения первой рабочей версии принимаются только запросы на исправление ошибок (fixbug PR), запросы на добавление новых функций (feature PR) не принимаются.

Введение

Предварительный просмотр

Онлайн-предварительный просмотр DataV

Из-за того, что RAP2 поддерживает только HTTP, он используется только в среде разработки.

В производственной среде Mockjs используется вместо него.

Страница входа Визуализация списка
Список шаблонов Редактор

CheckList

- Функции страницы
- [x] Страница входа
    * [x] Панель управления
- [x] Главная страница
    * [x] Визуальное управление
        - [x] Шаблоны
    * [ ] Управление данными
    * [ ] Управление компонентами
    * [ ] Примеры и учебные пособия
- [x] Редактор
    * [x] Слои панели
    * [x] Компоненты панели
    * [x] Конфигурация панели
        * [x] Свойства холста панели
        * [x] Свойства компонентов панели
        * [x] Данные компонентов панели
        * [x] Взаимодействие компонентов панели
    * [x] Холст/контекстное меню/горячие клавиши
        * [x] Снимок экрана/масштабная линейка/опорная линия/перетаскивание компонентов/масштабирование макета
        * [x] Поместить наверх/поместить вниз/поднять на один слой/опустить на один слой/разблокировать/заблокировать/показать/скрыть/переименовать/копировать/удалить
        * [x] Отменить/восстановить
        * [x] Выбрать компоненты/объединить/разделить
    * [x] Другое
        * [x] Настройка фильтра
        * [x] Сохранить/предварительно просмотреть/опубликовать

- Базовая библиотека компонентов
- [ ] Столбчатая диаграмма
    * [x] Базовая столбчатая диаграмма
    * [ ] Дуговая столбчатая диаграмма
    * [ ] Линейная столбчатая диаграмма
    * [ ] Горизонтальная базовая столбчатая диаграмма
- [ ] Линия
    * [x] Основная линейная диаграмма
    * [ ] Диаграмма области
- [ ] Круговая диаграмма
    * [ ] Основная круговая диаграмма
    * [ ] Гистограмма с индикаторами
- [ ] Отношения
    * [ ] Дерево
- [ ] Карта
    * [x] Базовая карта Китая
        * [x] Слой области с высокой интенсивностью
        * [x] Динамический пузырьковый слой
        * [x] Линейный слой
    * [ ] Базовая карта мира
    * [ ] 3D плоская карта
    * [ ] Глобус 3D
- [x] Текстовый заголовок
    * [x] Общий заголовок
    * [x] Цифровой индикатор
    * [x] Бегущая строка
    * [x] Многострочный текст
    * [x] Таймер
    * [x] Облако слов
- [x] Список
    * [x] Слайд-шоу списка
    * [x] Слайд-шоу столбчатой диаграммы списка
- [x] Медиа
    * [x] Одно изображение
    * [x] Украшение
    * [x] Рамка
    * [x] Пользовательский фон
- [ ] Элементы управления
    * [x] Полноэкранное переключение
    * [ ] Список вкладок
    * [ ] Индикатор выполнения
- [x] Прочее
    * [x] Выбор даты|  

Установка и использование

# Инициализация проекта
pnpm run bootstrap

# Запуск
pnpm run dev

# Сборка и публикация
pnpm run build

# Предварительный просмотр на локальном компьютере, необходимо выполнить сборку перед использованием
pnpm run serve

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

pnpm run new datav

Настройка визуального компонента

Структура каталогов (например: main-title):

main-title
├── index.ts             # Вход компонента
└── src
    ├── index.vue        # Вход компонента
    ├── main-title.ts    # Объявление класса компонента
    ├── config.vue       # Свойства компонента
    └── config.json      # Используется для генерации файла config.vue

Использование компонента

Откройте файл src/data/system-components.ts, найдите или добавьте соответствующий узел компонента:

{
  name: '',
  alias: '',
  used: true, // Для включения необходимо изменить на true
  // ...
}

Используйте инструмент DataV-CLI-UI

Файлы config.vue и config.json можно настроить с помощью инструмента datav-cli-ui, подробнее ».

  • Инструмент предварительного просмотра prop-config

Другие варианты создания

  • Через режим параметров
# Создать компонент
pnpm run new component

# Создайте хранилище
pnpm run new store

# Создание иконки
pnpm run new icons

Интернационализация

В настоящее время интернационализация настроена только для страницы входа. Если необходимо, вы можете добавить её самостоятельно.

Добавить несколько языков

Расположение файлов нескольких языков: @/locales/lang/*.js

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

  • Options API:
<template>
  ...
    {{ $t('xxx') }}
  ...
</template>
  • Composition API:
import { useI18n } from 'vue-i18n'

...
setup() {
  const { t } = useI18n({ useScope: 'global' })

  t('xxx')

  return { t }
}
...

Пожертвования

Если вы считаете, что этот проект вам помог, вы можете поддержать автора, купив чашку чая или закуски, чтобы выразить свою поддержку :gift_heart:

Alipay Wechat
donate-Alipay donate-Wechat

Лицензия

DataV Vue использует лицензию MIT.

Примечание

Этот проект в основном предназначен для исследований и обучения. Если вы используете его в коммерческих целях, обратите внимание: в проекте есть некоторые платные материалы сторонних производителей.

Введение

Инструмент для создания приложения для визуализации данных. Развернуть Свернуть
Vue и 6 других языков
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/pengxiaotian-datav-vue.git
git@api.gitlife.ru:oschina-mirror/pengxiaotian-datav-vue.git
oschina-mirror
pengxiaotian-datav-vue
pengxiaotian-datav-vue
main