今天花了一天的时间，用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路径,这里我采用了相对路径，详细说明可以看http://echarts.baidu.com/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.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;//这里的selectedProvince为中文，传到浏览器链接的时候可能会乱码，处理方法可以去百度
}
}
if (typeof selectedProvince == \'undefined\') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
myChart.setOption(option, true);
return;
}
var urlArr = [\'44\', \'55\', \'44\'];
for (var p in selected) {
if (selected[p]) {
switch (p) {
case \'河南\':
location.href = \'provinceMap.html?proviceId=\' + urlArr[0] + \'&&proviceName=\' + selectedProvince;
break;
case \'重庆\':
location.href = \'provinceMap.html?proviceId=\' + urlArr[1] + \'&&proviceName=\' + selectedProvince;
break;
case \'广东\':
location.href = \'provinceMap.html?proviceId=\' + urlArr[2] + \'&&proviceName=\' + selectedProvince;
break;
default:
break;
}
}
}
});
//end
《这里为方法2跳转的链接》
myChart.on(\'click\', function(param) {
var name = param.name;
alert(name)
for (var n = 0, nL = cityArr.length; n < nL; n++) {
if (name == cityArr[n].name) {//这里判断所点击的省份是否等于该处的数据，如果等于则把该省份的对应的id赋值到链接以便省份页面可以获取到该id调用数据
location.href = \'provinceMap.html?proviceId=\' + cityArr[n].id + \'&&proviceName=\' + name;
break;
} else {
console.log(name)
}
}
});
//end
// 为echarts对象加载数据
myChart.setOption(option);
});
电脑不够大但为了清晰只截了一部分
《第三步》进去省页面的时候，通过链接获取上一个页面的selectedProvince的值，
执行下面的js即可
// 指定图表的配置项和数据
require.config({
paths: {
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,
min: 0,
max: 100,
x: \'left\',
y: \'bottom\',
text: [\'高\', \'低\'], // 文本，默认为数值文本
color: [\'#00d970\', \'#b3ffa7\', \'#9ae1ff\'],
calculable: true,
inRange: {
color: [\'#9ae1ff\', \'#b3ffa7\', \'#00d970\'],
}
},
series: [{
name: \'中国\',
type: \'map\',
mapType: selectedProvince,//通过链接获取
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: 785.21
}, {
\'name\': \'韶关市\',
value: 0
}, {
\'name\': \'河源市\',
value: 0
}, {
\'name\': \'东莞市\',
value: 0
}, {
\'name\': \'佛山市\',
value: 0
}, {
\'name\': \'惠州市\',
value: 0
}, {
\'name\': \'珠海市\',
value: 0
}, {
\'name\': \'中山市\',
value: 0
}]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
});