echar使用总结

最新推荐文章于 2024-03-04 11:40:42 发布

flybone7

最新推荐文章于 2024-03-04 11:40:42 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： echart

本文链接：https://blog.youkuaiyun.com/flybone7/article/details/104884520

echart 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何通过自定义工具库utils获取ECharts实例并渲染图表，包括无参获取及带参直接渲染的方法，同时提供了实例代码和定时刷新图表的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取echart实例

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

var utils = require('utils');

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);

});