echarts2 的引入方式

echarts是一款不错的商业级数据图表，目前已更新到echarts3版本，但是由于历史原因，echarts2仍然有比较大的使用占比，之所以讲echarts2的引入方式是因为项目在混合使用echarts2与echarts3的时候遇到了一个问题，这个与我之前写过的一篇文章有关：http://blog.csdn.net/john1337/article/details/54947787，下面入主题。

echarts2有三种引入方式：

1.模块化包引入

如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});

2.模块化单文件引入（推荐）

如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。

自2.1.8起，echarts团队为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：

dist（文件夹） : 经过合并、压缩的单文件
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
scatter.js : 散点图
k.js : K线图
pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
radar.js : 雷达图
map.js : 地图
force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
gauge.js : 仪表盘
eventRiver.js : 事件河流图
treemap.js : 矩阵树图
venn.js : 韦恩图
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件

//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
</body>
在主文件引入后你将获得一个AMD环境，配置require.conifg如下：

//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
总结来说，模块化单文件引入ECharts，你需要如下4步：

为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

3.标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>
可以直接引入的单文件如下：

dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试

echarts3已经摒弃了方法2这种这种方式，下面就说说方法2这种方式的不好的地方，方法2的缺点就在于暴露出了“var define,require,esl;”这三个全局变量，但是现在有不少插件包括jquery都已经引入了umd规范：

   (function (root, factory) {if (typeof define === "function" && define.amd) {// AMDdefine(["jquery", "underscore"], factory);} else if (typeof exports === "object") {// Node, CommonJS之类的module.exports = factory(require("jquery"), require("underscore"));} else {// 浏览器全局变量(root 即 window)root.returnExports = factory(root.jQuery, root._);}}(this, function ($, _) {//    方法function a(){};    //    私有方法，因为它没被返回 (见下面)function b(){};    //    公共方法，因为被返回了function c(){};    //    公共方法，因为被返回了//    暴露公共方法return {b: b,c: c}}));

这样凡是在echarts2.js文件后引入的复合amd框架的代码将不能正常工作，所以虽然官网推荐这种方式，个人更喜欢推荐第三种方式。

echarts2 的引入方式相关推荐

前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
web前端（13）—— 了解JavaScript，JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分--javascript,学到后面你就知道它真的太重要了什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
05CSS的引入方式
1.CSS的三种样式表按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分成三大类: 内部样式表(嵌入式) 行内样式表(行内式) 外部样式表(链接式) 2.内部样式表内部样式表(内嵌样式 ...
11月8日学习内容整理：js的引入方式，变量数据类型，运算符，流程控制，函数...
js是一门成熟的编程语言,专门用浏览器客户端执行的语言一.js的引入方式 1.直接在body标签中使用script标签写js语言 2.通过script标签导入js文件,<script sr ...
python全栈开发 * 表格标签表单标签 css 引入方式 * 180807
html部分一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
006 CSS三种引入方式
CSS三种引入方式一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
day38 css的4种引入方式
<html lang="en"><head> <meta charset="UTF-8"> <title>Tit ...
CSS（一）引入方式选择器权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
对require四种引入方式的认识
对require四种引入方式的认识: 转载于:https://www.cnblogs.com/461770539-qq/p/9357485.html

echarts2 的引入方式

echarts2 的引入方式相关推荐

最新文章

热门文章