vue3.0 + echarts realisiert dreidimensionales Säulendiagramm

cnpm i --save echarts

<Vorlage>
  <div ref="echart" class="echartDiv"></div>
</Vorlage>

importiere * als E-Charts von „E-Charts“;

<Vorlage>
  <div ref="echart" class="echartDiv"></div>
</Vorlage>
 
<Skript>
importiere * als E-Charts von „E-Charts“;
importiere { onMounted, toRefs, ref, reactive } von „vue“;
Standard exportieren {
  aufstellen(){
    lass Zustand = reaktiv({
      xAxisData:['Haoxing', 'Yanzi', 'Doraemon', 'Li Qiang', 'Wang Ying', 'Lao Wang'],
      yAxisData:[4,22,1,11,23,11],
      yAxisData1:[1,1,1,1,1,1],
      echart: ref(),
    })
    const echartInit = () => {
      var myChart = echarts.init(state.echart);
      //Konfigurationselemente und Daten des Diagramms angeben var option = {
        Tooltip: {
          Auslöser: "Achse",
          Achsenzeiger:
            Typ: „Schatten“, // Standard ist eine gerade Linie, optional: „Linie“ | „Schatten“
          },
          Formatierer: Funktion (Parameter) {
            var str =
              parms[0].Achsenwert +
              "</br>" +
              Parameter[0].Markierung +
              "Heute anmelden:" +
              parms[0].Wert + 'Zeiten'
            gibt str zurück;
          },
 
        },
        Textstil: {
          Farbe: "#333",
        },
        Farbe: ["#7BA9FA", "#4690FA"],
        Netz: {
          containLabel: wahr,
          links: "10%",
          oben: "20%",
          unten: "10%",
          rechts: "10%",
        },
        x-Achse:
          Typ: "Kategorie",
          Daten: state.xAxisData,
          Achsenlinie: {
            Linienstil:
              Farbe: "#333",
            },
          },
          AchseTick: {
            anzeigen: falsch,
          },
          Achsenbezeichnung: {
            Rand: 20, //Der Abstand zwischen der Skalenbeschriftung und der Achsenlinie.
            Textstil: {
              Farbe: "#000",
            },
          },
        },
        yAchse: {
          Typ: "Wert",
          Achsenlinie: {
            zeigen: wahr,
            Linienstil:
              Farbe: "#B5B5B5",
            },
          },
          geteilte Zeile: {
            Linienstil:
              // Helle und dunkle Intervallfarben verwenden color: ["#B5B5B5"],
              Typ: "gestrichelt",
              Deckkraft: 0,5,
            },
          },
          Achsenbezeichnung: {},
        },
        Serie: [{
          Daten: state.yAxisData,
          Stapel: "zs",
          Typ: "Bar",
          barMaxWidth: "auto",
          Balkenbreite: 60,
          Artikelstil: {
            Farbe:
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              Typ: "linear",
              global: falsch,
              Farbstopps: [{
                Versatz: 0,
                Farbe: "#5EA1FF",
              },
                {
                  Versatz: 1,
                  Farbe: "#90BEFF",
                },
              ],
            },
          },
        },
 
          //Die folgende dreidimensionale Kontrollfarbe ist die erste Farbe {
            Daten: state.yAxisData1,
            Typ: "Bildleiste",
            barMaxWidth: "20",
            Symbol: "Diamant",
            symbolOffset: [0, "50%"],
            Symbolgröße: [60, 15],
            z-Ebene: 2,
          },
          // Im obigen dreidimensionalen Bild ist die Kontrollfarbe die zweite Farbe {
            Daten: state.yAxisData,
            Typ: "Bildleiste",
            barMaxWidth: "20",
            symbolPosition: "Ende",
            Symbol: "Diamant",
            symbolOffset: [0, "-50%"],
            Symbolgröße: [60, 12],
            z-Ebene: 2,
          }
        ],
      };
      // Zeigen Sie das Diagramm mit den gerade angegebenen Konfigurationselementen und Daten an.
      myChart.setOption(option);
    }
 
    //Einhängen beiMounted(()=>{
      echartInit()
    })
 
    zurückkehren {
      …toRefs(Zustand),
      echartInit
    };
  }
}
</Skript>
 
<style lang='scss' scoped>
  .echartDiv{
    Breite: 100 %;
    Höhe: 400px;
  }
</Stil>