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()解读的主要内容,如果未能解决你的问题,请参考以下文章

echarts.js源码 初始化函数init()解读

交互API(echarts对象和echartsInstance对象)

echarts js报错 Cannot read property 'getAttribute' of null

37-Vue之ECharts高级-交互API

37-Vue之ECharts高级-交互API

jsp页面中可以使用echarts吗