Afin d'être compatible avec le mini-programme Canvas, Apache ECharts fournit un composant du mini-programme. De cette manière, ECharts peut être utilisé facilement.
Instructions
1. Télécharger
Téléchargez le répertoire du projet echarts-for-weixin. Il s'agit d'un projet d'applet WeChat écrit qui peut être directement importé dans le compilateur d'applet WeChat pour interroger tous les effets de graphique.
Parmi eux, ec-canvas est le composant fourni et les autres fichiers sont des exemples d'utilisation du composant.
Il existe un echarts.js dans le répertoire ec-canvas, qui sera remplacé par la dernière version d'ECharts à chaque fois que le projet echarts-for-weixin sera publié par défaut. Si nécessaire, vous pouvez télécharger vous-même la dernière version du projet ECharts ou personnaliser la version à partir du site officiel pour réduire la taille du fichier.
2. Importer
Après avoir créé le projet, vous pouvez remplacer complètement le projet echarts-for-weixin téléchargé par le nouveau projet, puis modifier le code ; ou simplement copier le répertoire ec-canvas dans le nouveau projet, puis effectuer les ajustements correspondants.
Si vous adoptez une méthode de remplacement complète, vous devez remplacer l'appid dans project.config.json par l'identifiant du projet demandé sur la plateforme publique. Chaque dossier du répertoire pages est une page. Les pages inutiles peuvent être supprimées selon la situation, et les pages correspondantes peuvent être supprimées dans app.json.
Si vous copiez uniquement le répertoire ec-canvas, vous pouvez vous référer aux méthodes d'écriture de plusieurs fichiers dans le répertoire pages/bar. Ci-dessous, nous l'expliquons en détail.
3. Créez des graphiques
3.1 Introduction à la génération de graphiques js
import * as echarts from '../../ec-canvas/echarts';
3.2 Présentation des composants echarts personnalisés
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
Le but de cette configuration est de nous permettre d'utiliser des composants en wxml. Notez que la position relative du chemin doit être écrite correctement. Si la structure des répertoires est la même que dans cet exemple, elle doit être configurée comme ci-dessus.
3.3 Créer un composant de graphiques électroniques
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
{ ec }}"></ec-canvas>
</view>
Faites attention au .container ici. Après avoir créé un nouveau projet d'applet, la classe générée automatiquement par défaut dans app.wxss peut être incohérente avec celle de cette démo, ce qui fait que le graphique ne s'affiche pas normalement et est uniquement vide. Veuillez vous référer à app.wxss pour modifier le style afin de garantir que le graphique a une largeur et une hauteur une fois initialisé.
Où ec est un objet que nous définissons dans index.js, qui permet d'initialiser et de définir le graphique après le chargement de la page.
3.4 Initialiser le graphique
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
Ceci est commun à tous les graphiques ECharts. Les utilisateurs n'ont qu'à modifier le contenu de l'option ci-dessus pour changer le graphique.
4. Questions fréquemment posées
Comment obtenir une instance de graphique ?
Ce que renvoie echarts.init est l'instance de graphique. Vous pouvez vous référer à la méthode d'écriture de pages/bar/index.js.
Comment charger des graphiques paresseusement ?
Voir pages/lazyLoad pour des exemples où vous pouvez initialiser les données après les avoir récupérées.
Comment charger plusieurs graphiques sur une seule page ?
Voir pages/multiCharts pour des exemples.
Comment utiliser l'info-bulle ?
Actuellement, ce projet prend en charge ECharts Tooltip, mais comme les fonctions associées d'ECharts n'ont pas encore été publiées, vous devez utiliser ec-canvas/echarts.js dans le projet actuel. Ce fichier contient le code pertinent qui peut utiliser Tooltip dans WeChat. Actuellement, le fichier echarts.js téléchargé depuis le site officiel d'ECharts ne peut pas être directement remplacé et utilisé jusqu'à la sortie officielle d'ECharts.
La méthode d'utilisation spécifique est la même que celle des ECharts. Pour des exemples, voir pages/line/index.js.
Un bug connu est que les info-bulles de certains graphiques s'affichent
à la place des sauts de ligne. Ce problème sera résolu à l'avenir. Lorsqu'ils rencontrent temporairement ce problème, les développeurs peuvent utiliser \n comme nouvelle ligne dans le formateur.
Comment enregistrer comme image ?
Voir pages/saveCanvas pour un exemple.
Que dois-je faire si le fichier est trop volumineux ?
Le fichier ECharts fourni par ce projet par défaut est la dernière version contenant tous les fichiers de composants. Vous pouvez télécharger différentes versions d'ECharts pour les remplacer. Il est recommandé d'utiliser la version non compressée lors du débogage et la version compressée lors de la publication, sinon le fichier sera trop volumineux pour être publié.
Lors de la publication, si vous avez des exigences de taille de fichier plus élevées, vous pouvez télécharger un package contenant uniquement les composants nécessaires sur la page Web de personnalisation en ligne d'ECharts et choisir la compression.
Le fichier téléchargé est placé dans ec-canvas/echarts.js. Notez qu'il doit être renommé en echarts.js.
De plus, vous pouvez également envisager d’utiliser la stratégie de sous-traitance des mini programmes WeChat