Vue verwendet E-Charts, um ein Organigramm zu zeichnen

<Vorlage>
 <div :class="Klassenname" :style="{Höhe:Höhe,Breite:Breite}" />
</Vorlage>

<Skript>
E-Charts aus „E-Charts“ importieren;
erfordern("echarts/theme/macarons");
importiere { Entprellung } von "@/utils";

Standard exportieren {
 Requisiten: {
  Klassenname: {
   Typ: Zeichenfolge,
   Standard: „Diagramm“
  },
  Breite: {
   Typ: Zeichenfolge,
   Standard: „100 %“
  },
  Höhe:
   Typ: Zeichenfolge,
   Standard: „500px“
  },
  Diagrammdaten: {
   Typ: Objekt,
   erforderlich: true
  }
 },
 Daten() {
  zurückkehren {
   Diagramm: null,
  };
 },
 betrachten:
  Diagrammdaten: {
   tief: wahr,
   handler(Wert) {
    this.setOptions(Wert);
   }
  }
 },
 montiert() {
  dies.initChart();
  //Muss es selbstadaptiv sein? - Anti-Shake-Funktion hinzufügen this.__resizeHandler = debounce(() => {
   wenn (dieses.diagramm) {
    dies.chart.resize();
   }
  }, 100);
  window.addEventListener("Größe ändern", this.__resizeHandler);

  // Auf Änderungen in der Seitenleiste achten, um eine adaptive Skalierung zu erreichen const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
  sidebarElm.addEventListener("Übergangsende", this.sidebarResizeHandler);
 },
 vorZerstören() {
  wenn (!dieses.diagramm) {
   zurückkehren;
  }
  window.removeEventListener("Größe ändern", this.__resizeHandler);
  dies.chart.dispose();
  dieses.diagramm = null;

  const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
  sidebarElm.removeEventListener("Übergangsende", this.sidebarResizeHandler);
 },
 Methoden: {
  initChart() {
   dieses.chart = echarts.init(dieses.$el, "macarons");
   dies.setOptions(diese.chartData);
  
   const nodes = this.chart._chartsViews[0]._data._graphicEls;
   sei alleNode = 0;
   für(let index = 0; index < nodes.length; index++) {
    const node = Knoten[Index];
    if (Knoten === undefiniert) {
     weitermachen
    }
    alleNode++;
   }
   
   const Höhe = Fenster.innere Höhe;
   const width = Fenster.innereBreite – 1000;
   const aktuelleHeight = 85 * alle Knoten;
   const aktuelleBreite = 220 * alle Knoten;
   const neueHeight = Math.max(aktuelleHeight, Höhe);
   const neueBreite = Math.max(aktuelleBreite, Breite);
   const tree_ele = dies.$el;
   // tree_ele.style.height = newHeight + 'px'; //Anzupassende Höhe festlegen tree_ele.style.width = newWidth + 'px'; //Anzupassende Breite festlegen this.chart.resize();

   this.chart.on('click', this.chartData.clickCallback); //Knoten-Klick-Ereignis},
  setOptions(Daten) {
   dieses.chart.setOption({
    //Bereitstellung von Tools zum Anzeigen, Wiederherstellen und Herunterladen von Daten// toolbox: {
    // anzeigen: wahr,
    // Besonderheit : {
    // Markierung: {show: true},
    // Datenansicht: {Anzeigen: true, Nur lesen: false},
    // wiederherstellen: {show: true},
    // AlsBild speichern : {show: true}
    // }
    // },
    Serie: [
     {
      Name: "Einheitliche Kreditansicht",
      Typ: "Baum",
      orient: "TB", //vertikal oder horizontal TB steht für vertikal LR steht für horizontal top: '10%',
      initialTreeDepth: 10, //Die anfängliche Erweiterungsebene (Tiefe) des Baumdiagramms
      expandAndCollapse: false, //Untergeordnete Knoten beim Klicken auf einen Knoten nicht ausblenden, Standard: true
      Symbolgröße: [135, 65],
      Artikelstil: {
       Farbe: 'transparent',
       Rahmenbreite: 0,
      },
      Linienstil:
       Farbe: '#D5D5D5',
       Breite: 1,
       Kurvenzahl: 1,
      },
      Daten: [Daten]
     }
    ]
   });
  },
  sidebarResizeHandler(e) {
   wenn (e.propertyName === "Breite") {
    dies.__resizeHandler();
   }
  }
 }
};
</Skript>

<Vorlage>
  <Baum: Diagrammdaten = "Baumdaten" />
</Vorlage>

<Skript>
Baum aus „./tree“ importieren;

Standard exportieren {
 Daten() {
  zurückkehren {
   Baumdaten: {
    Etikett: {
     Hintergrundfarbe: '#F4F4F4',
     Rahmenradius: [0, 0, 5, 5],
     Formatierer: [
      '{erster|umfassender Kreditrahmen}',
      '{second|(CR20190912000013)\nGenehmigter Betrag: 100\nWährung: RMB}',
     ].join('\n'),
     reich:
      Erste: {
       Hintergrundfarbe: '#078E34',
       Farbe: '#fff',
       ausrichten: "zentriert",
       Breite: 135,
       Höhe: 30,
       Rahmenradius: [5, 5, 0, 0],
      },
      zweite: {
       Farbe: '#888',
       ausrichten: "zentriert",
       Zeilenhöhe: 17,
      },
     }
    },
    Kinder: [
     {
      Etikett: {
       Formatierer: [
        '{erstes|Kanalkontingent}',
       ].join('\n'),
       reich:
        Erste: {
         Hintergrundfarbe: '#3AC082',
         Farbe: '#fff',
         ausrichten: "zentriert",
         Breite: 135,
         Höhe: 65,
         Grenzradius: 5,
        },
       }
      },
      Kinder: [{
       Etikett: {
        Formatierer: [
         '{erster|Factoring-Betrag}',
        ].join('\n'),
        reich:
         Erste: {
          Hintergrundfarbe: '#3AC082',
          Farbe: '#fff',
          ausrichten: "zentriert",
          Breite: 135,
          Höhe: 65,
          Grenzradius: 5,
         },
        }
       },
       Kinder: [{
        Etikett: {
         Hintergrundfarbe: '#F4F4F4',
         Rahmenradius: [0, 0, 5, 5],
         Formatierer: [
          '{erste|umgekehrte Faktorisierung}',
          '{second|(CR20190912000013)\nGenehmigter Betrag: 100\nWährung: RMB}',
         ].join('\n'),
         reich:
          Erste: {
           Hintergrundfarbe: '#078E34',
           Farbe: '#fff',
           ausrichten: "zentriert",
           Breite: 135,
           Höhe: 30,
           Rahmenradius: [5, 5, 0, 0],
          },
          zweite: {
           Farbe: '#888',
           ausrichten: "zentriert",
           Zeilenhöhe: 17,
          },
         }
        },
       }]
      }]
     },
     {
      Etikett: {
       Formatierer: [
        '{erste|Garantie/(Le) Gruppe/Andere Beträge}',
       ].join('\n'),
       reich:
        Erste: {
         Hintergrundfarbe: '#3AC082',
         Farbe: '#fff',
         ausrichten: "zentriert",
         Breite: 135,
         Höhe: 65,
         Grenzradius: 5,
        },
       }
      },
      Kinder: [{
       Etikett: {
        Formatierer: [
         '{erster|Factoring-Betrag}',
        ].join('\n'),
        reich:
         Erste: {
          Hintergrundfarbe: '#3AC082',
          Farbe: '#fff',
          ausrichten: "zentriert",
          Breite: 135,
          Höhe: 65,
          Grenzradius: 5,
         },
        }
       },
       Kinder: [{
        Etikett: {
         Hintergrundfarbe: '#F4F4F4',
         Rahmenradius: [0, 0, 5, 5],
         Formatierer: [
          '{erste|Vorwärtsfaktorisierung}',
          '{second|(CR20190912000013)\nGenehmigter Betrag: 100\nWährung: RMB}',
         ].join('\n'),
         reich:
          Erste: {
           Hintergrundfarbe: '#B8D87E',
           Farbe: '#fff',
           ausrichten: "zentriert",
           Breite: 135,
           Höhe: 30,
           Rahmenradius: [5, 5, 0, 0],
          },
          zweite: {
           Farbe: '#888',
           ausrichten: "zentriert",
           Zeilenhöhe: 17,
          },
         }
        },
       }]
      },
      {
       Etikett: {
        Formatierer: [
         '{erster|Leasingbetrag}',
        ].join('\n'),
        reich:
         Erste: {
          Hintergrundfarbe: '#3AC082',
          Farbe: '#fff',
          ausrichten: "zentriert",
          Breite: 135,
          Höhe: 65,
          Grenzradius: 5,
         },
        }
       },
       Kinder: [
        {
         Etikett: {
          Hintergrundfarbe: '#F4F4F4',
          Rahmenradius: [0, 0, 5, 5],
          Formatierer: [
           '{erste|Fahrzeugmiete}',
           '{second|(CR20190912000013)\nGenehmigter Betrag: 100\nWährung: RMB}',
          ].join('\n'),
          reich:
           Erste: {
            Hintergrundfarbe: '#FF6C6A',
            Farbe: '#fff',
            ausrichten: "zentriert",
            Breite: 135,
            Höhe: 30,
            Rahmenradius: [5, 5, 0, 0],
           },
           zweite: {
            Farbe: '#888',
            ausrichten: "zentriert",
            Zeilenhöhe: 17,
           },
          }
         },
        },
       ]
      }]
     }
    ]
   }
  }
 },
 Komponenten:
  Baum,
 }
};
</Skript>