echarts标签式单文件引入

标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于 CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉 require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

  1.  
    //from echarts example
  2.  
    <body>
  3.  
    <div id="main" style="height:400px;"></div>
  4.  
    ...
  5.  
    <script src="example/www2/js/dist/echarts-all.js"></script>
  6.  
    <script>
  7.  
    var myChart = echarts.init(document.getElementById('main'));
  8.  
    var option = {
  9.  
    ...
  10.  
    }
  11.  
    myChart.setOption(option);
  12.  
    </script>
  13.  
    </body>

可以直接引入的单文件如下：

  • dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
  • source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试

详见入门教程 ( Getting started ) »

自定义构建echarts单文件

详见 echarts-optimizer 安装使用说明：README.md

初始化

通过require获得echarts接口（或者命名空间）后可实例化图表，echarts接口仅有一个 方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实 现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例（1.4.0+）。init方法说明如下：

名称参数描述
{ECharts} init {dom} dom, 
{string | Object =}theme		 初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（'macarons', 'infographic'）直接传入名称，自定义扩展主题可传入主题对象。如： 
var myCharts = echarts.init(document.getElementById('main'), 'macarons')；

图表实例可用方法见方法

引入ECharts后的的初始化代码如下：

  1.  
    // 作为入口
  2.  
    require(
  3.  
    [
  4.  
    'echarts',
  5.  
    'echarts/chart/pie'
  6.  
    ],
  7.  
    function (ec) {
  8.  
    var myChart = ec.init(document.getElementById('main'));
  9.  
    myChart.setOption({...});
  10.  
    }
  11.  
    );
  12.  
     
  13.  
    // -----------------------------
  14.  
     
  15.  
    // 非入口或再次使用，图表已被加载注册
  16.  
    require('echarts').init(dom).setOption({...});
  17.  
     
  18.  
    // 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
  19.  
    var myChart = require('echarts').init(dom);
  20.  
    myChart.setOption({...});

熟悉模块化的你可以跳过了下面代码了

    1.  
      // 不习惯模块化的你当然可以
    2.  
      var echarts;
    3.  
      require(['echarts'], function (ec){
    4.  
      echarts = ec;
    5.  
      });
    6.  
      // 是的，把echarts加载后保存起来作为命名空间使用
posted @ 2022-02-10 23:13  stdxxd  阅读(187)  评论(0)    收藏  举报