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){
　　　　//.....
　　});

　 

posted @ 2015-10-19 17:33  qiutianlaile  阅读(2379)  评论(0)  编辑  收藏  举报