805 lines
22 KiB
Vue
805 lines
22 KiB
Vue
|
<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>
|