Beispielcode für horizontales Balkendiagramm von Echarts Bar

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

  const Quelle1 = [
    ["Januar", 1330, 666, 560],
    ["Februar", 820, 760, 660],
    ......
    ["November", 901, 880, 360],
    ["Dezember", 934, 600, 700],
  ];
  const Quelle2 = [
    ["1 Tag", 1330, 666, 560],
    ["2.", 820, 760, 660],
    ......
    ["29.", 934, 600, 700],
    ["30.", 1330, 666, 560],
  ];

  // Die konkrete Konfiguration ist wie zuvor gezeigt, die Details werden weggelassen, nur das grundlegende Beispiel wird gezeigt const initOption = {
    ...
    Datensatz: { Quelle: Quelle1 },
  };

  Standard exportieren {
    Daten() {
      zurückkehren {
        Diagramme: null,
        isDaily: false,
      };
    },
    montiert() {
      dies.charts = dies.$echarts.init(
        document.getElementById("Balkendiagramme"),
        null,
        {
          Renderer: "svg",
        }
      );
      diese.charts.setOption(R.clone(initOption));
    },
    Methoden: {
      Quelle behandeln() {
        dies.istDaily = !dies.istDaily;
        diese.charts.setOption(
          R.mergeDeepRight(initOption, {
            // Datenquellen-Dataset dynamisch aktualisieren: {
              Quelle: this.isDaily ? Quelle2 : Quelle1,
            },
            x-Achse:
              // Beschriftungsintervall dynamisch aktualisieren axisLabel: {
                Intervall: this.isDaily ? 4 : "auto",
              },
            },
            Serie: R.map(
              // Spaltenbreite dynamisch aktualisieren (o) => ((o.barWidth = this.isDaily ? 12 : 24), o),
              initOption.series
            ),
          }),
          WAHR
        );
        dies.charts.resize();
      },
    },
  };
</Skript>

<Skript>
  Standard exportieren {
    montiert() {
      window.addEventListener("Größe ändern", this.handleResize, false);
    },
    zerstört() {
      window.removeEventListener("Größe ändern", this.handleResize);
    },
    Methoden: {
      handleResize() {
        const _this = dies;
        const timer = setTimeout(() => {
          _this.lineCharts.resize();
          _this.barCharts.resize();
        }, 500);
        // Lösche den Timer this.$once("hook:beforeDestroy", () => {
          setzeTimeout(Timer);
        });
      },
    },
  };
</Skript>

let-Option = {
  x-Achse:
    Typ: "Wert",
  },
  yAchse: {
    Typ: "Kategorie",
  },
};

lass horizontaleFarbe = {
  Typ: "linear",
  x: 1, // Ändere y: 0,
  x2: 0,
  y2: 0, // Farbe ändernStopps: [
    { Offset: 0, Farbe: "rgba(234,244,255,1)" },
    { Offset: 1, Farbe: "rgba(234,244,255,0.3)" },
  ],
  global: falsch,
};

lass Farbliste = [
  "#1890ff",
  „#52c41a“,
  "#faad14",
  "#f5222d",
  "#1DA57A",
  "#d9d9d9",
];
lass Serie = [
  {
    Typ: "Bar",
    Balkenbreite: 16,
    Artikelstil: {
      // Angepasste Anzeige (um) verschiedene Farbspalten zu erreichen color: (params) => {
        gibt Farbliste [Params.Datenindex] zurück;
      },
    },
    Abmessungen: ["Typ", "Verkaufsmenge"],
  },
];

lass Serie = [
  {
    // ......
    Typ: "Bar",
    Etikett: {
      // Anzeigewert der Spaltenkopfzeile des Diagramms show: true,
      Position: "rechts",
      Farbe: "#333",
      Schriftgröße: "12px",
      Formatierer: (Parameter) => {
        Rückgabewert [params.encode.x[0]];
      },
    },
  },
];

let tooltip = R.merge(tooltip, {
  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;">${
                  Element.Wert[Element.encode.x[0]]
                }</span>
              </div>`
            )
            .verbinden("")}
        </div>`;
    HTML zurückgeben;
  },
});

charts.setOption({
  Titel:
    Text: "Verkaufsmengenverteilung",
  },
  Datensatz:
    Quelle: [
      ["Apfel", 200],
      ["Pfirsich", 180],
      ["Trauben", 340],
      ["Banane", 250],
      ["Mango", 166],
      ["Durian", 185],
    ],
  },
  xAchse: R.merge(yAchse, {
    Typ: "Wert",
  }),
  yAchse: R.mergeDeepRight(xAchse, {
    Typ: "Kategorie",
    Achsenzeiger:
      Schattenstil: {
        Farbe: horizontaleFarbe,
      },
    },
  }),
  Serie,
  Tooltip,
});