Detailed explanation of using ECharts in webpack

This time I will bring you a detailed explanation of using ECharts in webpack. What are the precautions when using ECharts in webpack? Here are practical cases, let’s take a look.

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

npm Installation ECharts

Before version 3.1.1, the ECharts package on npm was unofficial Maintenance, the ECharts and zrender packages on npm are maintained by the official EFE starting from 3.1.1.

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 get ECharts directly in the project code 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]
  }]
});

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The server directly obtains the file upload progress

How to make a public subsequence in JS

Detailed explanation of the use of NavigatorIOS component

The above is the detailed content of Detailed explanation of using ECharts in webpack. For more information, please follow other related articles on the PHP Chinese website!