Baidu ECharts知识梳理

Posted 2020-06-23 随风

从如何使用echart，接口，option和echart如何工作四个方面学习了echart。

如何使用：(模板项目)上周的10+微博用户可视化主要是模板项目

1.引入一个模块加载器，esl.js或者require.js

2.为ECharts准备一个具备大小宽高的Dom

3.为模块加载器配置echart的路径，连接到echarts.js定义所需图标路径。

require.config({

     path:{

        echarts:‘./js/echarts‘,

        ‘echarts/chart/bar‘:‘./js/echarts‘,

        ‘echarts/chart/line‘:‘./js/echarts‘

}});

4.动态加载echarts然后在回调函数中开始使用，不管是单文件还是包引入都需要显式按需加载图表。

require(

[

    ‘echarts‘,

    ‘echarts/chart/bar‘,

    ‘echarts/chart/line‘

],

function(ec){

var dom=document.getElementById(‘main‘);

var myChart=ec.init(dom);

var option={.....}  拷option当模板？

myChart.setOption(option);      })

(非模板项目)

1.直接script标签式引入

2.为ECharts准备一个具备大小宽高的Dom

3.echarts和zrender被写入为全局接口直接使用

var myChart=echarts.init(document.getElementById(‘main‘));

myChart.setOption({

       tooltip:{

        trigger:‘axis‘

        },

        legend:{

        data:[‘蒸发量‘,‘降水量‘]}

})，

4.拷option当模板

接口：

初始化(实例化)唯一接口方法：init

通过require获得echarts接口后可通过init方法实例化图表，执行init时传入一个具备大小的dom节点后即可实例化出图表对象，echarts实现为多实例的，同一页面可多次init出多个图表。