BI

Опис

BI - це комплекс технологій для збору, аналізу та використання даних для оптимізації бізнес-рішень

Приклад підключення

CSS

<link href="https://cdn.softpro.ua/vue/bi/dev/vs-bi.style.css"></link>

JS

<script src="https://cdn.softpro.ua/vue/bi/dev/vs-bi.bundle.js"></script>

Список компонентів

Basic

• Pie: Кнопка з різноманітними стилями та можливостями кастомізації.
• Bar: Компонент для завантаження файлів на сервер.

Використання API

⚠️ Warning

Відповід від данних API повинна бути суворо у запропонованих форматах

Source

{
  source: [
    ["product", "2015", "2016", "2017"],
    ["Matcha Latte", 43.3, 85.8, 93.7],
    ["Milk Tea", 83.1, 73.4, 55.1],
    ["Cheese Cocoa", 86.4, 65.2, 82.5],
    ["Walnut Brownie", 72.4, 53.9, 39.1],
  ];
}

Source and dimensions

{
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
}

Загальні пропси

Усі налаштування віджета можна знайти за посиланням

Name	Description	Type
dataset	Дані для відображення у віджеті, працюють за принципом dataset Echarts Dataset	Object
options	Для налаштування основних параметрів віджета не враховуючи dataset	Object
seriesOptions	Окремі налаштування елементів данних дашборду за прикладом Echarts Series	Object
api	Для швидкого відображення данних з АПІ	String, Object

Options

Details

{
   tooltip: {
      show: true,
      trigger: "item", // item, axis, none
   },
   legend: { // легенда
      show: true,
      position: 'top-left', // top-right, bottom-left, bottom-right
      orient: 'horizontal' // vertical
   },
   xAxis: { // вісь x
      show: true,
      axisLabel: {
         fontSize: 12, // number
         rotate: 30
      }
   },
   yAxis: { // вісь y
      show: true,
      axisLabel: {
         fontSize: 12, // number
         rotate: 30
      }
   },
}

💡 Tip

в utils додати функцію: convert options->echartOptions

Структура проекту

# src
├── App.vue
├── assets
|  ├── echarts.js
|  └── style
|     └── vs-bi.style.css
├── components
|  └── basic
|     ├── vs-bar.vue
|     ├── vs-line.vue
|     └── vs-pie.vue
├── main.js
├── misc
|  └── install-components.js
└── mixins
   └── chart-mixin.js