Detailed explanation of using ECharts in webpack

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

npm Install ECharts

Before 3.1.1, the packages of ECharts on npm were unofficially maintained, and the packages of ECharts and zrender on npm were 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

Introducing ECharts

ECharts and zrender installed on npm will be placed in the node_modules directory. ECharts can be obtained directly in the project code require('echarts') .

var echarts = require('echarts');
// Initialize the echarts instance based on the prepared domvar myChart = (('main'));
// Draw a chart({
  title: {
    text: 'Edit for ECharts'
  },
  tooltip: {},
  xAxis: {
    data: ['shirt', 'Cardwear', 'Chiffon shirt', 'Pants', 'High heel', 'sock']
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

Introducing ECharts charts and components on demand

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

For example, only the bar chart, prompt box and title components are used in the above example code. Therefore, only these modules are needed when introducing them, which can effectively reduce the packaged volume from more than 400 KB to more than 170 KB.

// Introduce the ECharts main modulevar echarts = require('echarts/lib/echarts');
// Introduce histogramrequire('echarts/lib/chart/bar');
// Introduce prompt box and title componentrequire('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// Initialize the echarts instance based on the prepared domvar myChart = (('main'));
// Draw a chart({
  title: {
    text: 'Edit for ECharts'
  },
  tooltip: {},
  xAxis: {
    data: ['shirt', 'Cardwear', 'Chiffon shirt', 'Pants', 'High heel', 'sock']
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

See the list of modules that can be introduced on demand/ecomfe/echarts/blob/master/

Summarize

The above is a detailed explanation of the examples of using ECharts in webpack introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!