Java教程

20

本文主要是介绍20，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

标签式单文件引入

自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加载后保存起来作为命名空间使用
这篇关于20的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航