Grundlegendes Tutorial zum WeChat-Miniprogramm: Verwendung von Echart

"Komponenten verwenden": {
    "Registerkarte": "../../Komponente/Registerkarten/Registerkarte",
    „ec-canvas“: „../../tools/ec-canvas/ec-canvas“
  },

<Klasse anzeigen="echart">
 <tab active-tab="{{activeTab}}" period-list="{{periodList}}" bind:changePeriodType='changePeriodType'></tab>
 <Ansichtsklasse="echart-position">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas>
 </Ansicht>
 
</Ansicht>

.echart-position {
    Position: relativ;
    Höhe: 280px;
    Überlauf: versteckt;
  }

importiere * als E-Charts aus „../../tools/ec-canvas/echarts“;
Funktion setOption(Diagramm,Daten){
    var option = {
        Titel:
            text: ''
        },
        Tooltip: {
            Auslöser: ‚Artikel‘
        },
        Legende: {
            Daten: []
        },
        Serie: [{
            Name: '',
            Typ: "Kuchen",
            Radius: ['40%', '70%'],
            avoidLabelOverlap: falsch,
            Etikett: {
                anzeigen: falsch,
                Position: "Mitte"
            },
            Schwerpunkt:
                Etikett: {
                    zeigen: wahr,
                    Schriftgröße: '40',
                    Schriftstärke: „fett“
                }
            },
            Beschriftungszeile:
                anzeigen:false
            },
            Daten: [
               ...Daten
            ]
        }]
    };
    chart.setOption(option);
    Renditediagramm;
}
Seite({
    Daten: {
        Periodenliste: [
            {
                ID: "Ergebnis",
                Text: 'Ausgaben'
            },
            {
                ID: "Einkommen",
                Text: 'Einkommen'
            },
        ],
        activeTab: 'Ergebnis',
        echartsData: null, //echarts-Daten},
    // Einnahmen- und Ausgabenumschaltereignis changePeriodType(e) {
        console.log(e, '<=Einnahmen-Ausgaben-Umschaltereignis')
        dies.setData({
            activeTab: e.detail.params.type
        })
        // Liste erneut abfragen this.getEchartData();
    },
    // Einnahmen- und Ausgabendaten abfragen getEchartData() {
        wx.cloud.database().collection('spendD').where({
            Typ: this.data.activeTab == 'Ergebnis' ? 0 : 1
        }).get().then(res => {
            Lassen Sie calcResult = this.handleOriginData(res.data);
            dies.setData({
                echartsData:calcResult
            })
            this.init_one(Berechnungsergebnis)
        })
    },
    handleOriginData(Array) {
        lass Ergebnis = [];
        let obj = {}
        array.fürJedes(item => {
            wenn (!obj[item.name]) {
                obj[Artikelname] = 0;
            }
            obj[Artikelname] += Nummer(Artikelmenge);
        })

        für (let key in obj){
            lass temp = {};
            temp['Name'] = Schlüssel;
            temp['Wert']= Objekt[Schlüssel];
            Ergebnis.push(temp);
        }
        console.log(Ergebnis,'Ergebnis')
        Ergebnis zurückgeben
    },
    /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/

  init_one: Funktion (Daten) { // Initialisiere das Diagramm this.echartComponent.init((Canvas, Breite, Höhe) => {
        const chart = echarts.init(canvas, null, {
            Breite: Breite,
            Höhe: Höhe
        });
        setOption(Diagramm,Daten)
        dieses.diagramm = Diagramm;
        Renditediagramm;
    });
},
    onLoad: Funktion (Optionen) {
        dies.getEchartData()
    },

    /**
     * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
    onReady: Funktion () {
        diese.echartComponent = diese.selectComponent('#mychart-dom-bar');  
    },

})