echarts中國地圖使省份選擇性滑動或點選高亮
阿新 • • 發佈：2018-11-26
本文介紹echarts顯示中國省份圖，對於需要高亮的省份進行篩選。並且對省份進行選擇性互動。
首先我們需要一個顏色集合，代表我們要設定多少種顏色。這裡用到了dataRange。
dataRange: { show:false, x: 'left', y: 'bottom', splitList: [ {start: 5, end: 5, color: 'orange'},//當值為5時，區域背景 {start: 10, end: 10, color: '#ff6300'},//當值為10時，區域背景 {start: 15, end: 15, color: '#ccc'},//當值為15時，區域背景 ], },
然後就需要資料就行了。
series : [ { name: '市場分佈', type: 'map', mapType: 'china', //hoverable: false, roam: false, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:false}} }, data:[], } ],
這裡的data為空，因為正常情況下資料不會寫死，都是從後臺獲取的，在這裡我直接賦值。
var ini_data=[];//初始化省份陣列
var provArr = ['河北', '河南', '雲南', '遼寧', '黑龍江', '湖南', '安徽','山東'];//獲取的省份，有可能是從後臺獲取由於框架不識別'省'，‘市’的字眼，所以使用正則將字眼去掉。
//正則省份，將省與市的字眼去掉，框架不識別 for(var i=0;i<provArr.length;i++){ var str = provArr[i]; var re = /省|市/g; //全域性匹配 var str2 ={name:str.replace(re,''),value: 5};//拼接物件陣列 ini_data.push(str2); }
此時，我們有了一個完整的ini_data物件陣列了。可以直接給圖表賦值了。
option.series[0].data=ini_data;//將拼接好的陣列賦給引數集合
mycharts.setOption(option);//跟新圖表結果：
可以看到，只要在數組裡的省份都變成了我設定的orange顏色，因為它們的value都是5。
下面就是互動了，我的需求是點選灰色省份無任何效果，點選orange色的省份背景變為‘#ff6300’。
//點選事件
mycharts.on('click', function (params) {//點選事件
select_province(params.name);
});
//初始化省顏色
function ini_province(){
var ini_len=option.series[0].data.length;
for(var i=0;i<ini_len;i++){
//初始化顏色
option.series[0].data[i].value=5;
mycharts.setOption(option);
}
}
//選中省顏色
function select_province(province_name){
var len=option.series[0].data.length;
for(var i=0;i<len;i++){
if(option.series[0].data[i].name==province_name){//如果匹配正確
//先歸零
ini_province();
//改變顏色
option.series[0].data[i].value=10;
mycharts.setOption(option);
}
}
}我們通過監聽click事件來獲得event物件，然後獲得省份，經過匹配後，將原來選中的省份清零，再改變選中省份的顏色。
結果：
至於滑鼠滑過的高亮效果，是框架自帶的，預設是所有省份都有，如果想去掉只要加：hoverable: false就行了，不過這樣同樣會取消掉橙色的省份。所以為了保留橙色省份的滑動高亮效果，我是這樣寫的。
//滑鼠滑過事件
var testStr=','+provArr.join(",")+",";
mycharts.on('hover', function (param){
if(testStr.indexOf(","+param.name+",")!=-1){
return false;
}else{
param.value=15;
mycharts.setOption(option);
}
});這時設定的第三個顏色生效了，當滑鼠滑過時沒有匹配到provArr中的省份時，就設定背景顏色為#ccc，由於預設背景是#ccc的緣故，也可以重新設定背景色，只要這裡設定的顏色與背景色相同就行了。
附上demo地址：不用謝我，叫我雷鋒
附上完整程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;color:#333333;}
h3,h4,h5,h6{font-weight: normal;}
.clear{clear:both;}
body{font-family:"微軟雅黑";}
a{text-decoration: none;color: #333;}
#charts{width:800px;height:600px;margin:0 auto;}
.market_map_title{font-size:32px;text-align:left;padding-left:50px;}
</style>
</head>
<body>
<h3 class="market_map_title">全國市場分佈圖</h3>
<div id="charts"></div>
</body>
<!--<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>-->
<script src="echarts-all.js"></script>
<script>
var mycharts = echarts.init(document.getElementById('charts'))
option = {
dataRange: {
show:false,
x: 'left',
y: 'bottom',
splitList: [
{start: 5, end: 5, color: 'orange'},//當值為5時，區域背景
{start: 10, end: 10, color: '#ff6300'},//當值為10時，區域背景
{start: 15, end: 15, color: '#ccc'},//當值為15時，區域背景
],
},
series : [
{
name: '市場分佈',
type: 'map',
mapType: 'china',
//hoverable: false,
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:false}}
},
data:[],
}
],
animation:false
};
var ini_data=[];//初始化省份陣列
var provArr = ['河北', '河南', '雲南', '遼寧', '黑龍江', '湖南', '安徽','山東'];//獲取的省份，有可能是從後臺獲取
//正則省份，將省與市的字眼去掉，框架不識別
for(var i=0;i<provArr.length;i++){
var str = provArr[i];
var re = /省|市/g; //全域性匹配
var str2 ={name:str.replace(re,''),value: 5};//拼接物件陣列
ini_data.push(str2);
}
option.series[0].data=ini_data;//將拼接好的陣列賦給引數集合
mycharts.setOption(option);//跟新圖表
//滑鼠滑過事件
var testStr=','+provArr.join(",")+",";
mycharts.on('hover', function (param){
if(testStr.indexOf(","+param.name+",")!=-1){
return false;
}else{
param.value=15;
mycharts.setOption(option);
}
});
//點選事件
mycharts.on('click', function (params) {//點選事件
select_province(params.name);
});
//初始化省顏色
function ini_province(){
var ini_len=option.series[0].data.length;
for(var i=0;i<ini_len;i++){
//初始化顏色
option.series[0].data[i].value=5;
mycharts.setOption(option);
}
}
//選中省顏色
function select_province(province_name){
var len=option.series[0].data.length;
for(var i=0;i<len;i++){
if(option.series[0].data[i].name==province_name){//如果匹配正確
//先歸零
ini_province();
//改變顏色
option.series[0].data[i].value=10;
mycharts.setOption(option);
}
}
}
</script>
</html>