131 lines
4.2 KiB
Vue
131 lines
4.2 KiB
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>
|