Echarts引入方式


1、模块化单文件引入



2、传统的标签式引入

如果使用requiejs太麻烦,可使用标签式引入。

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

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

  • echarts-plain.js : 经过压缩,包含除地图外的全部图表
  • echarts-plain-original.js : 未压缩,可用于调试,包含除地图外的全部图表
  • echarts-plain-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
  • echarts-plain-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据

这几个文件都在下载的压缩包的build文件下。

在\echarts-1.4.1\doc\example\www2下,是这种引入方式的示例文件。


ECharts是一款非常流行的可视化库,可以用来制作各种图表。ECharts有多种使用方式,其中之一就是本地引入方式。这种方式可以让用户将ECharts的源代码下载到本地,然后在自己的项目中引用。 ECharts的本地引入方式非常简单。首先,我们需要从官网下载ECharts的源代码包。下载完成后,解压文件,可以看到一个dist文件夹。这个文件夹中包含了ECharts的核心代码和各种插件。 接下来,我们要在项目中引用ECharts。假设我们的项目中有一个名为index.html的文件,我们可以在它的头部添加以下代码: ``` <script src="path/to/echarts.js"></script> ``` 其中,"path/to/echarts.js"是ECharts的源代码所在路径。如果我们将ECharts的源代码放在项目的根目录下,那么这个路径就可以写成: ``` <script src="echarts-4.9.0/dist/echarts.js"></script> ``` 这样,我们就成功地将ECharts引入到了项目中。接下来,我们就可以像使用其他JavaScript库一样使用ECharts了。例如,我们可以在index.html文件中添加以下代码: ``` <div id="chart" style="width: 600px;height:400px;"></div> <script> var chart = echarts.init(document.getElementById('chart')); // 在这里配置图表 chart.setOption({...}); </script> ``` 这样,我们就可以在网页中展示一个ECharts图表了。 总之,ECharts的本地引入方式非常简单。只需要下载ECharts的源代码,并在项目中引用即可。通过这种方式,我们可以更加灵活地使用ECharts,并且可以定制化地修改代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值