echarts学习心得1---模块化单文件引入和标签式单文件引入
一、模块化单文件引入
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---模块化单文件引入和标签式单文件引入的更多相关文章
- 关于echarts的使用----模块化单文件引入（推荐） 与标签式单文件引入
官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts3 关于模块化单文件引入(推荐) 与标签式单文件引入
- Java中的懒汉式单例与饿汉式单例实例详解
懒汉式单例:线程非安全,当被调用的时候才创建实例,效率较高 public class LazySingleton { private static LazySingleton lazySingleto ...
- Spring的单例实现原理-登记式单例
单例模式有饿汉模式.懒汉模式.静态内部类.枚举等方式实现,但由于以上模式的构造方法是私有的,不可继承,Spring为实现单例类可继承,使用的是单例注册表的方式(登记式单例). 什么是单例注册表呢, 登 ...
- ECharts学习总结(二):标签式单文件引入echarts的方法
下载好echarts的库文件.然后在script里面引入. //from echarts example <body> <div id="main" style= ...
- Echarts学习总结（一）-----柱状图
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...
- ECharts学习总结（三）-----基本概念分析
最近一直在看ECharts相关的内容,进展却不怎么理想,特认真总结如下基础知识: 1) ECharts总体框架和其中各个部分:图类.组件.接口.基础库的具有应用方法和应该把握的细节,并通过实际的例子熟 ...
- JSP自定义标签（标签处理器 tld文件）
标签的形式如下,标签处理器就是处理JSP页面中的标签的属性和内容,定义好之后就跟使用JSTL一样 <标签名 属性名="属性值" 属性名="属性值"> ...
- sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height，完全去掉！！
在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...
- Java面试 - 什么是单例设计模式，为什么要使用单例设计模式，如何实现单例设计模式(饿汉式和懒汉式)？
什么是单例设计模式? 单例设计模式就是一种控制实例化对象个数的设计模式. 为什么要使用单例设计模式? 使用单例设计模式可以节省内存空间,提高性能.因为很多情况下,有些类是不需要重复产生对象的. 如果重 ...
随机推荐
- Form表单——例子
Form Form的验证思路 前端:form表单 后台:创建form类,当请求到来时,先匹配,匹配出正确和错误信息. Django的Form验证实例: 创建project,进行基础配置文件配置 STA ...
- WebService或HTTP服务端接收请求转发消息到另一个服务端-实现思路
1.需求结构(WebService) A客户端<->B服务端<->C服务端 说明: a.在B服务端上面添加配置项(1.是否转发消息到C服务端:2.C服务端IP和端口): b.A ...
- spark mysql读写
val data2Mysql2 = (iterator: Iterator[(String, Int)]) => { var conn: Connection = null; var ps: P ...
- .NET Standard - 揭秘 .NET Core 和 .NET Standard[转自MSDN]
作为 .NET 系列的最新成员,.NET Core 和 .NET Standard 的概念及其与 .NET Framework 的区别并不十分明确.在本文中,我将准确介绍每个产品及其适用场景. 在详细 ...
- gdb 初步学习记录
客户有一段代码,一个死循环, 里面就一个 times(NULL) 函数,以及一个usleep, 运行了10分钟左右就会出现段错误. 现在用 gdb 调试看一下是哪一步出现了问题. 在Linux 虚拟机 ...
- ftok函数例子
#include <stdio.h>#include <sys/types.h>#include <sys/ipc.h>int main( void ){ int ...
- OSX监听全局键盘按下事件并捕获事件源的硬件接口位置
在OSX系统全局监听键盘的按下事件,并可以捕获事件源的硬件的接口位置,用于区分是哪个键盘产生的事件.下面的代码只是以键盘为例子,其实是可以适用于其他输入外设的.如有需要可搜索相关外设的匹配字典的创建代 ...
- Java的图形界面依然是跨平台的
Awt:抽象窗口工具箱,它由三部分组成: ①组件:界面元素: ②容器:装载组件的容器(例如窗体): ③布局管理器:负责决定容器中组件的摆放位置. 图形界面的应用分四步: ① 选择一个容器: ⑴wind ...
- 10个网页设计师必备的CSS技巧（转）
英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...
- 【BZOJ】1034: [ZJOI2008]泡泡堂BNB（贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=1034 弱的比弱的强就用,强的比强的强就用: 否则弱的和强的比. 输的情况就是2n-ans(b,a), ...