你的位置:首页 > Java教程

[Java教程]echarts学习心得1


一、模块化单文件引入

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

    <div id="main" ></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" ></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){    //.....  });