Wie man Echarts im WeChat-Miniprogramm verwendet und welche Fallstricke es gibt, kommen Sie und sammeln Sie es, um Blitze zu vermeiden! !

In diesem Artikel werden einige Verwendungsmethoden und Problemzusammenfassungen zur Verwendung von Echarts in WeChat-Miniprogrammen vorgestellt, damit Sie Fallstricke vermeiden können.

Wie man das WeChat-Miniprogramm verwendet und einige Fallstricke, ich hoffe, es kann Ihnen helfen

Echarts im WeChat-Miniprogramm verwenden

1. Laden Sie die Miniprogrammversion von echarts herunter

Download-Adresse: https://github.com/ecomfe/echarts-for-weixin

2. Verwendungsschritte

1. Projektabhängigkeiten einführen

Weitere WeChat-Applet-Versions-Echarts von Github Nach dem Abrufen Wenn Sie es herunterfahren, kopieren Sie die ec-canvas-Datei in Ihr eigenes Projekt. Es handelt sich tatsächlich um die Abhängigkeitsdatei der WeChat-Applet-Version von echarts.

【Verwandte Lernempfehlung: Mini-Tutorial zur Programmentwicklung】

2. Importieren Sie die Bibliothek

Fügen Sie Echarts mithilfe von Echarts in die JSON-Datei der Seite ein, und der importierte Pfad sollte entsprechend Ihren Anforderungen importiert werden Eigene Projektstruktur

Sie können es auch in die globale Konfigurationsdatei app.json einführen, sodass es für alle Seiten gleich ist und nicht einzeln eingeführt werden muss. Wenn mehrere Seiten Echarts verwenden, ist es mehr praktisch

Auf der Seite mit Echarts Importieren Sie Echarts in die js-Datei, und der importierte Pfad sollte entsprechend Ihrer eigenen Projektstruktur importiert werden

Verwendung

Verwenden Sie die Komponente in wxml können Sie sowohl die ID als auch die Canvas-ID selbst benennen. echarts.apache.org/zh/option.html#title

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

css code

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() {
  }
});

Vermeiden Sie Fallstricke und Unwetter

1. In Bezug auf das Problem der Einführung von Abhängigkeiten und Bibliotheken und deren Verwendung gemäß der offiziellen Verwendungsmethode, Das Echarts-Bild wird nicht angezeigt.

Lösung: Bei der Verwendung von Echarts in HTML müssen auch die Breite und Höhe des in der äußeren Ebene eingeschlossenen Ansichts-Tags festgelegt werden. (Der offizielle Methodenstil legt nicht die Breite und Höhe des äußeren Elements fest, kann jedoch im offiziellen Beispiel angezeigt werden, was viele Menschen in die Irre führt und in die Falle tappt.)

2. Über die Rolle von

devicePixelRatio

Ja, wenn Sie die anfängliche Erstellung von Echarts im offiziellen Code sehen, sieht der Code wie unten gezeigt aus. Nachdem Sie devicePixelRatio festgelegt haben, sind die in den WeChat-Entwicklertools angezeigten Echarts-Diagrammpixel bei der Vorschau auf einem Mobiltelefon sehr schlecht , es ist sehr klar. Wenn devicePixelRatio entfernt wird, werden die in den WeChat-Entwicklertools angezeigten Pixel des Echarts-Diagramms sehr klar, während die auf dem Mobiltelefon angezeigten Pixel schlechter werden. Daher sollte dies auf der Pixeleinheit von basieren das Gerät zum Anpassen der Pixel des Diagramms

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonWie man Echarts im WeChat-Miniprogramm verwendet und welche Fallstricke es gibt, kommen Sie und sammeln Sie es, um Blitze zu vermeiden! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!