How to use ECharts in webpack?

This article mainly introduces the example code of using ECharts in webpack. Friends who need it can refer to it

Webpack is currently a popular module packaging tool. You can easily use it in projects using webpack. Introducing and packaging ECharts, it is assumed that you already have a certain understanding of webpack and use it in your own projects.

npm Install ECharts

Before version 3.1.1, the package of ECharts on npm was unofficially maintained, starting from 3.1.1 The official EFE maintains packages for ECharts and zrender on npm.

You can use the following command to install ECharts through npm

npm install echarts --save

Introduce ECharts

Through ECharts and zrender installed on npm It will be placed in the node_modules directory. You can directly require('echarts') in the project code to get 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]
  }]
});

Introduce ECharts charts and components on demand

By default, use require('echarts') to get that all charts and components have been loaded ECharts package, so the volume will be relatively large. If the volume requirements are strict in the project, you can only introduce the required modules as needed.

For example, in the above sample code, only the histogram, prompt box and title components are used, so only these modules need to be introduced when introducing them, which can effectively reduce the packaged volume from more than 400 KB to Over 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]
  }]
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement click-to-load loading of five-level regions across the country in the zTree tree plug-in

Usage of async&await in Koa2 What?

How to package static resources in vue

The above is the detailed content of How to use ECharts in webpack?. For more information, please follow other related articles on the PHP Chinese website!