一、模块化单文件引入

　　1. 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）

　　　　<div id="main" style="height:400px;"></div>

　　2. 通过script标签引入echarts主文件

　　　　<script src="./js/echarts.js"></script>

　　3. 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明

 　　　　require.config({

            paths: {

                echarts: './js/dist'

            }

     　　});

　　4. 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

　　　　　　

require(

            [

                'echarts',

                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表

                'echarts/chart/bar'

            ],

            function (ec) {

                var myChart = ec.init(document.getElementById('main'));

                var option = {

                    ...

                }

                myChart.setOption(option);

            }

        );

二、标签式单文件引入

　　Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内：

　　

//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>

三、需要注意的地方

　　绑定事件：事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）

　　　　1. 模块化单文件引入

　　　　var ecConfig=require('echarts/config');

　　　　myChart.on(ecConfig.EVENT.CLICK,function(e){
　　　　//.....

　　　　});

　　　　2.标签式单文件引入

　　myChart.on(echarts.config.EVENT.CLICK, function(e){

　　　　//.....

　　});

　

echarts学习心得1---模块化单文件引入和标签式单文件引入的更多相关文章

  1. 关于echarts的使用----模块化单文件引入（推荐） 与标签式单文件引入

    官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts3 关于模块化单文件引入(推荐) 与标签式单文件引入

  2. Java中的懒汉式单例与饿汉式单例实例详解

    懒汉式单例:线程非安全,当被调用的时候才创建实例,效率较高 public class LazySingleton { private static LazySingleton lazySingleto ...

  3. Spring的单例实现原理-登记式单例

    单例模式有饿汉模式.懒汉模式.静态内部类.枚举等方式实现,但由于以上模式的构造方法是私有的,不可继承,Spring为实现单例类可继承,使用的是单例注册表的方式(登记式单例). 什么是单例注册表呢, 登 ...

  4. ECharts学习总结(二):标签式单文件引入echarts的方法

    下载好echarts的库文件.然后在script里面引入. //from echarts example <body> <div id="main" style= ...

  5. Echarts学习总结（一）-----柱状图

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...

  6. ECharts学习总结（三）-----基本概念分析

    最近一直在看ECharts相关的内容,进展却不怎么理想,特认真总结如下基础知识: 1) ECharts总体框架和其中各个部分:图类.组件.接口.基础库的具有应用方法和应该把握的细节,并通过实际的例子熟 ...

  7. JSP自定义标签（标签处理器 tld文件）

    标签的形式如下,标签处理器就是处理JSP页面中的标签的属性和内容,定义好之后就跟使用JSTL一样 <标签名 属性名="属性值" 属性名="属性值"> ...

  8. sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height，完全去掉！！

    在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...

  9. Java面试 - 什么是单例设计模式，为什么要使用单例设计模式，如何实现单例设计模式(饿汉式和懒汉式)？

    什么是单例设计模式? 单例设计模式就是一种控制实例化对象个数的设计模式. 为什么要使用单例设计模式? 使用单例设计模式可以节省内存空间,提高性能.因为很多情况下,有些类是不需要重复产生对象的. 如果重 ...

随机推荐

  1. Android Bitmap和Canvas学习笔记

    位图是我们开发中最常用的资源,毕竟一个漂亮的界面对用户是最有吸引力的. 1. 从资源中获取位图 可以使用BitmapDrawable或者BitmapFactory来获取资源中的位图. 当然,首先需要获 ...

  2. linux下编译 静态库、动态库，动态库依赖静态库

    xx.o : xx.h xx.cpp -lstdc++ -o xx.o -c xx.cpp -I ./ libxx.a : xx.o ar -crv libxx.a xx.o libTest.so : ...

  3. jquery 获取绑定事件

    在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: 1 $.data(domObj,'events');//或者$('selector').data('events') 而从1. ...

  4. URL与URI

    1.URI是统一资源标识符,是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作.URI由包括确定语法和相关协议的方案所定义.由是三个 ...

  5. CentOS下安装网卡驱动

    前言最近,一台机器从FreeBSD换为CentOS,一路安装顺利.完事之后发现,网卡没有启用,dmesg | grep eth 命令确定网卡没有驱动导致的.于是开始了一路艰辛的安装过程. 安装过程1. ...

  6. Hive入门笔记---2.hive函数大全

    Hive函数大全–完整版 现在虽然有很多SQL ON Hadoop的解决方案,像Spark SQL.Impala.Presto等等,但就目前来看,在基于Hadoop的大数据分析平台.数据仓库中,Hiv ...

  7. openvpn 移植之生成证书和私钥

    openvpn 是通过 openssl 的各种验证进行连接的,生成证书的过程可以在 Ubuntu 的环境下生成. 步骤如下: 一. 在Ubuntu下安装 openvpn // 这是在 Ubuntu 1 ...

  8. [Linux内核]软中断与硬中断

    转自:http://blog.csdn.net/zhangskd/article/details/21992933 本文主要内容:硬中断 / 软中断的原理和实现 内核版本:2.6.37 Author: ...

  9. Scala中集合类型与java中集合类型转换

    对于java中的集合元素并不能在scala中拿来就用的,需要进行相应的转换. 1. 转换规则如下 从下面可以看出,有些可以相互转换的,有些只能单向转换: scala.collection.Iterab ...

  10. git init 与 git init --bare 区别

    git init 与 git init --bare 区别 发现问题 最早是在公司的wiki上发现了这个命令,google后发现值得记录下来 实践中发现的区别 网上找了很多资料,但说的很乱,干脆在自己 ...