Echarts-地图扩展-标准geoJson格式扩展地图-例⼦
本⼈菜鸟⼀枚，最近搞echarts地图。看到官⽅给的“标准geoJson格式扩展地图-全国主要城市”的例⼦，瞬间就蒙逼了。不怪⼈官⽹的例⼦不好，实在是我看不懂它是怎么弄得。最后折腾了⼀晚上，最后终于弄出个想样⼦的例⼦来。（有同感的收藏下，⾼⼿勿喷！）
下⾯这个例⼦是我弄得汕尾市的，⾥⾯的链接是我项⽬的，我就不改了。这段代码其实是两个例⼦凑起来的，⼤家也可以再⾃⼰的项⽬⾥⾯试试。中间绿⾊部分是抄的官⽅的“标准geoJson格式扩展地图-全国主要城市”code。其他代码抄的是Echarts的start第4步的例⼦。⼤家改成⾃⼰的项⽬路径就ok了。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<!-- ECharts单⽂件引⼊ -->
<script src="libs.baidu/jquery/2.0.0/jquery.min.js"></script>
<script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
setoption
paths: {
echarts: '{weiqiye::STATICS}/wx/echarts/build/dist'
}
});
// 使⽤
require(
[
'echarts',
'echarts/chart/map' // 使⽤柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.ElementById('main'));
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>