echarts.js源码 初始化函数init()解读
Posted ITseahorseL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts.js源码 初始化函数init()解读相关的知识，希望对你有一定的参考价值。
1.源代码init()函数
export function init(dom, theme, opts)
if (__DEV__)
// Check version
if ((zrender.version.replace('.', '') - 0) < (dependencies.zrender.replace('.', '') - 0))
throw new Error(
'zrender/src ' + zrender.version
+ ' is too old for ECharts ' + version
+ '. Current version need ZRender '
+ dependencies.zrender + '+'
);
if (!dom)
throw new Error('Initialize failed: invalid dom.');
// 判断该DOM结构是否已经存在绑定的echarts实例
var existInstance = getInstanceByDom(dom);
if (existInstance)
if (__DEV__)
console.warn('There is a chart instance already initialized on the dom.');
return existInstance;
// 需要DOM结构设定特定的width以及height值
if (__DEV__)
if (zrUtil.isDom(dom)
&& dom.nodeName.toUpperCase() !== 'CANVAS'
&& (
(!dom.clientWidth && (!opts || opts.width == null))
|| (!dom.clientHeight && (!opts || opts.height == null))
)
)
console.warn('Can\\'t get dom width or height');
// 新建Echarts实例
var chart = new ECharts(dom, theme, opts);
chart.id = 'ec_' + idBase++;
instances[chart.id] = chart;
modelUtil.setAttribute(dom, DOM_ATTRIBUTE_KEY, chart.id);
enableConnect(chart);
return chart;
2.带有自己学习每行注释的代码
export function init(dom, theme, opts)
if (__DEV__)
/*1.__DEV__ 是开发阶段的产物
2.__DEV__ 在编译阶段，将会根据当前运行环境将其变换成 常量
3.通过 process.env.NODE_ENV 来区分不同模式，应该是 web 前端开发中的一种约定了吧
4.<script> 标签，通过文件名 .js和 .min.js 区分生产环境和开发环境
5.webpack 引入了一个简单的 mode 配置项，用于更快捷的区分环境
6.npm包，在发布之前，一般会经过 __DEV__ 替换成 process.env.NODE_ENV !== 'production' 的操作。（怪不得没搜到）
7.在一些包中，会拆分成两套 js ，一套生产模式，一套开发模式
作者：anddju
链接：https://www.jianshu.com/p/b12a1dedf30e
*/
// Check version 检查zrender的版本
//使用replace()函数将zrender的版本（如2.0）中的“.”换成''然后减去0得到一个数字看是否小于依赖zrender的版本数字
if ((zrender.version.replace('.', '') - 0) < (dependencies.zrender.replace('.', '') - 0))
throw new Error(
//如果小于抛出错误 提示版本太老 需要Echarts依赖的新版本
'zrender/src ' + zrender.version
+ ' is too old for ECharts ' + version
+ '. Current version need ZRender '
+ dependencies.zrender + '+'
);
if (!dom)
//如果传入的dom不是DOM结构的元素则抛出非法DOM结构的错误提示
throw new Error('Initialize failed: invalid dom.');
// 判断该DOM结构是否已经存在绑定的echarts实例
var existInstance = getInstanceByDom(dom);
if (existInstance)
if (__DEV__)
console.warn('There is a chart instance already initialized on the dom.');
return existInstance;
// 需要DOM结构设定特定的width以及height值
if (__DEV__)
//1.先判断传入的对象是否为DOM结构
//2.结构的节点名字是否是CANVAS
//3.最后判断dom节点的宽度和高度是否为0
//如果传入对象既不是DOM结构，或者节点名为CANVAS或者节点的高度和和长度其中一个为0或者全为0则判断结果成立
if (
zrUtil.isDom(dom)
&& dom.nodeName.toUpperCase() !== 'CANVAS'
&& (
(!dom.clientWidth && (!opts || opts.width == null))
|| (!dom.clientHeight && (!opts || opts.height == null))
)
)
//输出提示不能得到节点的宽度和高度
console.warn('Can\\'t get dom width or height');
// 新建Echarts实例
var chart = new ECharts(dom, theme, opts);
chart.id = 'ec_' + idBase++;
instances[chart.id] = chart;
modelUtil.setAttribute(dom, DOM_ATTRIBUTE_KEY, chart.id);
enableConnect(chart);
return chart;
3.真实示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option =
title:
text: 'ECharts 入门示例'
,
tooltip: ,
legend:
//图例
data: ['销量']
,
xAxis:
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
,
yAxis: ,
series: [
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
]
;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main’));
这句话就是示例，传入名为main的dom盒子结构，然后进行绘制。
ps：友情学习链接
http://qiuruolin.cn/2019/05/21/echarts-2/
以上是关于echarts.js源码 初始化函数init()解读的主要内容，如果未能解决你的问题，请参考以下文章
交互API（echarts对象和echartsInstance对象）