<template>
<div>
<v-chart
:key="treeCounter"
:option="options"
style="height: 500px; width: 100%"
@dblclick="onChartDblClick"
@click="onChartClick"
ref="chart"
lazy
></v-chart>
</div>
</template>
<script>
//
import { use } from "echarts/core";
import { TreemapChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
ToolboxComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
use([
TitleComponent,
TooltipComponent,
TreemapChart,
CanvasRenderer,
ToolboxComponent,
]);
/**
* @vue-prop {Array} [dataTreeMap=[]] - داده‌های نمودار درختی
* @vue-data {Array} [dataTest=[]] - داده‌های نمودار درختی
* @vue-data {Object} [options] - تنظیمات نمودار درختی
* @vue-data {Object} [options.title] - عنوان نمودار
* @vue-data {String} [options.title.text="تعداد افراد"] - متن عنوان
* @vue-data {String} [options.title.left="leafDepth"] - موقعیت عنوان
* @vue-data {Object} [options.series] - سری‌های نمودار
* @vue-data {String} [options.series.name="افراد"] - نام سری
* @vue-data {String} [options.series.type="treemap"] - نوع نمودار
* @vue-data {Number} [options.series.visibleMin=300] - حداقل مقدار قابل مشاهده
* @vue-data {Array} [options.series.data=[]] - داده‌های سری
* @vue-data {Number} [options.series.leafDepth=2] - عمق برگ
* @vue-data {Array} [options.series.levels] - سطوح نمودار
* @vue-data {Object} [options.series.upperLabel] - برچسب بالایی
* @vue-data {Boolean} [options.series.upperLabel.show=true] - نمایش برچسب بالایی
* @vue-data {Number} [options.series.upperLabel.height=30] - ارتفاع برچسب بالایی
*/
export default {
props: {
dataChart: {
default() {
return [];
},
type: Array,
},
},
watch: {
dataChart(navItem) {
let data = this.organizeData(navItem);
// let data = navItem;
this.options.series[0].data = data;
this.treeCounter++;
},
},
data() {
return {
treeCounter: 1,
// dataTest: [
// {
// value: 1000,
// name: "Root",
// children: [
// {
// value: 500,
// name: "Child 1",
// children: [
// {
// value: 200,
// name: "Child 1.1",
// children: [
// { value: 50, name: "Child 1.1.1" },
// { value: 50, name: "Child 1.1.2" },
// { value: 50, name: "Child 1.1.3" },
// ],
// },
// {
// value: 200,
// name: "Child 1.2",
// children: [
// { value: 50, name: "Child 1.2.1" },
// { value: 50, name: "Child 1.2.2" },
// { value: 50, name: "Child 1.2.3" },
// ],
// },
// {
// value: 100,
// name: "Child 1.3",
// children: [
// { value: 30, name: "Child 1.3.1" },
// { value: 30, name: "Child 1.3.2" },
// { value: 30, name: "Child 1.3.3" },
// ],
// },
// ],
// },
// {
// value: 300,
// name: "Child 2",
// children: [
// {
// value: 100,
// name: "Child 2.1",
// children: [
// { value: 30, name: "Child 2.1.1" },
// { value: 30, name: "Child 2.1.2" },
// { value: 30, name: "Child 2.1.3" },
// ],
// },
// {
// value: 100,
// name: "Child 2.2",
// children: [
// { value: 30, name: "Child 2.2.1" },
// { value: 30, name: "Child 2.2.2" },
// { value: 30, name: "Child 2.2.3" },
// ],
// },
// {
// value: 100,
// name: "Child 2.3",
// children: [
// { value: 30, name: "Child 2.3.1" },
// { value: 30, name: "Child 2.3.2" },
// { value: 30, name: "Child 2.3.3" },
// ],
// },
// ],
// },
// {
// value: 200,
// name: "Child 3",
// children: [
// {
// value: 60,
// name: "Child 3.1",
// children: [
// { value: 20, name: "Child 3.1.1" },
// { value: 20, name: "Child 3.1.2" },
// { value: 20, name: "Child 3.1.3" },
// ],
// },
// {
// value: 60,
// name: "Child 3.2",
// children: [
// { value: 20, name: "Child 3.2.1" },
// { value: 20, name: "Child 3.2.2" },
// { value: 20, name: "Child 3.2.3" },
// ],
// },
// {
// value: 80,
// name: "Child 3.3",
// children: [
// { value: 30, name: "Child 3.3.1" },
// { value: 30, name: "Child 3.3.2" },
// { value: 30, name: "Child 3.3.3" },
// ],
// },
// ],
// },
// ],
// },
// {
// value: 1000,
// name: "Root",
// children: [
// {
// value: 500,
// name: "Child 1",
// children: [
// {
// value: 200,
// name: "Child 1.1",
// children: [
// { value: 50, name: "Child 1.1.1" },
// { value: 50, name: "Child 1.1.2" },
// { value: 50, name: "Child 1.1.3" },
// ],
// },
// {
// value: 200,
// name: "Child 1.2",
// children: [
// { value: 50, name: "Child 1.2.1" },
// { value: 50, name: "Child 1.2.2" },
// { value: 50, name: "Child 1.2.3" },
// ],
// },
// {
// value: 100,
// name: "Child 1.3",
// children: [
// { value: 30, name: "Child 1.3.1" },
// { value: 30, name: "Child 1.3.2" },
// { value: 30, name: "Child 1.3.3" },
// ],
// },
// ],
// },
// {
// value: 300,
// name: "Child 2",
// children: [
// {
// value: 100,
// name: "Child 2.1",
// children: [
// { value: 30, name: "Child 2.1.1" },
// { value: 30, name: "Child 2.1.2" },
// { value: 30, name: "Child 2.1.3" },
// ],
// },
// {
// value: 100,
// name: "Child 2.2",
// children: [
// { value: 30, name: "Child 2.2.1" },
// { value: 30, name: "Child 2.2.2" },
// { value: 30, name: "Child 2.2.3" },
// ],
// },
// {
// value: 100,
// name: "Child 2.3",
// children: [
// { value: 30, name: "Child 2.3.1" },
// { value: 30, name: "Child 2.3.2" },
// { value: 30, name: "Child 2.3.3" },
// ],
// },
// ],
// },
// {
// value: 200,
// name: "Child 3",
// children: [
// {
// value: 60,
// name: "Child 3.1",
// children: [
// { value: 20, name: "Child 3.1.1" },
// { value: 20, name: "Child 3.1.2" },
// { value: 20, name: "Child 3.1.3" },
// ],
// },
// {
// value: 60,
// name: "Child 3.2",
// children: [
// { value: 20, name: "Child 3.2.1" },
// { value: 20, name: "Child 3.2.2" },
// { value: 20, name: "Child 3.2.3" },
// ],
// },
// {
// value: 80,
// name: "Child 3.3",
// children: [
// { value: 30, name: "Child 3.3.1" },
// { value: 30, name: "Child 3.3.2" },
// { value: 30, name: "Child 3.3.3" },
// ],
// },
// ],
// },
// ],
// },
// {
// value: 1000,
// name: "Root",
// children: [
// {
// value: 500,
// name: "Child 1",
// children: [
// {
// value: 200,
// name: "Child 1.1",
// children: [
// { value: 50, name: "Child 1.1.1" },
// { value: 50, name: "Child 1.1.2" },
// { value: 50, name: "Child 1.1.3" },
// ],
// },
// {
// value: 200,
// name: "Child 1.2",
// children: [
// { value: 50, name: "Child 1.2.1" },
// { value: 50, name: "Child 1.2.2" },
// { value: 50, name: "Child 1.2.3" },
// ],
// },
// {
// value: 100,
// name: "Child 1.3",
// children: [
// { value: 30, name: "Child 1.3.1" },
// { value: 30, name: "Child 1.3.2" },
// { value: 30, name: "Child 1.3.3" },
// ],
// },
// ],
// },
// {
// value: 300,
// name: "Child 2",
// children: [
// {
// value: 100,
// name: "Child 2.1",
// children: [
// { value: 30, name: "Child 2.1.1" },
// { value: 30, name: "Child 2.1.2" },
// { value: 30, name: "Child 2.1.3" },
// ],
// },
// {
// value: 100,
// name: "Child 2.2",
// children: [
// { value: 30, name: "Child 2.2.1" },
// { value: 30, name: "Child 2.2.2" },
// { value: 30, name: "Child 2.2.3" },
// ],
// },
// {
// value: 100,
// name: "Child 2.3",
// children: [
// { value: 30, name: "Child 2.3.1" },
// { value: 30, name: "Child 2.3.2" },
// { value: 30, name: "Child 2.3.3" },
// ],
// },
// ],
// },
// {
// value: 200,
// name: "Child 3",
// children: [
// {
// value: 60,
// name: "Child 3.1",
// children: [
// { value: 20, name: "Child 3.1.1" },
// { value: 20, name: "Child 3.1.2" },
// { value: 20, name: "Child 3.1.3" },
// ],
// },
// {
// value: 60,
// name: "Child 3.2",
// children: [
// { value: 20, name: "Child 3.2.1" },
// { value: 20, name: "Child 3.2.2" },
// { value: 20, name: "Child 3.2.3" },
// ],
// },
// {
// value: 80,
// name: "Child 3.3",
// children: [
// { value: 30, name: "Child 3.3.1" },
// { value: 30, name: "Child 3.3.2" },
// { value: 30, name: "Child 3.3.3" },
// ],
// },
// ],
// },
// ],
// },
// ],
dataTest: [
{
id: "1739",
parent: "0",
name: "پیامد زیرساختی ",
value: 44,
color: "#CD5C08",
},
{
id: "1740",
parent: "0",
name: "پیامدهای ساختاری نهادی",
value: 123,
color: "#F5E8B7",
},
{
id: "1741",
parent: "0",
name: "پیامدهای روبنایی",
value: 53,
color: "#E5CFF7",
},
{
id: "1744",
parent: "0",
name: "تست",
value: 0,
color: "#6A9C89",
},
{
id: "1747",
parent: "0",
name: "موضوع جدید تستی23",
value: 0,
color: "#5B0888",
},
{
id: "1748",
parent: "0",
name: "موضوع تستی با موبایل",
value: 0,
color: "#713ABE",
},
{
id: "787",
parent: "757",
name: "خودتأمینی",
value: 0,
},
{
id: "774",
parent: "771",
name: "اشتغال",
value: 0,
},
{
id: "849",
parent: "780",
name: "نظام توزیع",
value: 0,
},
{
id: "793",
parent: "781",
name: "پسماند",
value: 0,
},
{
id: "784",
parent: "783",
name: "اگرواکوسیستم",
value: 0,
},
{
id: "786",
parent: "785",
name: "خودتأمینی",
value: 0,
},
{
id: "788",
parent: "785",
name: "بازیافت آب",
value: 0,
},
{
id: "1745",
parent: "856",
name: "هویت اجتماعی",
value: 1,
},
{
id: "863",
parent: "859",
name: "مدیریت و حکمرانی",
value: 5,
},
{
id: "864",
parent: "859",
name: "سازماندهی",
value: 6,
},
{
id: "866",
parent: "865",
name: "روندهای دانشی",
value: 6,
},
{
id: "867",
parent: "865",
name: "آموزش و تربیت",
value: 4,
},
{
id: "869",
parent: "868",
name: "فضای کالبدی",
value: 46,
},
{
id: "870",
parent: "868",
name: "نظام تولید ثروت",
value: 24,
},
{
id: "871",
parent: "868",
name: "نظام توزیع",
value: 11,
},
{
id: "1738",
parent: "868",
name: "تأمین انرژی",
value: 0,
},
{
id: "873",
parent: "872",
name: "خانواده",
value: 9,
},
{
id: "874",
parent: "872",
name: "نهاد اجتماعی بانوان",
value: 3,
},
{
id: "881",
parent: "875",
name: "تأمین معیشت",
value: 10,
},
{
id: "882",
parent: "875",
name: "نظام تغذیه",
value: 18,
},
{
id: "883",
parent: "875",
name: "تکافل اجتماعی",
value: 3,
},
{
id: "898",
parent: "881",
name: "تست تامین معیشت",
value: 0,
},
{
id: "897",
parent: "882",
name: "امنیت غذایی",
value: 7,
},
{
id: "887",
parent: "885",
name: "نشاط اجتماعی، تفریح و ورزش",
value: 3,
},
{
id: "888",
parent: "885",
name: "کشاورزی",
value: 28,
},
{
id: "889",
parent: "885",
name: "تولیدی و صنعتی",
value: 12,
},
{
id: "856",
parent: "1739",
name: "هویت اجتماعی",
value: 28,
},
{
id: "857",
parent: "1739",
name: "محور انگیزش اجتماعی",
value: 14,
},
{
id: "858",
parent: "1739",
name: "فعالیت جهادی",
value: 3,
},
{
id: "1746",
parent: "1739",
name: "موضوع تستی",
value: 0,
},
{
id: "859",
parent: "1740",
name: "چرخه مشارکت مردمی",
value: 18,
},
{
id: "865",
parent: "1740",
name: "چرخه دانش",
value: 10,
},
{
id: "868",
parent: "1740",
name: "چرخه اقتصادی و فضای کالبدی",
value: 82,
},
{
id: "872",
parent: "1740",
name: "بنیان جامعه",
value: 12,
},
{
id: "875",
parent: "1741",
name: "ثمرات اقتصادی",
value: 24,
},
{
id: "884",
parent: "1741",
name: "نظام سلامت",
value: 7,
},
{
id: "885",
parent: "1741",
name: "فعالیت مؤثر اجتماعی",
value: 44,
},
{
id: "890",
parent: "1741",
name: "گردشکری",
value: 2,
},
{
id: "894",
parent: "1741",
name: "امنیت",
value: 0,
},
{
id: "900",
parent: "1741",
name: "تعامل با محیط زیست",
value: 19,
},
{
id: "0000000",
parent: "0",
name: "نامشخص",
value: 11,
color: "#CD5C08",
},
],
options: {
// title: {
// // text: "تعداد افراد",
// // subtext: '2016/04',
// left: "leafDepth",
// },
tooltip: {},
// toolbox: {
// show: true,
// feature: {
// dataZoom: {
// yAxisIndex: "none",
// },
// dataView: { readOnly: false },
// // magicType: { type: ["line", "bar"] },
// restore: { show: true },
// saveAsImage: {},
// },
// },
series: [
{
// name: "افراد",
type: "treemap",
visibleMin: 1,
// visualDimension: 2,
data: [],
leafDepth: 1,
// squareRatio: 0.15,
levels: [
{
visibleMin: 0,
itemStyle: {
borderColor: "#555",
borderWidth: 4,
gapWidth: 4,
},
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 2,
borderWidth: 2,
},
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.6,
gapWidth: 1,
},
},
{
colorSaturation: [0.3, 0.5],
},
],
// label: {
// show: true,
// formatter: "{b}",
// },
upperLabel: {
show: true,
height: 30,
},
},
],
},
value: 50,
};
},
mounted() {
let data = this.organizeData(this.dataChart);
this.options.series[0].data = data;
this.treeCounter++;
},
methods: {
/**
* هنگامی که بر روی نمودار دوبل کلیک می‌شود، این متد اجرا می‌شود.
* اطلاعات مربوط به رویداد دوبل کلیک را به کامپوننت والد ارسال می‌کند.
*
* @param {object} params - پارامترهای مربوط به رویداد دوبل کلیک
*/
onChartDblClick(params) {
this.$emit("dblClick", params);
},
// وقتی مشکل value درست شد
// مقدار iپاک کنید
organizeData(data) {
const map = {};
const roots = [];
let i = "";
data.forEach((item) => {
i = this.value++;
map[item.id] = {
...item,
children: [],
visibleMin: item.value === 0 ? 0 : undefined,
value : i ,
};
});
data.forEach((item) => {
if (item.parent === "0") {
roots.push(map[item.id]);
} else if (map[item.parent]) {
map[item.parent].children.push(map[item.id]);
}
});
return roots;
},
onChartClick(event) {
const itemSelected = { name: event.data.name, y: event.data.value };
this.$emit("list", itemSelected);
},
},
};
</script>