Pie

Компоненту vs-pie розроблено для відображення та аналітики даних у вигляді "пирога"

✏️ Note

Для корректного відображення блоку віджета, parent блок повинен мати ширину та висоту!

Підключення

⚠️ Warning

В hbs відображення данних працює лише через пропс api

hbs

{{{_vue "vs-pie"}}}

Vue

<div style="width: 600px; height: 300px'">
  <VsPie />
</div>

Простий віджет

Приклад вигляду просто віджету без налаштувань стилів та елементів графіку

    <template>
      <div style="width: 715px; height: 300px; ">
        <VsPie :dataset="pieData"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            pieData: {
              dimensions: ["Brand name", "count"],
              source: [
                { "Brand name": "Mercedes", count: 15255134 },
                { "Brand name": "BMW", count: 1836600 },
                { "Brand name": "Audi", count: 2106600 },
                { "Brand name": "Volkswagen", count: 2155421 },
              ],
            },
          };
        },
      };
    </script>
  

Простий віджет у вигляді Doughnut

Приклад вигляду просто віджету без налаштувань стилів та елементів графіку

    <template>
      <div style="width: 715px; height: 300px; ">
        <VsPie :dataset="pieData" :seriesOptions="pieStyle.series"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            pieData: {
              dimensions: ["Brand name", "count"],
              source: [
                { "Brand name": "Mercedes", count: 15255134 },
                { "Brand name": "BMW", count: 1836600 },
                { "Brand name": "Audi", count: 2106600 },
                { "Brand name": "Volkswagen", count: 2155421 },
              ],
            },
            pieStyle: {
              series: {
                radius: ['40%', '70%'],
              }
            }
          };
        },
      };
    </script>
  

Налаштування віджету

Приклад вигляду віджета з налаштуваннями елементів графіку та відображення віджета

    <template>
      <div style="width: 715px; height: 300px;">
        <VsPie :dataset="pieData" :options="pieStyle.chart" :seriesOptions="pieStyle.series"/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            pieData: {
              dimensions: ["Brand name", "count"],
              source: [
                { "Brand name": "Mercedes", count: 15255134 },
                { "Brand name": "BMW", count: 1836600 },
                { "Brand name": "Audi", count: 2106600 },
                { "Brand name": "Volkswagen", count: 2155421 },
              ],
            },
            pieStyle: {
              chart: {
                legend: {
                  width: 260,
                  orient: "horizontal",
                  position: "bottom",
                  bottom: 0,
                  type: "scroll",
                },
                color: ["#ff715e", "#ffaf51", "#8c6ac4", "#715c87", "#c6b38e", "#a4d8c2"],
              },
              series: {
                label: {
                  color: "inherit",
                },
                center: ["50%", "47%"],
              },
            },
          };
        },
      };
    </script>