webpack echarts配置实例

简介

本例介绍如何在webpack中构建依赖echats的项目，echarts有好几种方式引入项目：

标签单文件引入：自1.3.5开始，ECharts提供标签式引入。如果项目本身并不是基于模块化开发，建议采用srcipt标签式引入，Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender。

模块化单文件引入：ECharts开发了专门的压缩合并工具echarts-optimizer，通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载。在build路径下包含了由echarts-optimizer生成的单文件：

build/dist/：经过合并、压缩的单文件

echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入

chart/: echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载

echarts-line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）

echarts-bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）

echarts-scatter.js : 散点图

echarts-k.js : K线图

echarts-pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）

echarts-radar.js : 雷达图

echarts-map.js : 地图

echarts-force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）

echarts-chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）

echarts-funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）

echarts-gauge.js : 仪表盘

echarts-eventRiver.js : 事件河流图

source/ : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

模块化包引入：如果项目本身是模块话的且遵循AMD规范，则只需要使用一个符合AMD规范的模块加载器，如RequireJS，配置好package路径指向src即可。由于echarts依赖底层zrendar，也需要配置好相应的package。

配置

echarts既然支持模块化包引入，符合AMD规范，那么我们稍加配置下webpack，便可以引入到webpack构建的项目中了

webpack.config.js

module.exports = {
entry: './entry.js',
output: {
filename: 'bundle.js'
},
resolve: {
alias: {
echarts$: "echarts/src/echarts.js",
echarts: "echarts/src",
zrender$: "zrender/src/zrender.js",
zrender: "zrender/src"
}
}
}

entry.js

var echarts = require("echarts");
require('echarts/chart/line');
require('echarts/chart/bar');
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['蒸发量', '降水量']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
splitArea: {
show: true
}
}],
series: [{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
}, {
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

相关链接

webpack-echarts

Webpack #1407

webpack能加载echarts吗？

请原生支持webpack #1632

webpack集成echarts #1625

hushicai/echarts-develop