Vue echarts realisiert horizontales Balkendiagramm

<Vorlage>
  <div Klasse="Über JahrePompany">
    <div id="ÜberJahrePompanyChart" style="flex: 1; Höhe: 368px; Rand oben: -42px"></div>
  </div>
</Vorlage>
<Skript>
importiere { getProposedInvestments } von '@/api/government';
const Farben = [
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
  ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
];
Standard exportieren {
  Daten() {
    zurückkehren {
      InvestitionenWayData: [],
      InvestitionenWayDataCount: [],
      InvestitionenWayDataCounts: [],
    };
  },
  montiert() {
    dies.getProposedInvestments();
  },
  Methoden: {
    initMap() {
      var myChart = this.$echarts.init(document.getElementById('OverYearsPompanyChart'));
      const option = {
        Tooltip: {
          zeigen: wahr,
          Auslöser: 'Achse',
          Achsenzeiger:
            Typ: 'Schatten',
          },
        },
        x-Achse:
          Typ: "Wert",
          Achsenbezeichnung: {
            zeigen: wahr,
            Farbe: '#02CFFCFF',
            Schriftfamilie: „TencentSans“,
          },
          Achsenlinie: {
            zeigen: wahr,
            Linienstil:
              Farbe: '#02CFFCFF',
            },
          },
          geteilte Zeile: {
            zeigen: wahr,
            Linienstil:
              Farbe: 'rgba(71, 126, 171, 1)',
            },
          },
        },
        yAchse: [
          {
            Typ: "Kategorie",
            inverse: true, // inverses Achsenlabel: {
              Farbe: '#02CFFCFF',
              Schriftfamilie: „TencentSans“,
            },
            AchseTick: {
              anzeigen: falsch,
            },
            Achsenlinie: {
              zeigen: wahr,
              Linienstil:
                Farbe: '#02CFFCFF',
              },
            },
            geteilte Zeile: {
              zeigen: wahr,
              Linienstil:
                Typ: 'gepunktet',
                Farbe: 'rgba(71, 126, 171, 1)',
              },
            },
            Daten: this.investmentsWayData,
          },
        ],
        Serie: [
          {
            Typ: "Bar",
            Balkenbreite: 15,
            Etikett: {
              Position: ['98%', -20],
              zeigen: wahr,
              Farbe: '#fff',
              Schriftfamilie: „TencentSans“,
            },
            Daten: this.investmentsWayDataCount,
            Artikelstil: {
              Farbe(Parameter) {
                const { DatenIndex } = Parameter;
                lass Farbe = {
                  Typ: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  Farbstopps: [
                    {
                      Versatz: 0,
                      Farbe: Farben[Datenindex] ? Farben[Datenindex][0] : 'rot',
                    },
                    {
                      Versatz: 1,
                      Farbe: Farben[Datenindex] ? Farben[Datenindex][1] : 'rot',
                    },
                  ],
                };
                Farbe zurückgeben;
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getProposedInvestments() {
      getProposedInvestments().then((res) => {
        const { Status, Daten } = res;
        const { vorgeschlageneInvestmentsWayDis } = JSON.parse(Daten);
        wenn (Status === 200) {
          // this.investmentsWayData=[{0: "Joint Venture", 1: "Kooperation", 2: "Einzelunternehmen", 3: "Sonstiges"}]
          this.investmentsWayData = vorgeschlageneInvestmentsWayDis.map((item) => {
            Artikel zurückgeben.wayDis;
          });
          // this.investmentsWayDataCount=[{0: "496", 1: "372", 2: "248", 3: "124"}]
          this.investmentsWayDataCount = vorgeschlageneInvestmentsWayDis.map((item) => {
            gibt item.count zurück;
          });
          // diese.investmentsWayDataCounts=[{itemStyle:
    //Farbe:{
    // 0: "rgba(240, 7, 100, 1)"
    // 1: "rgba(0, 215, 229, 1)"}
    // Wert: "496"}]
          this.investmentsWayDataCounts = vorgeschlageneInvestmentsWayDis.map((item, index) => {
            zurückkehren {
              Wert: item.count,
              Artikelstil: {
                Farbe: Farben[Index],
              },
            };
          });
          dies.initMap();
        }
      });
    },
  },
};
</Skript>