使用Echarts构建中国地图鼠标hover显示logo

<div class="container-fluid xlx_part2" style="">
<div class="container">

<div id="map" style="height: 500px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);" _echarts_instance_="1462443688242">
<div style="position: relative; overflow: hidden; width: 1024px; height: 500px;">
<div data-zr-dom-id="bg" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 1024px; height: 500px; -webkit-user-select: none;">
</div>
<canvas width="1024" height="500" data-zr-dom-id="0" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 1024px; height: 500px; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="1024" height="500" data-zr-dom-id="1" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 1024px; height: 500px; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="1024" height="500" data-zr-dom-id="_zrender_hover_" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 1024px; height: 500px; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
<div class="echarts-tooltip zr-element" style="position: absolute; display: none; border: 0px solid rgb(51, 51, 51); white-space: nowrap; transition: left 0.4s, top 0.4s; border-radius: 4px; color: rgb(255, 255, 255); padding: 5px; left: 692px; top: 197px; background-color: rgba(0, 0, 0, 0.701961);">
<img src="http://www.blingschool.com/template/33/pc/images//logo3.png">
</div>
</div>
</div>
</div>
</div>

<!–
<script type="text/javascript" src="http://cs.ecqun.com/?id=1128955" charset="utf-8"></script>
–>
<!–
<script type="text/javascript" src="http://js.dejianpu.cn/gzcity.js"></script>
<script type="text/javascript" src="/template/33/pc/js/djp-v2.0.js"></script>–>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
var $imgs = [
{area: '北京', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '天津', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '上海', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '重庆', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '河北', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '河南', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '云南', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '辽宁', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '黑龙江', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '湖南', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '安徽', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '山东', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '新疆', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '江苏', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '浙江', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '江西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '湖北', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '广西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '甘肃', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '山西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '内蒙古', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '陕西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '吉林', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '福建', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '贵州', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '广东', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '青海', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '西藏', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '四川', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '宁夏', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '海南', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '台湾', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '香港', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '澳门', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'}
];
// JavaScript Document
// 路径配置
if(document.getElementById("map")){
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map'// 使用柱状图就加载bar模块，按需加载
],
function charts(ec) {
chart1(ec);
}
);
function chart1(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('map'));
/************以下是数据区域*********/
option = {
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback){
var $pna = params.name;
var res = '';
for(var i = 0;i<$imgs.length;i++){
if($imgs[i].area == $pna){
res = '<img src="'+ $imgs[i].url +'" />';
//console.log(res);
break;
}
}
//res = '<img src="http://www.blingschool.com/template/33/pc/images//logo3.png" />';
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';
//$('.echarts-tooltip.zr-element').html();
}
},
dataRange: {
x: '-1000px',//图例横轴位置
y: '-1000px',//图例纵轴位置
splitList: [
{start:1, end:1, label: '北京', color: '#cfc5de'},
{start:2, end:2, label: '天津', color: '#f1ebd1'},
{start:3, end:3, label: '上海', color: '#feffdb'},
{start:4, end:4, label: '重庆', color: '#e0cee4'},
{start:5, end:5, label: '河北', color: '#fde8cd'},
{start:6, end:6, label: '河南', color: '#e4f1d7'},
{start:7, end:7, label: '云南', color: '#fffed7'},
{start:8, end:8, label: '辽宁', color: '#e4f1d7'},
{start:9, end:9, label: '黑龙江', color: '#e4f1d7'},
{start:10, end:10, label: '湖南', color: '#fffed7'},
{start:11, end:11, label: '安徽', color: '#fffed8'},
{start:12, end:12, label: '山东', color: '#dccee7'},
{start:13, end:13, label: '新疆', color: '#fffed7'},
{start:14, end:14, label: '江苏', color: '#fce8cd'},
{start:15, end:15, label: '浙江', color: '#ddceeb'},
{start:16, end:16, label: '江西', color: '#e4f1d3'},
{start:17, end:17, label: '湖北', color: '#fde8cd'},
{start:18, end:18, label: '广西', color: '#fde8cd'},
{start:19, end:19, label: '甘肃', color: '#fde8cd'},
{start:20, end:20, label: '山西', color: '#fffdd6'},
{start:21, end:21, label: '内蒙古', color: '#ddcfe6'},
{start:22, end:22, label: '陕西', color: '#fad8e9'},
{start:23, end:23, label: '吉林', color: '#fce8cd'},
{start:24, end:24, label: '福建', color: '#fad8e8'},
{start:25, end:25, label: '贵州', color: '#fad8e8'},
{start:26, end:26, label: '广东', color: '#ddcfe8'},
{start:27, end:27, label: '青海', color: '#fad8e9'},
{start:28, end:28, label: '西藏', color: '#ddcfe6'},
{start:29, end:29, label: '四川', color: '#e4f1d5'},
{start:30, end:30, label: '宁夏', color: '#fefcd5'},
{start:31, end:31, label: '海南', color: '#fad8e9'},
{start:32, end:32, label: '台湾', color: '#fce8cd'},
{start:33, end:33, label: '香港', color: '#dc9bbb'},
{start:34, end:34, label: '澳门', color: '#e0f7cc'},
]
},//各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京', selected:false,value:1},
{name: '天津', selected:false,value:2},
{name: '上海', selected:false,value:3},
{name: '重庆', selected:false,value:4},
{name: '河北', selected:false,value:5},
{name: '河南', selected:false,value:6},
{name: '云南', selected:false,value:7},
{name: '辽宁', selected:false,value:8},
{name: '黑龙江', selected:false,value:9},
{name: '湖南', selected:false,value:10},
{name: '安徽', selected:false,value:11},
{name: '山东', selected:false,value:12},
{name: '新疆', selected:false,value:13},
{name: '江苏', selected:false,value:14},
{name: '浙江', selected:false,value:15},
{name: '江西', selected:false,value:16},
{name: '湖北', selected:false,value:17},
{name: '广西', selected:false,value:18},
{name: '甘肃', selected:false,value:19},
{name: '山西', selected:false,value:20},
{name: '内蒙古', selected:false,value:21},
{name: '陕西', selected:false,value:22},
{name: '吉林', selected:false,value:23},
{name: '福建', selected:false,value:24},
{name: '贵州', selected:false,value:25},
{name: '广东', selected:false,value:26},
{name: '青海', selected:false,value:27},
{name: '西藏', selected:false,value:28},
{name: '四川', selected:false,value:29},
{name: '宁夏', selected:false,value:30},
{name: '海南', selected:false,value:31},
{name: '台湾', selected:false,value:32},
{name: '香港', selected:false,value:33},
{name: '澳门', selected:false,value:34}
]
}
]
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.HOVER, function (param){
var selected = param.name;
//console.log(selected);
//hoverin();
//document.getElementById('wrong-message').innerHTML = str;
});
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MOUSEOUT, function (param){
//var selected = param.name;
//console.log(selected);
//hoverout();
//document.getElementById('wrong-message').innerHTML = str;
});
/************以上是数据区域*********/
// 为echarts对象加载数据
myChart.setOption(option);
}
};</script>