您的位置：首页 > Web前端 > JavaScript

Echarts-地图扩展-标准geoJson格式扩展地图-例子

2015-08-16 14:49 861 查看

摘要: Echarts-地图扩展-标准geoJson格式扩展地图-全国主要城市例子。

本人菜鸟一枚，最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子，瞬间就蒙逼了。（http://echarts.baidu.com/echarts2/doc/example/map20.html ，2016年8月29日找到的）不怪人官网的例子不好，实在是我看不懂它是怎么弄得。最后折腾了一晚上，最后终于弄出个想样子的例子来。（有同感的收藏下，高手勿喷！）

下面这个例子是我弄得汕尾市的，里面的链接是我项目的，我就不改了。这段代码其实是两个例子凑起来的，大家也可以再自己的项目里面试试。中间绿色部分是抄的官方的“标准geoJson格式扩展地图-全国主要城市”code。其他代码抄的是Echarts的start第4步的例子。大家改成自己的项目路径就ok了。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script src="[url=http://libs.baidu.com/jquery/2.0.0/jquery.min.js">var cityMap = {
"汕尾市": "441500"
};

var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('{weiqiye::STATICS}/wx/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}

var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');

option = {
title: {
text : '',
},
tooltip : {
trigger: 'item',
formatter: '{b}所有景点'
},
series : [
{
name: '',
type: 'map',
mapType: '汕尾市',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);

}
);
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 标准geoJson格式扩展地图地图扩展全国主要城市

相关文章推荐

新的分享

章节导航