365bet官网注册开户

关于将ECharts引入至项目中的几种方式

关于将ECharts引入至项目中的几种方式

方式一:模块化包引入

如果你的项目本身就是模块化的,那引入echarts将很简单,只需要配置好packet路径指向src即可,而且你还可以实现图表的按需加载,由于echarts依赖底层zrender,建议你同时下载zrender到本地,可参考demo,你需要配置如下。

需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中很基本也是很重要的规则,务必在上线时做文件的连接压缩,实例代码如下所示:

//from echarts example

require.config({

packages: [

{

name: 'echarts',

location: '../../src',

main: 'echarts'

},

{

name: 'zrender',

location: '../../../zrender/src', // zrender与echarts在同一级目录

main: 'zrender'

}

]

});

例子:

echarts3模块化包引入源码方法

Echarts3模块化包引入源码-入门

123

题外话

方式二:模块化单文件引入(推荐)

我们建议你使用单一文件引入,如你所发现的,build文件夹下已经生成了多个单文件见下,根据你的需求使用:

1、echarts.js : 经过压缩,包含除地图外的全部图表

2、echarts-original.js : 未压缩,可用于调试,包含除地图外的全部图表

3、echarts-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据

4、echarts-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据

如果需要更加定制的打包文件,建议在node环境下安装require.js,build文件夹内为你准备好配置项,可根据你的项目需求,修改config-tpl.js以构建你的最佳配置。

采用单一文件使用例子见ECharts单一文件引入,存放在example/www下,你需要配置如下:

//from echarts example

require.config({

paths:{

'echarts:'./js/echarts',

'echarts/chart/bar' : './js/echarts', // 把所需图表指向单文件

'echarts/chart/line': './js/echarts'

}

});

//from echarts example

require(

[

'echarts',

'echarts/chart/line', // 按需加载所需图表

'echarts/chart/bar'

],

function (ec) {

var myChart = ec.init(domMain);

var option = {

...

}

myChart.setOption(option);

}

);

总结来说,模块化如何引入ECharts,你都需要如下4步:

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

2、为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)

3、为模块加载器配置echarts的路径,从当前页面链接到echarts.js,见上述说明

4、动态加载echarts然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)

方式三:标签式单文件引入

自1.3.5开始,ECharts提供标签式引入。如果你 的项目本身并不是基于模块化开发的,或者是基于CMD规范(如使用的是seajs),那么引入基于AMD模块化的echarts可能并不方便,我们建议你 采用srcipt标签式引入,忘掉require,srcipt标签引入echarts后将可以直接使用两个全局的命名空 间:echarts,zrender,可参考ECharts标签式引入

//from echarts example

< script src="example/www2/js/echarts-plain.js" data-ke-src="example/www2/js/echarts-plain.js" > < /script>

< script >

var myChart = echarts.init(domMain);

var option = {

...

}

myChart.setOption(option);

< /script>

可以直接引入的单文件如下:

1、echarts-plain.js : 经过压缩,包含除地图外的全部图表

2、echarts-plain-original.js : 未压缩,可用于调试,包含除地图外的全部图表

3、echarts-plain-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据

4、echarts-plain-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据

相关推荐