Praxis der Realisierung der Breiten- und Höhenanpassung von Echarts-Diagrammen in Vue

1. Installieren und importieren

npm installiere echarts --save

//main.js 

// E-Charts aus „E-Charts“ importieren; 
import * as echarts from 'echarts'; // Wenn Sie echarts 5 oder höher installieren, müssen Sie es folgendermaßen importieren: Vue.prototype.$echarts = echarts

2. Definieren Sie die Anti-Shake-Funktion

Portal: Implementierung von Anti-Shake, Throttling und Anwendungsszenarien von Funktionen in Vue

// utils/common.js

// Anti-Shake-Funktion _debounce(fn, delay = 300) {
  var Timer = null;
  Rückgabefunktion () {
    var _this = dies;
    var args = Argumente;
    wenn (Timer) Zeitüberschreitung löschen (Timer); 
    Timer = setzeTimeout(Funktion () {
      fn.apply(_this, args);
    }, Verzögerung);
  };
}

Export{
  _Entprellung,
}

3. Diagrammcode zeichnen

<Vorlage>
  <div Klasse="Diagramme">
    <div id="Liniendiagramm" :style="{ width: '100%', height: '400px' }"></div>
  </div>
</Vorlage>

<Skript>
importiere { _debounce } von '@/utils/common.js'
Standard exportieren {
  Daten() {
    zurückkehren {};
  },
  Methoden: {
    zeichneLinie() {
      // Initialisieren Sie die Echarts-Instanz basierend auf dem vorbereiteten Dom let lineChart = this.$echarts.init(document.getElementById("lineChart"));
      lineChart.setOption({
        Titel:
          Text: „Diagramm der Beziehung zwischen Niederschlag und Abfluss“,
          x: "Mitte",
        },
        x-Achse:
          Typ: "Kategorie",
          Daten: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"],
        },
        yAchse: {
          Typ: "Wert",
        },
        Serie: [
          {
            Daten: [820, 932, 901, 934, 1290, 1330, 1320],
            Typ: "Linie",
          },
        ],
      });
    },
    resizeCharts:_debounce(Funktion(){
      dies.$echarts.init(document.getElementById('lineChart')).resize()
    },500)
  },
  montiert() {
    dies.drawLine();
    window.addEventListener('Größe ändern',this.resizeCharts);
  },
  vorZerstören () {
    window.addEventListener('Größe ändern',this.resizeCharts);
  },
};
</Skript>

init-Methode

Erstellen Sie eine ECharts-Instanz und geben Sie echartsInstance zurück. Sie können nicht mehrere ECharts-Instanzen in einem einzigen Container initialisieren.

(dom: HTMLDivElement|HTMLCanvasElement, Thema?: Objekt|Zeichenfolge, Optionen?: {
    Gerätepixelverhältnis?: Zahl,
    Renderer?: Zeichenfolge,
    useDirtyRect?: boolean, // Unterstützt seit „v5.0.0“ Breite?: Zahl|Zeichenfolge,
    Höhe?: Zahl|Zeichenfolge,
    Gebietsschema?: Zeichenfolge
}) => ECharts

dom: Instanzcontainer, normalerweise ein Div-Element mit Höhe und Breite.

Hinweis: Wenn das Div ausgeblendet ist, kann ECharts möglicherweise die Höhe und Breite des Div nicht ermitteln, was zu einem Initialisierungsfehler führt. In diesem Fall können Sie style.width und style.height des Div explizit angeben oder echartsInstance.resize manuell aufrufen, um die Größe anzupassen, nachdem das Div angezeigt wurde.

ECharts 3 unterstützt die direkte Verwendung von Canvas-Elementen als Container, sodass das Canvas nach dem Zeichnen des Diagramms direkt als Bild an anderen Stellen angewendet werden kann. Beispielsweise kann dies in WebGL als Textur die Echtzeitaktualisierung des Diagramms unterstützen, verglichen mit der Verwendung von echartsInstance.getDataURL zum Generieren eines Bildlinks.

Thema: Das Thema der Anwendung. Es kann sich um ein Designkonfigurationsobjekt oder einen Designnamen handeln, der über echarts.registerTheme registriert wurde.

opts: zusätzliche Parameter. Es gibt mehrere Möglichkeiten:

• devicePixelRatio: Gerätepixelverhältnis, der Standardwert ist das Browserfenster „window.devicePixelRatio“.
• Renderer Renderer, unterstützt „Canvas“ oder „SVG“. Siehe „Rendering mit Canvas oder SVG“.
• useDirtyRect Gibt an, ob die Darstellung schmutziger Rechtecke aktiviert werden soll. Der Standardwert ist „false“. Siehe die neuen Funktionen von ECharts 5.
• Mit width kann die Instanzbreite explizit in Pixeln angegeben werden. Wenn der Eingabewert null/undefiniert/‚auto‘ ist, bedeutet dies, dass die Breite des DOM (Instanzcontainer) automatisch übernommen wird.
• Höhe Sie können die Instanzhöhe explizit in Pixeln angeben. Wenn der übergebene Wert null/undefiniert/‚auto‘ ist, bedeutet dies, dass die Höhe des DOM (Instanzcontainer) automatisch übernommen wird.
• Die vom Gebietsschema verwendete Sprache. Es gibt zwei integrierte Sprachen: „ZH“ und „EN“. Sie können auch die Methode echarts.registerLocale verwenden, um ein neues Sprachpaket zu registrieren. Informationen zu derzeit unterstützten Sprachen finden Sie unter src/i18n.

Wenn Sie kein Design angeben, müssen Sie vor der Übergabe von Optionen auch null übergeben, z. B.: const chart = echarts.init(dom, null, {renderer: 'svg'});

Erklärung zur Größenänderung auf der offiziellen Website

Ändern Sie die Diagrammgröße. Diese Funktion muss manuell aufgerufen werden, wenn sich die Containergröße ändert.

(Optionen?: {
    Breite?: Zahl|Zeichenfolge,
    Höhe?: Zahl|Zeichenfolge,
    still?: Boolesch,
    Animation?:
        Dauer?: Zahl
        Lockerung?: Zeichenfolge
    }
}) => ECharts

Parameter:

Optionen können weggelassen werden. Es gibt mehrere Möglichkeiten:

• Breite: Sie können die Instanzbreite explizit in Pixeln angeben. Wenn der Eingabewert null/undefiniert/‚auto‘ ist, bedeutet dies, dass die Breite des DOM (Instanzcontainer) automatisch übernommen wird.
• Höhe: Sie können die Instanzhöhe explizit in Pixeln angeben. Wenn der übergebene Wert null/undefiniert/‚auto‘ ist, bedeutet dies, dass die Höhe des DOM (Instanzcontainer) automatisch übernommen wird.
• silent: Gibt an, ob das Werfen von Ereignissen verboten werden soll. Der Standardwert ist „false“.
• Animation: Ob beim Ändern der Größe eine Übergangsanimation angewendet werden soll, einschließlich Dauer und Easing-Konfiguration. Die Standarddauer ist 0, was bedeutet, dass keine Übergangsanimation angewendet wird.

Hinweis:
Manchmal werden Diagramme in mehreren Registerkarten platziert. Beim Initialisieren des Diagramms kann es vorkommen, dass die zunächst ausgeblendeten Registerkarten nicht dargestellt werden, da sie nicht die tatsächliche Höhe und Breite des Containers erreichen können. Daher müssen Sie beim Wechseln zur Registerkarte die Größenänderungsmethode manuell aufrufen, um die richtige Höhe und Breite zu erreichen und die Leinwand zu aktualisieren, oder die angegebene Diagrammhöhe und -breite in den Optionen anzeigen.
Portal: Offizielle Echarts-Dokumentation

Damit ist dieser Artikel über die Verwendung von Vue zur Implementierung der Breiten- und Höhenanpassung von Echarts-Diagrammen abgeschlossen. Weitere Informationen zur Breiten- und Höhenanpassung von Vue-Echarts-Diagrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!