Comment utiliser les echarts dans le mini programme WeChat et les pièges possibles, venez les récupérer pour éviter la foudre ! !

Cet article partagera avec vous quelques méthodes d'utilisation et résumés de problèmes liés à l'utilisation des echarts dans les mini-programmes WeChat, afin que vous puissiez éviter les pièges. J'espère qu'il pourra vous aider !

Comment utiliser le mini programme WeChat et quelques pièges, j'espère que cela pourra vous aider

Utiliser les echarts dans le mini programme WeChat

1. Téléchargez la version mini du programme echarts

Adresse de téléchargement : https://github.com/ecomfe/echarts-for-weixin

2. Étapes d'utilisation

1 Introduire les dépendances du projet

Plus d'echarts de la version de l'applet WeChat depuis github Après avoir extrait. vers le bas, copiez le fichier ec-canvas dans le fichier dans votre propre projet. Il s'agit en fait du fichier de dépendance de la version applet WeChat d'echarts.

【Recommandation d'apprentissage connexe : Tutoriel de développement de mini-programmes】

2. Importez la bibliothèque

Introduisez les echarts dans le fichier json de la page à l'aide d'echarts, et le chemin importé doit être importé en fonction de votre propre structure de projet

Vous pouvez également l'introduire dans le fichier de configuration global app.json, afin qu'il soit commun à toutes les pages, et il n'est pas nécessaire de l'introduire une par une lorsque plusieurs pages utilisent des echarts, c'est plus. pratique

Dans la page utilisant echarts Importez des echarts dans le fichier js, et le chemin importé doit être importé en fonction de votre propre structure de projet

Comment utiliser

Utilisez le composant dans wxml, id et canvas-id peuvent être nommés par vous-même

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

code js

Concernant la configuration des options, vous pouvez vous rendre sur le site officiel pour lire la documentation ou vous référer à l'exemple, https:// echarts.apache.org/zh/option.html#title

import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

function initChart(canvas, width, height, dpr) {
  //主要是这个 echarts 的创建
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  
  // option 的配置可以根据自己的需求去 echarts 官网查看配置的属性方法
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

css code

.container{
  width: 100%;
  height: 100vw;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

Éviter les pièges et le tonnerre

1 Concernant le problème de l'introduction des dépendances et des bibliothèques et de leur utilisation selon la méthode d'utilisation officielle, l'image des echarts ne s'affiche pas.

Solution : lors de l'utilisation d'echarts en HTML, la largeur et la hauteur de la balise de vue enveloppée dans la couche externe doivent également être définies. (Le style de la méthode officielle ne définit pas la largeur et la hauteur de l'élément extérieur, mais il peut être affiché dans l'exemple officiel, ce qui induit de nombreuses personnes en erreur et tombera dans le piège)

2. devicePixelRatio

Oui Lorsque vous voyez la création initiale des echarts dans le code officiel, le code est comme indiqué ci-dessous. Après avoir défini devicePixelRatio, les pixels du graphique echarts vus dans les outils de développement WeChat sont très médiocres lorsqu'ils sont prévisualisés sur un téléphone mobile. , c'est très clair. Oui, lorsque devicePixelRatio est supprimé, les pixels du graphique echarts vus dans les outils de développement WeChat deviennent très clairs, tandis que les pixels vus sur le téléphone mobile deviennent pires, cela devrait donc être basé sur l'unité de pixel de. l'appareil pour adapter les pixels du graphique.

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!