Vollständige Schritte zur Verwendung von Echarts und Unterverpackungen im WeChat Mini-Programm

Vorwort

Obwohl der Feiertag vorbei ist, zeigt er sich uns in einer anderen Form (durch Berühren unseres Bauches). Die grafische Darstellung von Daten im Miniprogramm ist die mir zugewiesene Aufgabe für die Ferien-Vorabrecherche. Ich habe die Artikel der großen Anbieter im Internet durchgesehen und etwas über Ucharts, F2, Wx-Charts und Echarts gelernt. Ich habe nur F2 und Echarts ausprobiert. Aufgrund des jüngsten Updates von Echarts und meiner größeren Vertrautheit mit Echarts habe ich mich für Echarts entschieden. Ich habe auch F2 ausprobiert, und obwohl es funktionierte, war ich nicht allzu vertraut damit, also habe ich aufgegeben.

Kommen wir zur Sache

Zuerst habe ich den Artikel einer anderen Person über Echarts gesehen, der den Link zur offiziellen Website enthielt. Dann bin ich auf die offizielle Website gegangen und habe ihn gelesen. Es war relativ einfach. Ich werde hier auch einen Link angeben. Die allgemeinen Schritte

1. Laden Sie das Beispiel der offiziellen Website herunter.

2. Kopieren Sie den Ordner „ec-canvas“ im Beispiel der offiziellen Website in das Projektverzeichnis.

3. Führen Sie EC-Canvas in die jeweilige Seite ein, genau wie Sie Komponenten verwenden.

4. Initialisieren Sie im JS der jeweiligen Seite.

Suchen Sie nach dem Herunterladen des Beispiels der offiziellen Website den Ordner ec-canvas, der echarts.js, wx-canvas.js und ec-canvas enthält. Kopieren Sie dann diesen Ordner in das Verzeichnis Ihres eigenen Projekts. Zuerst lege ich ihn unter „utils“ ab und dann, nachdem ich ihn in Unterpakete unterteilt habe, woanders. Hier lege ich ihn unter „utils“ ab. Dann wurde das Projekt über 700 KiB größer.

Seite

xxx.json

{
 "Komponenten verwenden": {
 "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas"
 }
}

xxx.wxml

<Ansichtsklasse="container-echarts margin-top-10">
 <ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</Ansicht>

xxx.js muss zuerst E-Charts importieren, bevor die folgende initChart-Methode verwendet wird. Importieren Sie E-Charts daher entsprechend dem Pfad des platzierten EC-Canvas.

importiere * als E-Charts von 'xxx/xxx/xxx/ec-canvas/echarts'; // Importiere E-Charts entsprechend dem Pfad des platzierten EC-Canvas
let chart = null // Verwenden Sie eine Variable, um die Initialisierung von Echarts zu speichern. let options = { // Grafikkonfiguration. Jeder, der schon einmal Echarts verwendet hat, weiß, was das bedeutet. Hier ist ein einfaches Beispiel für das Liniendiagramm xAxis der offiziellen Website: {
  Typ: "Kategorie",
  Daten: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
 },
 yAchse: {
  Typ: "Wert"
 },
 Serie: [{
  Daten: [150, 230, 224, 218, 135, 147, 260],
  Typ: "Zeile"
 }]
} 
function initChart(canvas, width, height, dpr) { // hier können canvas, width, height, dpr ignoriert werden const chart = echarts.init(canvas, null, {
 Breite: Breite,
 Höhe: Höhe,
 devicePixelRatio: dpr // Pixel});
 canvas.setChart(Diagramm);
 chart.setOption(Optionen);
 Renditediagramm;
}

Seite({
 Daten: {
 ec: {
  onInit: initChart // Hier keine Klammern hinzufügen!
 }
 }
});

Speichern und ausführen. An diesem Punkt kann echarts theoretisch die Ergebnisse anzeigen, aber Sie müssen es noch selbst debuggen.

Verwenden Sie eine Diagrammvariable, um die Initialisierung von E-Charts zu speichern. Die offizielle Website schreibt auch Optionen in die Methode, also habe ich sie herausgenommen. Wozu dient also ein Diagramm? Da die meisten Daten asynchron abgerufen werden, müssen E-Charts dynamisch gerendert werden. Sobald die Daten vorliegen, wird dieses Diagramm verwendet.

chart.setOption({
 x-Achse:
 Daten: newData.map(item => {
  Rückgabeelement[0];
 })
 },
 Serie: {
 Daten: newData.map(item => {
  Artikel zurückgeben[1];
 })
 }
})

Bezüglich des Datenformats beachten Sie bitte, dass Sie in den Optionen der einzelnen Personen nachsehen, welches Bild Sie rendern möchten. Ich verwende das Beispielportal der offiziellen Website. Die Datenaktualisierung von Echarts kann direkt mit setOption aktualisiert werden.

Das Zoomen und Scrollen funktionierte in den Entwicklertools nicht, auf dem Telefon funktionierte es jedoch nach dem Hochladen auf die Testversion. WeChat hat type="2d" für Canvas. Wenn Sie type="2d" in ec-canvas verwenden möchten, müssen Sie ec-canvas.js ändern

Daten: {
 isUseNewCanvas: true // Hier auf true ändern, der Standardwert ist false
}

Denn: isUseNewCanvas ist standardmäßig „false“, was der alten Version von Canvas entspricht.

<!-- Neu: Schnittstelle an H5 angepasst -->
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
<!-- Alt -->
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

echarts.js hat eine große Größe und das Upload-Projekt hat ein Limit von 2 MiB

Die echarts.js im heruntergeladenen ec-canvas ist mehrere hundert KiB groß, was im Vergleich zu 2 MiB ziemlich groß ist. Als ich das Projekt hochgeladen habe, wurde mir angezeigt, dass das Limit überschritten wurde. Die einzigen zwei Methoden, die mir einfielen und die sofort wirksam wären, waren, die Größe von echarts.js zu reduzieren und es in verschiedene Pakete aufzuteilen.

Das Problem der großen Größe von echarts.js

Auf der offiziellen Website von echarts (Portal – Online-Anpassung) gibt es eine On-Demand-Konstruktionsmethode. Rufen Sie unten die Online-Anpassung auf und wählen Sie das gewünschte Diagramm aus. Ich habe ein Liniendiagramm und ein rechteckiges Koordinatensystem ausgewählt. In der Komponente habe ich alle Komponenten außer Pinselauswahl, Symbolleiste und benutzerdefinierten Grafiken ausgewählt. Ich habe auch SVG in anderen Optionen überprüft. Klicken Sie dann auf „Herunterladen“, um die Konstruktionsseite aufzurufen. Wenn die Konstruktion abgeschlossen ist, wird automatisch eine Datei echarts.min.js heruntergeladen, wodurch die Größe um etwa 200 KiB reduziert wird. Benennen Sie es dann in echarts.js um und ersetzen Sie es durch ec-canvas.

Problem mit der 2-MiB-Grenze beim Hochladen des Projekts

Die Größe von echarts.js wurde reduziert, das Problem der Upload-Beschränkung, d. h. der Unterverpackung, besteht jedoch weiterhin.

In app.json gibt es ein Unterpaket

{
 "Unterpakete": [
 {
  "Wurzel": "xxx/xxx",
  "Name": "xxx",
  "unabhängig": falsch,
  "Seiten": [
  "Seiten/xxx",
  "Seiten/xxx",
  "Seiten/xxx"
  ]
 },
 {
  "root": "baoziTask/",
  "Name": "baozi",
  "Seiten": [
  „Seiten/Roubaozi/Roubaozi“
  ]
 }
 ],
}

Auf der offiziellen Website wird dieses Unterpaket recht einfach beschrieben, aber so habe ich es verstanden, als ich es verwendet habe.

Root ist der Pfad, der unterpaketiert werden soll. Ich habe es in das Stammverzeichnis gelegt. Dann werden alle Dateien unter baoziTask als Paket betrachtet. Alle Dateien, die sich nicht im BaoziTask-Pfad befinden, werden in das Hauptpaket der App gepackt.

Name ist der Alias ​​des Unterpakets, das beim Vorab-Download verwendet wird. Dieser Vorab-Download bedeutet, dass Sie, wenn Sie sich auf einer bestimmten Seite befinden, das Unterpaket aktiv herunterladen möchten, das zur Erhöhung der Zugriffsgeschwindigkeit verwendet werden kann. Wenn ich beispielsweise eine bestimmte Seite betrete, klicke ich höchstwahrscheinlich irgendwo hin, um zu einem bestimmten Unterpaket zu springen. Zu diesem Zeitpunkt kann ich dieses Unterpaket vorab herunterladen, anstatt es beim Springen herunterzuladen.

„Unabhängig“ bezieht sich darauf, ob der Unterauftrag unabhängig ist. Ich habe es aber nie verwendet und habe daher kein intuitives Gefühl dafür. Es wird gesagt, dass es unabhängig ausgeführt werden kann und nicht vom Hauptpaket der App abhängig ist. Dies erfordert eine Konfiguration, keinen Code-Download, sondern eine Konfiguration von preloadRule. Weitere Einzelheiten müssen Sie auf der offiziellen Website nachlesen und selbst ausprobieren. Portal---Unterpaket-Vorabdownload

„Seiten“ ist einfacher zu verstehen, es handelt sich dabei um die Seiten innerhalb des Pakets.

Wenn Sie zu den Seiten in diesen Unterpaketen springen möchten, schreiben Sie einfach den richtigen Pfad für die Sprung-URL. Wenn Sie beispielsweise zu roubaozi springen, wird die URL wie folgt geschrieben:

URL: „/baoziTask/Seiten/roubaozi/roubaozi“

Wie kann überprüft werden, ob die Untervergabe erfolgreich ist?

In der oberen rechten Ecke des Entwicklertools befindet sich eine Schaltfläche mit Details. Klicken Sie darauf, um die Details anzuzeigen, und schieben Sie sie nach unten. Sie können die Zeile „Lokaler Code“ sehen. Sie können auf die Größe dahinter klicken, um die Größe des Hauptpakets und jedes Unterpakets anzuzeigen. Wenn Sie sehen, dass das Hauptpaket 2 MiB nicht überschreitet, war der Upload erfolgreich!

Crowd: Warum fügst du zwischen KB und MB ein i hinzu? Xiaotsuojiao: Denn um es genau auszudrücken, es ist 1024

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Echarts und Subunternehmern in WeChat Mini-Programmen. Weitere relevante Inhalte zu WeChat Mini-Programmen, Echarts und Subunternehmern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!