<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>