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