ECharts3怎么加载china.js地图?

JavaScript06

ECharts3怎么加载china.js地图?,第1张

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]

百度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是定义当前打开地图的中心点,最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。