base_ui/components/charts/CirclePacking.vue

<template>
  <div>
    <v-chart :options="chartOptions" lazy></v-chart>
  </div>
</template>

<script>
// 
import { use } from "echarts/core";
import { SunburstChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([TitleComponent, TooltipComponent, VisualMapComponent, SunburstChart, CanvasRenderer]);


/**
 * @vue-data {Object} [chartOptions={}] - تنظیمات نمودار
 * @vue-data {Object} title - تنظیمات عنوان نمودار
 * @vue-data {String} title.text - متن عنوان نمودار
 * @vue-data {Object} tooltip - تنظیمات ابزارک راهنما
 * @vue-data {String} tooltip.trigger - ماهیت مقدار ابزارک راهنما
 * @vue-data {String} tooltip.formatter - فرمت‌بندی مقدار ابزارک راهنما
 * @vue-data {Object} series - تنظیمات سریس های داده
 * @vue-data {String} series.type - نوع نمودار سریس
 * @vue-data {Array} series.data - داده‌های نمودار سریس
 * @vue-data {Array} series.data.name - نام داده
 * @vue-data {Array} series.data.children - زیرداده‌های داده
 * @vue-data {Number} series.data.value - مقدار داده
 * @vue-data {Array} series.radius - شعاع نمودار
 * @vue-data {Object} series.label - تنظیمات برچسب نمودار
 * @vue-data {Boolean} series.label.show - نمایش برچسب نمودار
 * @vue-data {Array} series.levels - سطوح نمودار
 * @vue-data {String} series.levels.r0 - شعاع داخلی سطح
 * @vue-data {String} series.levels.r - شعاع خارجی سطح
 * @vue-data {Object} series.levels.itemStyle - تنظیمات استایل آیتم‌های سطح
 * @vue-data {Number} series.levels.itemStyle.borderWidth - ضخامت حاشیه آیتم
 * @vue-data {Object} series.levels.label - تنظیمات برچسب سطح
 * @vue-data {String} series.levels.label.rotate - چرخش برچسب سطح
 * @vue-data {String} series.levels.label.align - تراز برچسب سطح
 * @vue-data {String} series.levels.label.position - موقعیت برچسب سطح
 * @vue-data {Number} series.levels.label.padding - فاصله برچسب سطح
 * @vue-data {Boolean} series.levels.label.silent - بی‌صدا بودن برچسب سطح
 */
export default {

  data() {
    return {
      chartOptions: {
        title: {
          text: "مثال نمودار Circle Packing",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}",
        },
        series: {
          type: "sunburst",
          data: [
            {
              name: "Root",
              children: [
                {
                  name: "Category 1",
                  children: [
                    { name: "Subcategory 1-1", value: 5 },
                    { name: "Subcategory 1-2", value: 3 },
                  ],
                },
                {
                  name: "Category 2",
                  children: [
                    { name: "Subcategory 2-1", value: 10 },
                    { name: "Subcategory 2-2", value: 8 },
                  ],
                },
                {
                  name: "Category 3",
                  children: [
                    { name: "Subcategory 3-1", value: 7 },
                    { name: "Subcategory 3-2", value: 6 },
                  ],
                },
              ],
            },
          ],
          radius: [0, "90%"],
          label: {
            show: false,
          },
          levels: [{}, {
            r0: '15%',
            r: '35%',
            itemStyle: {
              borderWidth: 2
            },
            label: {
              rotate: 'tangential'
            }
          }, {
            r0: '35%',
            r: '70%',
            label: {
              align: 'right'
            }
          }, {
            r0: '70%',
            r: '72%',
            label: {
              position: 'outside',
              padding: 3,
              silent: false
            },
            itemStyle: {
              borderWidth: 3
            }
          }]
        },
      },
    };
  },
};
</script>

<style scoped>
.v-chart {
  width: 100%;
  height: 500px;
}
</style>