Explication détaillée de l'utilisation d'ECharts dans Webpack

Cette fois, je vais vous apporter une explication détaillée de l'utilisation d'ECharts dans webpack. Quelles sont les précautions lors de l'utilisation d'ECharts dans webpack. Voici des cas pratiques, jetons un coup d'œil.

Webpack est actuellement un outil d'empaquetage de modules populaire. Vous pouvez facilement introduire et empaqueter des ECharts dans des projets à l'aide de webpack. On suppose que vous avez déjà une certaine compréhension de webpack et que vous l'utilisez dans vos propres projets.

npm Installer ECharts

Avant la version 3.1.1, le package ECharts sur npm n'était pas une maintenance officielle , les packages ECharts et zrender sur npm sont maintenus par l'EFE officiel à partir de la version 3.1.1.

Vous pouvez utiliser la commande suivante pour installer ECharts via npm

npm install echarts --save

Introduire ECharts

ECharts installés via npm et zrender sera placé dans le répertoire node_module. Vous pouvez obtenir des ECharts directement dans le code du projet en require('echarts').

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

Introduire les graphiques et composants ECharts à la demande

Par défaut, require('echarts') est utilisé pour charger tous les graphiques . et le package ECharts de composants, le volume sera donc relativement important si les exigences de volume sont strictes dans le projet, vous pouvez également introduire uniquement les modules requis selon vos besoins.

Par exemple, dans l'exemple de code ci-dessus, seuls les composants histogramme, boîte d'invite et titre sont utilisés, donc seuls ces modules doivent être introduits lors de leur introduction, ce qui peut réduire efficacement le volume emballé de plus de 400 Ko à plus de 170 Ko.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Le serveur obtient directement la progression du téléchargement du fichier

Comment créer une sous-séquence publique en JS

Explication détaillée de l'utilisation du composant NavigatorIOS

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!