Using Echarts_webpack in Webpack

Http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

Webpack is a popular modular packaging tool that you can easily introduce and package echarts with Webpack projects, assuming you have a certain understanding of webpack and use in your own projects. NPM installation Echarts

Prior to version 3.1.1, Echarts's package on NPM was unofficially maintained, starting with the 3.1.1 of official EFE to maintain the echarts and Zrender of NPM.

You can install Echarts via NPM using the following command

NPM Install Echarts--save

Introduction of Echarts

Echarts and Zrender installed via NPM will be placed in the Node_modules directory. You can get echarts directly in the project code require (' Echarts ').

var echarts = require (' echarts ');

Initializes the Echarts instance
var MyChart = echarts.init (document.getElementById (' main '), based on the prepared DOM;
Draw Chart
mychart.setoption {
    title: {text: ' Echarts Getting Started sample '},
    tooltip: {},
    Xaxis: {
        data: [Shirt, sweater "," chiffon shirt "," trousers "," heels "," socks "]
    },
    YAxis: {},
    series: [{
        name: ' Sales ',
        type: ' Bar ',
        data: [5, 20, , ten, A]}
);

Introduce echarts charts and components on demand

The default use of require (' echarts ') is the Echarts package that has loaded all the charts and components, so the volume is larger, and if the volume requirements are more stringent in the project, the required modules can be introduced only on demand.

For example, the above example code uses only the histogram, the Cue box and the header component, so when introduced, it is only necessary to introduce these modules, can effectively reduce the size of the package from more than 400 KB to more than 170 KB.

Introducing Echarts Main module
var echarts = require (' echarts/lib/echarts ');
Introduction of columnar graph
require (' Echarts/lib/chart/bar ');
Introduce the Cue box and caption component
require (' Echarts/lib/component/tooltip ');
Require (' Echarts/lib/component/title ');

Initializes the Echarts instance
var MyChart = echarts.init (document.getElementById (' main '), based on the prepared DOM;
Draw Chart
mychart.setoption {
    title: {text: ' Echarts Getting Started sample '},
    tooltip: {},
    Xaxis: {
        data: [Shirt] "Woolen Sweater", "chiffon shirt", "trousers", "high Heels", "socks"]
    },
    YAxis: {},
    series: [{
        name: ' Sales ',
        type: ' Bar ',
        data: [5, A, N, a]}
    ]
;

A list of modules that can be introduced on demand see Https://github.com/ecomfe/echarts/blob/master/index.js

The same is true for another popular modular packaging tool, browserify.

In addition, these are all configured, but there is a legend label always does not come out, multiple checks do not know where the problem is, but also compared to the official website examples, and finally did not introduce legend formation,

Add this to the Require (' echarts/lib/component/legend ');