Echarts-地图扩展-标准geoJson格式扩展地图-全国主要城市例子。
标准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" style="height:400px"&&/div&&&& &!-- ECharts单文件引入 --&&&& &script src="http://my.oschina.net/u/1444945/blog//jquery/2.0.0/jquery.min.js"&&/script&&&& &script src="http://my.oschina.net/u/1444945/blog/{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"&&/script&&&& &script type="text/script"&&&&&&&& // 路径配置&&&&&&& 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 = http://my.oschina.net/u/1444945/blog/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&今天花了一天的时间，用echart弄了一个效果，是从中国地图点进去身份并把改省份的数据渲染出来的效果，刚开始完全没有头绪，只能硬着头皮去看百度echart的api，和博客，看了半天，好家伙，终于给我找到了对应的案列，不多说，看代码，这里采用的是echart2的版本
&!DOCTYPE html&&html&&head&&meta charset="utf-8" /&&title&碳普惠&/title&&link rel="stylesheet" type="text/css" href="../statics/css/reset.css"/&&/head&&body&&div id="china"&&/div&&script src="../statics/js/echarts/build/dist/echarts.js"&&/script& &/body&&/html&
《第一步》配置echart路径,这里我采用了相对路径，详细说明可以看/echarts2/doc/start.html?qq-pf-to=pcqq.c2c
require.config({paths: {echarts: '../statics/js/echarts/build/dist'}})
《第二步》配置地图
require(['echarts', 'echarts/chart/map'], function(ch) {// 基于准备好的dom，初始化echarts图表var myChart = ch.init(document.getElementById('china'));option = {tooltip: {trigger: 'item',formatter: '{b}'},dataRange: { //柱子的设置min: 0,max: 100,x: 'left',y: '10%',text: ['高', '低'], // 文本，默认为数值文本textStyle: {color: 'white'},color: ['#00d970', '#b3ffa7', '#9ae1ff'],calculable: true,inRange: {color: ['#00d970', '#b3ffa7', '#9ae1ff'],}},series: [{name: '中国',type: 'map',mapType: 'china', //可以是world,省份中文名selectedMode: 'single', //multiple多选mapLocation: {x: "10%",y: "center"},itemStyle: {normal: {label: {show: true,textStyle: {color: "#231816"}},areaStyle: {color: '#B1D0EC'},color: '#B1D0EC',borderColor: '#dadfde' //区块的边框颜色},emphasis: { //鼠标hover样式label: {show: true,textStyle: {color: '#fa4f04'}}}},data: [{name: '北京',value: 100}, {name: '天津',value: 0}, {name: '上海',value: 60}, {name: '重庆',value: 0}, {name: '河北',value: 60}, {name: '河南',value: 60}, {name: '云南',value: 0}, {name: '辽宁',value: 0}, {name: '黑龙江',value: 0}, {name: '湖南',value: 60}, {name: '安徽',value: 0}, {name: '山东',value: 60}, {name: '新疆',value: 0}, {name: '江苏',value: 0}, {name: '浙江',value: 0}, {name: '江西',value: 0}, {name: '湖北',value: 60}, {name: '广西',value: 60}, {name: '甘肃',value: 0}, {name: '山西',value: 60}, {name: '内蒙古',value: 0}, {name: '陕西',value: 0}, {name: '吉林',value: 0}, {name: '福建',value: 0}, {name: '贵州',value: 0}, {name: '广东',value: 597}, {name: '青海',value: 0}, {name: '西藏',value: 0}, {name: '四川',value: 60}, {name: '宁夏',value: 0}, {name: '海南',value: 60}, {name: '台湾',value: 0}, {name: '香港',value: 0}, {name: '澳门',value: 0}]}]};
&!--这里是方法一跳转要去的链接--&var ecConfig = require('echarts/config');myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {var selected = param.var selectedPfor (var i = 0, l = option.series[0].data. i & i++) {name = option.series[0].data[i].option.series[0].data[i].selected = selected[name];if (selected[name]) {selectedProvince =//这里的selectedProvince为中文，传到浏览器链接的时候可能会乱码，处理方法可以去百度}}if (typeof selectedProvince == 'undefined') {option.series.splice(1);option.legend =option.dataRange =myChart.setOption(option, true);}var urlArr = ['44', '55', '44'];for (var p in selected) {if (selected[p]) {switch (p) {case '河南':location.href = 'provinceMap.html?proviceId=' + urlArr[0] + '&&proviceName=' + selectedPcase '重庆':location.href = 'provinceMap.html?proviceId=' + urlArr[1] + '&&proviceName=' + selectedPcase '广东':location.href = 'provinceMap.html?proviceId=' + urlArr[2] + '&&proviceName=' + selectedPdefault:}
《这里为方法2跳转的链接》
myChart.on('click', function(param) {
var name = param.
alert(name)
for (var n = 0, nL = cityArr. n & nL; n++) {
if (name == cityArr[n].name) {//这里判断所点击的省份是否等于该处的数据，如果等于则把该省份的对应的id赋值到链接以便省份页面可以获取到该id调用数据
location.href = 'provinceMap.html?proviceId=' + cityArr[n].id + '&&proviceName=' +
console.log(name)
//end// 为echarts对象加载数据myChart.setOption(option);});
电脑不够大但为了清晰只截了一部分
&《第三步》进去省页面的时候，通过链接获取上一个页面的selectedProvince的值，
执行下面的js即可
// 指定图表的配置项和数据 require.config({
echarts: '../statics/js/echarts/build/dist'
} }) require(['echarts', 'echarts/chart/map'], function(ch) {
// 基于准备好的dom，初始化echarts图表
var myChart = ch.init(document.getElementById('province'));
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
dataRange: {
show: false,
x: 'left',
y: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
color: ['#00d970', '#b3ffa7', '#9ae1ff'],
calculable: true,
inRange: {
color: ['#9ae1ff', '#b3ffa7', '#00d970'],
series: [{
name: '中国',
type: 'map',
mapType: selectedProvince,//通过链接获取
itemStyle: {
show: true,
textStyle: {
color: "#231816"
areaStyle: {
color: '#B1D0EC'
color: '#B1D0EC',
borderColor: '#dadfde' //区块的边框颜色
emphasis: { //鼠标hover样式
show: true,
textStyle: {
color: '#fa4f04'
data: [{//这里的数据应该是动态的，但这里只是弄一个效果出来看看，所以模拟了数据
'name': '广州市',
value: 785.21
'name': '韶关市',
'name': '河源市',
'name': '东莞市',
'name': '佛山市',
'name': '惠州市',
'name': '珠海市',
'name': '中山市',
// 为echarts对象加载数据
myChart.setOption(option); });
阅读(...) 评论()17141人阅读
最近有个挺好玩的需求：需要将分布在全国各地的系统用户数量统计出来，以地图的形式展示出每个地域的用户数量。
此前我一直用的是highcharts，怎奈highcharts不支持地图报表，于是转而使用百度的Echarts，Echarts本身的功能没的说，很赞，API也很详细，但是网上貌似玩的人不多，于是自己动手参照官方demo耍耍。
先展示下最终实现效果，如果诸位看官感觉效果还不错，欢迎继续向下看，如果感觉效果很逊，pls close ~ & O(∩_∩)O~
简单的描述下：上述地图中，左侧是展示全国地图（默认选择的是江苏 ps：因为在下目前在江苏 O(∩_∩)O~），右侧是展示的江苏各地市的用户数量，点击左侧的不同省份，右侧地图会随之变化，从而显示不同省市的用户数量。
下面说下具体的实现：
Echarts 官网：
先说下思路：Echarts的样式是很容易在前台jsp定制的，最重要的数据源（如图中的各区域的用户数量）是需要在后台拼装，然后传到前台解析显示的。Echarts页面上获得选择的省名称（如江苏），ajax传入后台，我在数据库中存入的有最新的全国行政区域代码（国家统计局获得），在后台会先通过省名称获得对应的省编码，然后获得其下各市的用户总数量，将这个数量数据拼装然后返回前台解析显示。
代码如下，echarts.jsp
&%@ page language=&java& contentType=&text/ charset=UTF-8&
pageEncoding=&UTF-8&%&
&script type=&text/javascript& src=&${pageContext.request.contextPath}/file/scripts/jquery-1.8.3.min.js&&&/script&
&script type=&text/javascript& src=&${pageContext.request.contextPath}/file/scripts/echarts/esl.js&&&/script&
&div id=&main& style=&float:height:500width:620padding:0&&&/div&
&div id=&pc& style=&float:height:500width:600padding:20&&&/div&
&%--注意 此段js只能置于此位置
否则echarts无法正常生成 --%&
&script type=&text/javascript&&
var curIndx = 0;
var mapType = [ // 23个省
'江苏', '青海', '四川', '海南', '陕西',
'甘肃', '云南', '湖南', '湖北', '黑龙江',
'贵州', '山东', '江西', '河南', '河北',
'山西', '安徽', '福建', '浙江', '广东',
'吉林', '辽宁', '台湾',
// 5个自治区
'新疆', '广西', '宁夏', '内蒙古', '西藏',
// 4个直辖市
'北京', '天津', '上海', '重庆',
// 2个特别行政区
'香港', '澳门'
var fileLocation = '${pageContext.request.contextPath}/file/scripts/echarts/echarts-map';
require.config({
'echarts': fileLocation,
'echarts/chart/map': fileLocation,
var colorL
'echarts',
'echarts/chart/map'
function(ec) {
colorList = require('zrender/tool/color').getGradientColors(
['red','yellow','lightskyblue'], 10
myChart = ec.init(document.getElementById('main'));
pcChart = ec.init(document.getElementById('pc'));
myChart.setOption(getChinaMapChartOption());
window.onresize = myChart.
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, mapSelected);
mapSelected(true);
//初始加载江苏各地市
function getChinaMapChartOption()
chinaMapChartOption = {
text : '全国34个省级行政区',
tooltip : {
trigger: 'item'
series : [
tooltip: {
trigger: 'item',
formatter: '{b}'
name: '中国',
type: 'map',
mapType: 'china',
mapLocation: {
x: 'left',
width: 600
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '江苏', selected:true}
animation: false
return chinaMapChartO
function mapSelected(param){
var len = mapType.
var mt = mapType[curIndx % len];
var selected = param.
for (var i in selected) {
if (selected[i]) {
while (len--) {
if (mapType[len] == mt) {
$.post('${pageContext.request.contextPath}/usermanager!ajaxUserAreaJson.action',{'provinceName':mt},
function(data){
datas = eval('(' + data + ')');
var option = {
text : '江苏',
tooltip : {
trigger: 'item',
//formatter: '{b}'
orient: 'vertical',
x:'right',
data:['系统用户数量']
dataRange: {
//此处由于echarts的bug 默认的max最小值为100且为100的整数倍 
color:['orange','yellow'],
text:['高','低'], // 文本，默认为数值文本
calculable : true
toolbox: {
show : false,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: true},
restore : true,
saveAsImage : true
series : [
name: '系统用户数量',
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
data:datas
option.tooltip.formatter = '{b}：{c}';
option.series[0].mapType =
option.title.text = mt + &-系统用户分布&;
pcChart.setOption(option, true);
注意：jsp中的post方法，是动态获得数据的关键，以及获得的data数据eval下，在series中的data中设置数据源即可。其他的东东请参考官网。
后台拼装数据：
实际上后台只要获得如
[{name:'南京市',value:13},{name:'无锡市',value:4},{name:'徐州市',value:4},{name:'连云港市',value:1}]
的字符串即可，或者你也可以叫它json，但是要注意name和value是没有引号的，具体拼装代码就不展示了，你可以用各种姿势获得其。O(∩_∩)O~
这里提下，dataRange中的max属性的获取思路，首先将每个区域下用户总数获取到，进行sort排序取最大值，最大值然后传入如下方法处理，获得返回值同dataJson一起返回页面解析显示即可（上述的例子只是简单的写死max=100，具体如何动态化这个max，请自行思考，其实so easy……）：
* 获得echarts的dataRange的max值 max必须为100的整数倍
* 返回值示例：94则返回100 125则返回200 1240则需要返回1300
* @param ranMax
private static int rangeMax(Integer ranMax)
int max = 100;
// 小于100 则直接返回100
if (ranMax &= 100)
return 100;
// 能被100整除 直接返回
if (ranMax % 100 == 0)
return ranM
// 返回比当前值多100的值
int m = ranMax / 100;
max = (m + 1) * 100;
综上：最主要的就是jsp的写法，和字符串的拼装。如有不明白之处可以给我留言~
PS：附上echarts作者的地址 &
&kener@osc。
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：502210次
积分：6512
积分：6512
排名：第3293名
原创：138篇
转载：114篇
评论：341条
(2)(1)(1)(2)(1)(1)(1)(4)(11)(11)(12)(22)(4)(2)(1)(6)(7)(4)(6)(8)(5)(3)(4)(11)(14)(5)(1)(1)(2)(1)(2)(1)(2)(1)(2)(5)(4)(3)(3)(1)(4)(3)(5)(6)(6)(6)(8)(10)(3)(7)(1)(3)(5)(3)(1)(2)(1)问题：echarts map 去掉dataRange，如何实现地图各个省份依然显示不同颜色？
描述: 林兄，你好。请教问题如下：
现状：如将dataRange: {
& & & & & & & & min: 0,
& & & & & & & & max: 2500,
&&&&&&&&&&&&&...
& & & & & & } 去掉，地图就会没有颜色区分省份，整体灰色。如图 现问题：某些需求只需展示（需要用颜色标注各省）但不要值域选择，如何实现？如图： 解决方案1: ~~~~~
你们的办法太传统了
dataRange: { &&&&&&& x: '-500', &&&&&&& y: '-500' &&& }, 解决方案2:/doc/example/map.html解决方案3:@Kener-林峰
以上介绍了“echarts map 去掉dataRange，如何实现地图各个省份依然显示不同颜色？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1528032.html
上一篇： 下一篇：