echar使用总结

1、获取echart实例

在当前js文件中加载公共组件utils.js,该文件集成了常用的工具

var utils = require('utils');

1. utils中的方法集合：

getEcharts: ƒ ()
getEcharts3: ƒ ($elem, option, isNotEmpty)
getEcharts4: ƒ ($elem, option, isNotEmpty)

loadCompiledPage: ƒ (relativePath, req)
getPageFullPath: ƒ (relativePath, req)
loadCompiledPage2: ƒ (relativePath)
refreshButtonAuth: ƒ ()
getCurrentRoute: ƒ ()
setHeaderCount: ƒ (options)
miniMode: ƒ ()
getUserParams: ƒ ()
getConfig: ƒ (key)
switchModule: ƒ (moduleName)
goto: ƒ (path, blank)
go: ƒ (path, blank)
getPureRoute: ƒ (route)
doAjax: ƒ (url, params, method)
fetch: ƒ (options)
doSyncAjax: ƒ (url, params, method)
openModalDialog: ƒ (options)
warningDialog: ƒ (options)
dialog: ƒ (options)
window: ƒ (options)
i18n: ƒ (html)
getLangResource: ƒ ()
lang: ƒ ()
bhI18n: ƒ (str)
getCurrentResUrl: ƒ (name)

2.通过以下三个方法获得echart实例，其中第一个不带参获取，获取之后，再赋参渲染echart；后两个需要带参，调用方法之前先构造参数，调用时直接渲染成功。

• utils.getEcharts();//使用方法如下

• utils.getEchart().done(function(echart){ 
      //$dom为当前echart渲染所在的dom的jquery对象
      var currentEchart = echart.init($dom);
      var option={};
      //option为渲染echart的参数集合，事先构建好后使用
      //执行以下操作渲染出要的效果图
      currentEchart.setOption(option);
      ///
      渲染完后还可以执行其他操作，比如设置定时器，实时刷新echart图表：
      //setIntervalEvent();
      setInterval(function(){},time);
  });
  
  

  3.getEcharts3和getEcharts4的使用方法类似，不过echart4中的特性更丰富，比如rich属性

• utils.getEcharts3($elem, option, isNotEmpty);
• utils.getEcharts4: ($elem, option, isNotEmpty);

• var option ={};
  var $dom=$(id);
  utils.getEchats4($dom,option,true).then(function(echart){
      //这个函数在图表渲染完成后操作，
      //可设置定时器，或者将echart暴露给全局变量，供外部调用echart的方法
      G_echart = echart;
  });
  var instence = G_echart.getInstenceByDom($dom);
  instence.setOption(option);//设置新的option参数对图表进行刷新

  其他方法调用：

除了使用utils集成的方法，还可以直接在html中引入官网中下载的echars,js,然后使用；还可以直接使用require的方式自行加载使用：

//加载方法
require(['echarts'],function(ec){

    //$dom为当前ec渲染所在的dom的jquery对象
    var currentEchart = ec.init($dom);
    var option={};
    //option为渲染echart的参数集合，事先构建好后使用
    //执行以下操作渲染出要的效果图
    currentEchart.setOption(option);
    ///
    渲染完后还可以执行其他操作，比如设置定时器，实时刷新echart图表：
    //setIntervalEvent();
    setInterval(function(){},time);

});