webpack used ECharts

npm install ECharts

Introduced ECharts

By the npm installed ECharts and zrender will be placed under node_modules directory. May require direct project code ( 'echarts') obtained 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]
    }]
});

ECharts icon and the introduction of on-demand components

Default require ( 'echarts') obtained is already loaded ECharts charts and all components of the package, so the volume will be relatively large, if the volume of the project to more stringent requirements, may require only the introduction of modules as needed. For example, the sample code above uses only a histogram, and title element balloons, so when introduced only need to import the module, can effectively reduce the packing volume from the 400 KB large column  webpack ECharts used to more than 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]
    }]
});

List of modules can demand to see the introduction of https://github.com/ecomfe/echarts/blob/master/index.js