标签:
一、模块化单文件引入
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---模块化单文件引入和标签式单文件引入
标签:
原文地址:http://www.cnblogs.com/qiutianlaile/p/4892489.html