Comment utiliser ECharts dans webpack ?

Cet article présente principalement l'exemple de code d'utilisation d'ECharts dans webpack. Les amis qui en ont besoin peuvent s'y référer

Webpack est actuellement un outil d'empaquetage de modules populaire. Vous pouvez facilement l'utiliser dans des projets utilisant webpack. et l'empaquetage d'ECharts, il est supposé que vous avez déjà une certaine compréhension de webpack et que vous l'utilisez dans vos propres projets.

npm install ECharts

Avant la version 3.1.1, le package ECharts sur npm était officieusement maintenu, à partir de 3.1.1 L'EFE officiel maintient packages pour ECharts et zrender sur npm.

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_modules. Vous pouvez directement require('echarts') dans le code du projet pour obtenir des 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]
  }]
});

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le chargement post-clic de régions à cinq niveaux à travers le pays dans le plug-in d'arborescence zTree

Utilisation de async&await dans Koa2 Lesquels existe-t-il ?

Comment empaqueter des ressources statiques dans vue

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!