Echarts加载地图的三种方式

参考地址：http://www.echartsjs.com/option.html#geo.map

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例：

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({series: [{type: 'map',map: 'china'}]
});
</script>

JSON 引入示例：

$.get('map/json/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]});
});

ECharts 使用 geoJSON 格式的数据作为地图的轮廓。

另外，其实是有第三种方式的，Echarts还可以加载百度地图，参考示例：http://gallery.echartsjs.com/editor.html?c=effectScatter-bmap

http://www.echartsjs.com/faq.html#baidu-map

Echarts加载地图的三种方式相关推荐

Dialog加载页面动画（Loding.....加载等待）三种方式
方式一:帧动画切换效果(几张图片切换) 1.drawable 下创建资源(多张图片~根据自己需要) <?xml version="1.0" encoding="ut ...
JavaScript判断图片是否加载完成的三种方式
一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
easyui datagrid加载数据的三种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
QML for Android 加载图片资源的几种方式
前言前段时间用 QML 做一个简单的 android 程序,需要打开 android手机本地图片,原本是一个非常简单的功能,但是碰到一些坑着实的被坑了一把,然而在网上并没有找到相关的文档,这里做个总 ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
Vue动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
(一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

Echarts加载地图的三种方式

Echarts加载地图的三种方式相关推荐

最新文章

热门文章