Detaillierte Erläuterung der Verwendung von ECharts im Webpack

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von ECharts im Webpack geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von ECharts im Webpack?

Webpack ist derzeit ein beliebtes Modulpaketierungstool. Mit Webpack können Sie ECharts problemlos in Projekte einführen und verpacken. Es wird davon ausgegangen, dass Sie bereits über ein gewisses Verständnis von Webpack verfügen und es in Ihren eigenen Projekten verwenden.

npm Installieren ECharts

Vor Version 3.1.1 war das ECharts-Paket auf npm eine inoffizielle Wartung , die ECharts- und zrender-Pakete auf npm werden ab 3.1.1 von der offiziellen EFE verwaltet.

Sie können den folgenden Befehl verwenden, um ECharts über npm zu installieren

npm install echarts --save

Einführen von ECharts

ECharts, die über npm installiert werden und zrender werden im Verzeichnis node_modules abgelegt. Sie können ECharts direkt im Projektcode über require('echarts') abrufen.

var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

Einführen von ECharts-Diagrammen und -Komponenten bei Bedarf

Standardmäßig wird require('echarts') verwendet, um alle Diagramme zu laden . und Komponente ECharts-Paket, daher ist das Volumen relativ groß. Wenn die Volumenanforderungen im Projekt streng sind, können Sie auch nur die erforderlichen Module nach Bedarf einführen.

Im obigen Beispielcode werden beispielsweise nur die Komponenten Histogramm, Eingabeaufforderungsfeld und Titel verwendet, sodass bei der Einführung nur diese Module eingeführt werden müssen, wodurch die Paketgröße effektiv von über 400 reduziert werden kann KB auf über 170 KB.

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Erhalten Sie den Datei-Upload-Fortschritt direkt vom Server

So erstellen Sie eine öffentliche Teilsequenz in JS

Detaillierte Erläuterung der Verwendung der NavigatorIOS-Komponente

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von ECharts im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!