欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项

程序员文章站 2022-06-01 23:37:18
...

一、相关js文件的引入

这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js。

<script src="js/esl.js" type="text/javascript"></script>
<script src="js/echarts.js" type="text/javascript"></script>

二、ECharts对象的初始化

通过文件esl.js内封装好的require获得echarts接口后可实例化图表,echarts接口仅有一个方法init,执行init时传入一个具备大小(如果没有指定容器的大小将会按照0大小来处理即无法看到图表)的dom节点(width、height可被计算得到即可,不一定可见)后即可实例化出图表对象,图表库实现为多实例的,同一页面可多次init出多个图表。图表实例可用方法见方法,引入ECharts后的的初始化代码如下:

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
            
    
    博客分类: eCharts echartsjavasctipt图表 
// 作为入口
require(
    [
        'echarts',
        'echarts/chart/pie'
    ], 
    //回调函数内执行图表对象的初始化
    function(ec) {
        var myChart = ec.init(document.getElementById('main'));
        myChart.setOption({...});
    }
);

// -----------------------------

// 非入口或再次使用,图表已被加载注册
require('echarts').init(dom).setOption({...});

// 如果需要再次使用ECharts的图表实例,建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...}); 
ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
            
    
    博客分类: eCharts echartsjavasctipt图表 

如果你不习惯于模块化你也可以这样进行初始化:

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
            
    
    博客分类: eCharts echartsjavasctipt图表 
//定义一个全局的图表对象
var ECharts;
require(['echarts'], function(ec){
    //将对象保存下来
    ECharts = ec;
});
// 是的,把echarts加载后保存起来作为命名空间使用

//-----------
//接下来我们就可以进行图表的init操作了
var myChart = ECharts.init(dom);

myChart.setOption({....});
ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
            
    
    博客分类: eCharts echartsjavasctipt图表 

init方法说明如下:

 

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

 

注意事项:

1、再实例化之前请确保相关的js文件已经引入且路径正确;

2、在执行图表对象渲染方法init(dom)的时候,记住这里的dom是一个页面容器元素的对象,请确保这个元素对象是存在的,否则执行了init(dom)方法时会报出尚未定义的错误;

3、dom元素一定要指定其大小,关于元素的大小我么可以通过css进行设置:

<div id="main" style="width:400px;height:300px;"></div>

也可以采用动态的javascript代码设置其大小属性值。