Echart Bar-Doppelsäulendiagrammstil, umfassendste und detaillierteste Erklärung

npm installiere echarts --save

importiere * als Echarts von „Echarts“;
Vue.prototype.$echarts = echarts;

// Importieren Sie das Echarts-Kernmodul, das die erforderlichen Schnittstellen für den Echarts-Import bereitstellt * als Echarts aus „echarts/core“;

// Importieren Sie verschiedene Diagramme, alle mit dem Suffix „Chart“
importiere { Balkendiagramm, Liniendiagramm, Kreisdiagramm } aus „echarts/charts“;

// Führen Sie Komponenten wie Eingabeaufforderungsfelder, Titel, rechteckige Koordinatensysteme usw. ein. Das Komponentensuffix lautet Component
importieren {
  Titelkomponente,
  TooltipComponent,
  Toolbox-Komponente,
  Rasterkomponente,
  LegendComponent,
  Achsenzeigerkomponente,
  Datensatzkomponente,
} von „echarts/components“;

// Canvas-Renderer importieren. Beachten Sie, dass der Import von CanvasRenderer oder SVGRenderer ein notwendiger Schritt ist. importiere { SVGRenderer } von „echarts/renderers“;

// Registriere die benötigten Komponentenecharts.use([
  Balkendiagramm,
  Liniendiagramm,
  Kreisdiagramm,

  Titelkomponente,
  TooltipComponent,
  Toolbox-Komponente,
  Rasterkomponente,
  LegendComponent,
  Achsenzeigerkomponente,
  Datensatzkomponente,

  SVGRenderer,
]);

Standard-E-Charts exportieren;

E-Charts aus „./utils/echarts“ importieren;
Vue.prototype.$echarts = echarts;

<Vorlage>
  <div id="Charts" style="Breite: 600px; Höhe: 400px"></div>
</Vorlage>

<Skript>
  importiere * als R von „ramda“;

  Standard exportieren {
    montiert() {
      dies.initCharts();
    },
    Methoden: {
      initCharts() {
        Lassen Sie Diagramme = this.$echarts.init(document.getElementById("charts"));
        let-Option = {
          Titel:
            Text: „Monatlicher Verbrauchstrend“, // Titel Untertext: „Histogramm“, // Untertitel},
          x-Achse:
            Typ: "Kategorie",
          },
          yAchse: {
            Typ: "Wert",
          },
          Farbe: ["#1890ff", "#52c41a", " #faad14"], // Balkendiagrammfarbe Datensatz: {
            Quelle: [
              // Datenquelle ["Januar", 1330, 666, 560],
              ["Februar", 820, 760, 660],
              ["März", 1290, 1230, 780],
              ["April", 832, 450, 890],
              ["Mai", 901, 880, 360],
              ["Juni", 934, 600, 700],
            ],
          },
          Serie: [
            // Einstellungen für Symbolspalten { Typ: "Balken", Stapel: "Gesamt", Name: "Apfel" },
            { Typ: "Riegel", Stapel: "Gesamt", Name: "Birne" },
            { Typ: "Balken", Stapel: "Gesamt", Name: "Pfirsich" },
          ],
          Tooltip: {
          //Promptbox-Komponente}
        };
        charts.setOption(option);
      },
    },
  };
</Skript>

<style lang="scss" scoped></style>

x-Achse:
  Typ: "Kategorie",
  boundageGap: true, // Leerraumstrategie auf beiden Seiten der Koordinatenachse, Standard ist true
  axisTick: { // Maßstab anzeigen: false,
  },
  axisLabel: { // Skalenbeschriftungsfarbe: "#808080",
    Schriftgröße: 12,
    margin: 8, // Der Abstand zwischen der Skalenbeschriftung und der Achsenspanne: "auto", // Anzeigeintervall der X-Achsenbeschriftung, automatisch},
  Achsenlinie: { // Achsenlinienstil: {
      Farbe: "#c3c3c3",
      Breite: 0,5,
    },
  },
  splitLine: { // geteilte Linie anzeigen: false,
    Intervall: "auto",
  },
  splitArea: { // geteilter Bereich anzeigen: false,
    Bereichsstil: {},
  },
},

x-Achse:
  Achsenbezeichnung: {
    // Intervall: "auto",
    Intervall: 50, // Nur die maximalen und minimalen Koordinaten anzeigen showMinLabel: true, // Minimale Skalenbeschriftung anzeigen showMaxLabel: true, // Maximale Skalenbeschriftung anzeigen }
}

const stackBarSeries = {
  Typ: "Balken", // Balkendiagramm Balkenbreite: 32, // Spaltenbreite Stapel: "Gesamt", // Datenstapelung ShowBackground: false, // ob die Spaltenhintergrundfarbe angezeigt werden soll // Grafikstil und Beschriftungsstil hervorheben Empfindung: {
    // Beim Bewegen der Maus wird das gleiche Geschäftselement hervorgehoben und andere Elemente werden aus der Grafik ausgeblendet // Fokus: "Serie",
    // Standardkonfiguration, nur die aktuellen Hover-Daten werden ausgeblendet Fokus: „none“,
  },
};

let-Option = {
  Serie: R.map(
    (o) =>
      R.merge(stackBarSeries, {
        Vorname: o,
      }),
    ["Apfel", "Birne", "Pfirsich"]
  ),
};

let-Option = {
  Tooltip: {
    //Trigger der Eingabeaufforderungskomponente: "axis", //Achsentrigger},
  x-Achse:
    // Achsenzeiger axisPointer: {
      Typ: "Schatten",
      // Der z-Wert des Koordinatenachsenindikators steuert die Reihenfolge der Grafiken z: 1,
      // Indikatormaskenstil shadowStyle: {
        // Lösen Sie das Problem des Farbverlaufs im Hover-Hintergrund color: {
          Typ: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          Farbstopps: [
            {
              Versatz: 0,
              Farbe: "rgba(234,244,255,1)", // Farbe bei 0%},
            {
              Versatz: 1,
              Farbe: "rgba(234,244,255,0.3)", // 100% Farbe},
          ],
          global: false, // Standard ist false
        },
        //Hintergrundfarbe und Schatten festlegen//color: "rgba(234,244,255,1)",
        // Deckkraft: 1,
        // Schattenfarbe: "rgba(0, 0, 0, 0,5)",
        // Schattenunschärfe: 10,
        // SchattenOffsetX: 10,
        // SchattenOffsetY: 10,
      },
    },
  },
};

let-Option = {
  Tooltip: {
    // Auslöser der Eingabeaufforderungskomponente: „Achse“, // Auffüllung des Auslösers der Koordinatenachse: [20, 16, 12, 16],
    Hintergrundfarbe: "#fff",
    alwaysShowContent: false,
    Formatierer: Funktion (Parameter) {
      lass html = `<div style="height:auto;width: 163px;">
          <div style="Schriftgröße: 14px; Schriftstärke: fett; Farbe: #333; Rand unten: 16px; Zeilenhöhe: 1;">
            ${params[0].axisValue}
          </div>
          ${params
            .Karte(
              (
                Artikel
              ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
                <span style="Anzeige: Inline-Block;Rand rechts: 8px;Rahmenradius: 6px;Breite: 6px;Höhe: 6px;Hintergrundfarbe: ${
                  Artikelfarbe
                };"></span>
                ${item.seriesName}
                <span style="flex:1;text-align:right;">¥${Artikel.Wert[
                  Element.encode.y[0]
                ] || 0}</span>
              </div>`
            )
            .verbinden("")}
            <div Stil="Anzeige:flex;Ausrichten von Elementen:center;Justieren von Inhalt:Abstand zwischen;Schriftgröße:12px;Farbe:#333;Auffüllen oben:4px;Rand unten:8px;Zeilenhöhe:1;">
            <span>Gesamt</span>
            <span>¥${R.ReduceRight(
              R. hinzufügen,
              0,
              R.drop(1, Parameter[0].Wert || [])
            )}</span>
          </div>
        </div>`;
      HTML zurückgeben;
    },
  },
};

let-Option = {
  yAchse: {
    Typ: "Wert",
    minIntervall: 100,
    Namenslücke: 8,
    Achsenbezeichnung: {
      Farbe: "#808080",
      Schriftgröße: 10,
      // Formatierer: (Wert) => {
      // GeldFormatWert(Wert) zurückgeben;
      // },
    },
    geteilte Zeile: {
      Linienstil:
        Typ: "gestrichelt",
        Farbe: "#ebebeb",
        Breite: 0,5,
      },
    },
  },
};

let-Option = {
  Netz: {
    links: 0,
    rechts: 12,
    unten: 0,
    oben: 68,
    containLabel: wahr,
  },
  // Legendeneinstellungen legend: {
    oben: 32,
    links: -5,
    Symbol: "Kreis",
    itemHeight: 6, // Ändere die Symbolgröße itemGap: 24,
    Textstil: {
      Schriftgröße: 12,
      Farbe: "#333",
      padding: [0, 0, 0, -8], // Ändere den Abstand zwischen Text und Symbol},
  },
};