Echarts地图点击省份能跳转到相应的页面，并解决了在支付宝和微信内置浏览器地图不能手控制放大的问题，叮~
本人所在的公司接触到Echarts比较多，上次领导要求公司支付宝生活号上加上地图显示统计，一定要能手控制大小，上网搜了好多资料都不行，原来是我JS代码添加了点击省份跳转到相应页面的代码才导致roam:true;属性一直不起作用，只能拖动不能放大，后来换了一种写法，就解决了上述的问题，耶~~~~
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<link rel="stylesheet" href="css/index.css">
head>
<body>
<div class="index-box">
<div class="logo">
<img src="images/logo.png">
div>
<div id="container" class="map">
div>
div>
<script src="js/jquery-1.8.3.min.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js">script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js">script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js">script>
<script type="text/javascript" src="js/index2.js">script>
body>
html>
``
var dom = document.getElementById(“container”);
var myChart = echarts.init(dom);
option = null;
option = {
tooltip: {
trigger: ‘item’,
},
visualMap: {
min: 0,
max: 1500,
left: ‘left’,
top: ‘bottom’,
text: [‘High’, ‘Low’],
seriesIndex: [1],
inRange: {
color: [‘#e0ffff’, ‘#006edd’]
},
calculable: true,
show:false
},
legend: {
show:false,
orient: ‘vertical’,
x:’left’,
data:[‘数量’]
},
dataRange: {
show:false,
x: ‘left’,
y: ‘bottom’,
splitList: [
{start:40},
{start: 30,end:35},
{start: 29, end:30},
{start: 26, end:29},
{start: 23, end:26},
{start: 20, end:23},
{start: 17, end:20},
{start: 14, end: 17},
{start: 11, end: 14},
{start: 8, end:11},
{start: 5, end: 8},
{end: 5}
],
color: [“#6bade8”,”#7aabd8”,”#f3f3f3”,”#d7e3ef”,”#bccee4”,”#becfdf”,”#bccee2”,”#9bbad4”,”#99bad3”,”#97b6d0”,”#8eafce”,”#88accc”,”#78a2c6”]
},
series: [
{
name: ‘学校’,
type: ‘map’,
mapType: ‘china’,
roam:true,
scaleLimit:{
min:1,
max:3
},
geoIndex: 0,
selectedMode : ‘single’,//multiple多选
itemStyle:{
normal: {
label: {
show: true,
formatter:’{c}’,
textStyle: {
color: ‘#c55a02’,
}
},
borderWidth:0.5,
borderColor: ‘#ffffff’ //区块的边框颜色
},
emphasis:{
color:”#f7b249”,
label:{
show:true,
textStyle: {
color: ‘#0068b6’,
}
},
}
},
showLegendSymbol: false,
top:'12%',
left:'4%',
right:'4%',
data: [
{name: '新疆',value: 3},
{name: '西藏',value: 1},
{name: '青海',value: 1},
{name: '甘肃',value: 10},
/*{name: '宁夏',value: },*/
{name: '内蒙古',value:12},
{name: '四川',value: 11},
{name: '云南',value: 4},
{name:'陕西',value:15},
{name: '重庆',value:8},
{name: '贵州',value: 6},
{name: '山西',value: 8},
{name: '河南',value: 12},
{name: '湖北',value: 17},
{name: '湖南',value: 11},
{name: '广西',value: 10},
{name: '北京',value: 79},
{name: '河北',value: 10},
{name: '天津',value:10},
{name: '山东',value: 12},
{name: '江苏',value: 30},
{name: '安徽',value: 9},
{name: '江西',value: 8},
{name: '广东',value: 39},
{name: '澳门',value: 1},
/* {name: '香港',value: },*/
{name: '海南',value: 1},
{name: '上海',value: 36},
{name: '浙江',value:69},
{name: '福建',value: 24},
/*{name: '台湾',value: },*/
{name: '黑龙江',value: 6},
{name: '吉林',value: 9},
{name: '辽宁',value: 19},
]
}
]
};
if (option && typeof option === “object”) {
myChart.setOption(option, true);
myChart.on(“click”,function (param) {
console.log(param.name)
var urlArr = [”];//这里填写你点击每个省份要跳转的页面
switch(param.name){
case ‘新疆’:
location.href = urlArr[0];
break;
case ‘西藏’:
location.href = urlArr[1];
break;
case ‘青海’:
location.href = urlArr[2];
break;
case ‘甘肃’:
location.href = urlArr[3];
break;
case ‘内蒙古’:
location.href = urlArr[4];
break;
case ‘四川’:
location.href = urlArr[5];
break;
case ‘云南’:
location.href = urlArr[6];
break;
case ‘陕西’:
location.href = urlArr[7];
break;
case ‘重庆’:
location.href = urlArr[8];
break;
case ‘贵州’:
location.href = urlArr[9];
break;
case ‘山西’:
location.href = urlArr[10];
case ‘河南’:
location.href = urlArr[11];
break;
case ‘湖北’:
location.href = urlArr[12];
break;
case ‘湖南’:
location.href = urlArr[13];
break;
case ‘广西’:
location.href = urlArr[14];
break;
case ‘北京’:
location.href = urlArr[15];
break;
case ‘河北’:
location.href = urlArr[16];
break;
case ‘天津’:
location.href = urlArr[17];
break;
case ‘山东’:
location.href = urlArr[18];
break;
case ‘江苏’:
location.href = urlArr[19];
break;
case ‘安徽’:
location.href = urlArr[20];
break;
case ‘江西’:
location.href = urlArr[21];
break;
case ‘广东’:
location.href = urlArr[22];
break;
case ‘澳门’:
location.href = urlArr[23];
break;
case ‘海南’:
location.href = urlArr[24];
break;
case ‘上海’:
location.href = urlArr[25];
break;
case ‘浙江’:
location.href = urlArr[26];
break;
case ‘福建’:
location.href = urlArr[27];
break;
case ‘黑龙江’:
location.href = urlArr[28];
break;
case ‘吉林’:
location.href = urlArr[29];
break;
case ‘辽宁’:
location.href = urlArr[30];
break;
default:
break;
}
});
// 为echarts对象加载数据
myChart.setOption(option);
}
“`