本人菜鸟一枚，最近搞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" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: ‘{weiqiye::STATICS}/wx/echarts/build/dist‘
}
});
// 使用
require(
[
‘echarts‘,
‘echarts/chart/map‘ // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(‘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>