So implementieren Sie ein horizontales Balkendiagramm mit Prozentangaben in E-Charts

var Daten = [220, 182, 191, 234, 290, 120, 65, 444];
var Balkenbreite = 20;
var maxNum = 0;
für (var i = 0; i < Datenlänge; i++) {
    wenn (Daten[i] > maxNum) {
        maxNum = Daten[i];
    }
}
 
Option = {
    Hintergrundfarbe: 'schwarz',
    Netz: {
        oben: '10%',
        links: '20%',
        rechts: '10%',
        unten: '0%',
    },
 
    Titel:
        Text: 'Prozentspalte',
    },
    x-Achse:
        anzeigen: falsch,
    },
    yAchse: {
        Daten: Daten.map((Element, Index) => `Daten ${index}`),
        geteilte Zeile: {
            anzeigen: falsch,
        },
        Achsenbezeichnung: {
            Textstil: { Schriftgröße: '80%', Farbe: '#02afff' },
        },
        Achsenlinie: {
            anzeigen: falsch,
        },
        AchsenTick: falsch,
    },
    Serie: [
        {
            Typ: "Bar",
            Balkenbreite: Balkenbreite,
            z-Ebene: 2,
            Daten: Daten.Map (Funktion (Element) {
                zurückkehren {
                    Wert: Artikel,
                    maxNum: maxNum,
                };
            }),
            Etikett: {
                zeigen: wahr,
                Position: 'innen',
                // Entfernung: 80,
                ausrichten: "zentriert",
                Formatierer: Funktion (Parameter) {
                    // gibt params.data.realValue zurück;
                    var Prozent = Zahl((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
                    Renditeprozentsatz;
                },
                Farbe: '#fff',
                Schriftgröße: 12,
            },
            Artikelstil: {
                Grenzradius: 10,
                Farbe: neu echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { Offset: 0, Farbe: '#395CFE' },
                    { Offset: 1, Farbe: '#2EC7CF' },
                ]),
            },
        },
        {
            Typ: "Bar",
            Balkenbreite: Balkenbreite,
            barGap: '-100%',
            Daten: Daten.Map (Funktion (Element) {
                zurückkehren {
                    realerWert: Artikel,
                    Wert: maxNum,
                };
            }),
            Etikett: {
                zeigen: wahr,
                Position: 'rechts',
                Entfernung: 80,
                ausrichten: 'rechts',
                Formatierer: Funktion (Parameter) {
                    gibt params.data.realValue + 'item' zurück;
                },
                Farbe: '#02afff',
                Schriftgröße: 18,
            },
            Artikelstil: {
                Grenzradius: 10,
                Farbe: 'rgba(3,169,244, 0.5)',
            },
        },
    ],
};