Einführung von ECharts in das Vue-Projekt

npm installiere echarts --save

importiere * als Echarts von „Echarts“;

<Vorlage>
  <div
    Klasse = "echart"
    id="meinChart"
    :Stil="{ float: 'links', Breite: '100%', Höhe: '400px' }"
  ></div>
</Vorlage>

<Skript>
importiere * als Echarts von „Echarts“;

Standard exportieren {
  Daten() {
    zurückkehren {
      Name: "Zhang Xue",
      xData: ["2020-02", "2020-03", "2020-04", "2020-05"], // horizontale Koordinatendaten yData: [30, 132, 80, 134] // vertikale Koordinatendaten, entsprechend der horizontalen Koordinate};
  },
  montiert() {
    dies.initEcharts();
  },
  Methoden: {
    initEcharts() {
      const option = {
        Titel:
          Text: „ECharts – Erste Schritte – Beispiel“
        },
        Tooltip: {},
        Legende: {
          Daten: ["Verkaufsvolumen"]
        },
        x-Achse:
          Daten: ["Hemd", "Pullover", "Chiffonhemd", "Hose", "High Heels", "Socken"]
        },
        yAchse: {},
        Serie: [
          {
            Name: „Umsatz“,
            Typ: "Balken", // Typ ist Balkendiagrammdaten: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));// Symbolinitialisierung myChart.setOption(option);// Seite rendern// Diagramm an Bildschirmgröße anpassen window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</Skript>

// Importieren Sie das echarts-Kernmodul, das die notwendigen Schnittstellen für die Verwendung von echarts bereitstellt.
* als Echarts aus „echarts/core“ importieren;
// Balkendiagramme importieren, alle Diagramme haben die Endung "Chart"
importiere { BarChart } aus 'echarts/charts';
// Eingabeaufforderungsfeld, Titel, rechtwinkliges Koordinatensystem, Datensatz, integrierte Datenkonverterkomponenten einführen, alle mit dem Suffix Component
importieren {
  Titelkomponente,
  TooltipComponent,
  Rasterkomponente,
  Datensatzkomponente,
  Datensatzkomponentenoption,
  TransformComponent
} von „echarts/components“;
// Automatisches Label-Layout, globale Übergangsanimation und andere Features importiere { LabelLayout, UniversalTransition } aus 'echarts/features';
// Canvas-Renderer importieren. Beachten Sie, dass der Import von CanvasRenderer oder SVGRenderer ein notwendiger Schritt ist. importiere { CanvasRenderer } von „echarts/renderers“;

// Registriere die benötigten Komponentenecharts.use([
  Titelkomponente,
  TooltipComponent,
  Rasterkomponente,
  Datensatzkomponente,
  TransformComponent,
  Balkendiagramm,
  Etikettenlayout,
  UniversalTransition,
  CanvasRenderer
]);

// Die folgende Verwendung ist dieselbe wie zuvor: Initialisieren Sie das Diagramm und legen Sie die Konfigurationselemente fest. var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});