ECharts3 怎么加载 china.js 地图

Posted 2023-04-24

参考技术A 百度API调用及echart库引入1.百度APIak申请：/apiconsole/auth，配额增加申请。配额增加当然，如果个人用户，没必要增加配额，一般不会超限制数。3.下载相关javascript库：jquery.min.js，require.js，echarts.js，这里我都已下载好，JQ用的是jQueryv1.10.2，require用的是RequireJS2.2.0，echart用的是echarts-2.2.7，引入如下：这里写图片描述其中第二个script标签里对应的需换成申请的ak，example2.js对应为echart效果。4.百度地图额外依赖库main.jsmain这里模块化的引入对应文件夹下echarts文件，main.js存放于下载的echarts源码中的extension\BMap\src路径下，同时需引入其他echarts2的图形控件，在build\dist\chart路径，在该路径下对应有：图形控件需要时再引入即可，若无需其他可视化扩展，可删除除map.js外的其他js文件。5.为实例化百度地图背景构建一个容器：实例化Margin设为0则与浏览器无边界融合，div属性容器id，后面js脚本里需要用到该属性，并将echart填充到该容器里，当然，div可以有多个，故可以填充多个echart实例。实例化后再js脚本里调用echartapi即可：调用API上图中的方法都封装在main.js中，使用的时候按上图调用即可，其中css样式对应之前的容器大小，BMapExt为初始化的地图对象，具体可看main.js源码，中间getMap,getEchartsContainer为获取地图实例及echart实例对象，BMap.Point是定义当前打开地图的中心点，最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。

ECharts3怎么加载china.js地图？

echarts3加载map的方式和2不一样了，你必须得先注册地图才行，

“`js$.getJSON(‘./china.json’, function (data)  echarts.registerMap(‘china’

, data); var chart = echarts.init(document.getElementById(‘map’)); chart.setOp

tion( series: [ type: ‘map’, map: ‘china’ ] ); );“`

类似这样,你需要下载中国的地理矢量数据geojson

echarts3与echarts2区别：

1、js文件：

首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详

细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不

方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需

的功能构架类库，使用时只要导入一个echarts.min.js文件就可以；

2、文件导入：

在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现

问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句[html] view plain copy

<script src="js/echarts.js"></script>  接下去只要调用接口就可以了；

3、离线地图：

echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在

模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没

什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县

与区县之间基本上不存在衔接问题；另外，在echarts3中可以根据需要自主构建地图，

这个服务给实际使用提供了很大的便利；

4、工具栏：

在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3

里面的toolbox更丑了；

5、地图漫游工具：

在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着

还是挺不错的，虽然并没有什么用；

6、坐标系:

echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例

如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组；echarts3中另

一个重要的数据结构抽象是独立出了“坐标系”概念；事实上在 ECharts2 中已经有

grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的；echarts3中，

支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理

坐标系（geo）；

7、Option变动：

1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。

2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。

根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。

参考资料

echarts3与echarts2区别.CSDN[引用时间2018-1-22]

参考技术A

看了echarts的demo以及网上大家使用echarts的经验。我使用的是大家都推荐的模块化单文件引入。
1、首先要去echarts和zrender官网上下载需要的文件；

2、然后将下载下来的文件放在你项目的目录下；

3、在项目中引用相关文件。

4、引用相关的文件后可能还会出现很多的小问题，主要去看看js文件目录是否正确。

5、扩展地图插件的时候或者有别的需求需要引入config文件时，要注意一定要将引用的代码放在function(ec)中，这样就不会报[MODULE_MISS]"echarts/config" is not exists!错了

6、调试完成后，就可以见到你想要看到的图片啦