Wie verwende ich ECharts im Webpack?

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von ECharts im Webpack vorgestellt.

Webpack ist derzeit ein beliebtes Modul-Paketierungstool. Sie können es problemlos in Projekten verwenden Beim Verpacken und Verpacken von ECharts wird davon ausgegangen, dass Sie bereits über ein gewisses Verständnis von Webpack verfügen und es in Ihren eigenen Projekten verwenden.

npm install ECharts

Vor Version 3.1.1 wurde das ECharts-Paket auf npm inoffiziell gepflegt, ab 3.1.1 wird es offiziell von EFE gepflegt Pakete für ECharts und zrender auf npm.

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

npm install echarts --save

ECharts vorstellen

ECharts und Zrender werden über npm installiert Es wird im Verzeichnis node_modules abgelegt. Sie können „echarts“ direkt im Projektcode anfordern, um ECharts zu erhalten.

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]
  }]
});

ECharts-Diagramme und -Komponenten bei Bedarf einführen

Standardmäßig wird require('echarts') verwendet, um alle Diagramme und Komponenten zu laden . ECharts-Paket, daher ist das Volumen relativ groß. Wenn die Volumenanforderungen im Projekt streng sind, können Sie die erforderlichen Module nur 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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie das Post-Click-Laden von fünfstufigen Regionen im ganzen Land im zTree-Baum-Plug-in

Verwendung von async&await in Koa2 Welche gibt es?

So packen Sie statische Ressourcen in Vue

Das obige ist der detaillierte Inhalt vonWie verwende ich ECharts im Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!