地图地市区域,地市上打的点和星上绑定单击事件，点和星的单击事件绑定成功，但是地市?报错
@Kener-林峰 你好，想跟你请教个问题：地图mapselected绑定不上也不报错，点和星的单击事件可以绑定上，代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/includes/taglibs.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--引入一个模块加载器，如esl.js或者require.js-->
<script src="${base }/js/home/newmap/esl.js"></script>
<script src="${base }/js/home/newmap/echarts-map.js"></script>
<script src="${base }/js/home/newmap/echarts.js"></script>
<script type="text/javascript" src="${base }/js/jquery.js"></script>
<script type="text/javascript" src="${base }/js/ui/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" />
</head>
<body style="overflow:hidden;">
<!--为ECharts准备一个具备大小（宽高）的Dom-->
<div id="mainMap" style="height:360px;width:98%;overflow-y:hidden;overflow-x:hidden"></div>
<script type="text/javascript">
// 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/map'
],
function(ec) {
var myChart = ec.init(document.getElementById('mainMap'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
myChart.on(ecConfig.EVENT.CLICK,viewAlertDetails);
myChart.on(ecConfig.EVENT.MAP_SELECTED,viewAlertDetails);
initmap(myChart);
var time = 1000 *60 ;
setInterval(function(){
initmap(myChart);
}, time);
window.onresize=function(){
changeDivHeight(myChart);
}
changeDivHeight(myChart);
}
);
//地图初始化
function initmap(myChart){
myChart.setOption({
tooltip : {
trigger: 'item',
formatter: function(params,ticket,callback) {
var cityName=params[1];
var res = "单位名称:"+cityName+"<br/>";
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/getStaticData?cityName='+encodeURI(encodeURI(cityName)),
success: function(result){
//res=res+"事件总数:"+result.data.eventCount+"<br/>";
res=res+"告警总数:"+result.data.alertCount;
}
});
setTimeout(function(){
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return res;
}
},
dataRange: {
min: 0,
max: 2,
splitNumber:2,
orient :'horizontal' ,
textStyle: {
color: "#99CCFF"
},
y:'top',
color :['#249bf8','#FF3300'],
text:['正常','风险']
},
series : [
{
name: '广西省地图',
type: 'map',
mapType: '广西',
roam :false,
itemStyle:{
normal:{
label:{
show:true,
textStyle:{
color:'#242424',
fontWeight: 'bold'
}
},
color:'#249bf8'
},
emphasis:{label:{show:true}}
},
data:(function (){
var res = [];
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/findIsSafety?isPoint=0',
success: function(result){
res=result;
}
});
return res;
})()
,
markPoint:{
symbol:'circle',
symbolSize:3,
itemStyle: {
normal: {
borderColor: '#CCFFFF',
borderWidth: 8,
label: {
show: false
}
},
emphasis: {
borderWidth: 8,
label: {
show: false
}
}
},
data : (function (){
var res = [];
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/findIsSafety?isPoint=1',
success: function(result){
res=result;
}
});
return res;
})()
}
,geoCoord: {
"电科院":[108.33,22.84]
}
},
{
name: '广西省地图',
type: 'map',
mapType: '广西',
data:[],
markPoint : {
symbol:'star',
symbolSize:1,
itemStyle: {
normal: {
borderColor: '#CCFFFF',
borderWidth: 8,
label: {
show: false
}
},
emphasis: {
borderWidth: 8,
label: {
show: false
}
}
},
data : (function (){
var res = [];
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/findIsSafety?isPoint=2',
success: function(result){
res=result;
}
});
return res;
})()
}
,geoCoord: {
"公司本部":[108.93,22.84]
}
},
{ name: '广西省地图',
type: 'map',
mapType: '广西',
data:[],
markPoint:{
symbol:'emptyCircle',
symbolSize : function(v){
return 5 + v/100
},
itemStyle:{
normal:{
label:{show:false}
},
emphasis: {
borderWidth: 8,
label: {
show: false
}
}
},
effect : {
show: true,
shadowBlur : 0
},
data :(function (){
var res = [];
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/findPointIsSafety?isPoint=1',
success: function(result){
res=result;
}
});
return res;
})()
}
,geoCoord: {
"电科院":[108.33,22.84]
}
}
,
{ name: '广西省地图',
type: 'map',
mapType: '广西',
data:[],
markPoint:{
symbol:'star',
symbolSize : function(v){
return 6 + v/100
},
itemStyle:{
normal:{
label:{show:false}
},
emphasis: {
borderWidth: 10,
label: {
show: false
}
}
},
effect : {
show: true,
shadowBlur : 0
},
data : (function (){
var res = [];
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/findPointIsSafety?isPoint=2',
success: function(result){
res=result;
}
});
return res;
})()
}
,geoCoord: {
"公司本部":[108.93,22.84]
}
}
]
},true);
}
function changeDivHeight(myChart){
var hh=$(window).height();
if(hh==375){
$("#mainMap").height(360);
}else{
var aas=hh/375;
$("#mainMap").height(aas*360);
}
myChart.resize();
}
//告警追溯
function viewAlertDetails(param){
var cityName=param.name
alert(cityName);
$.ajax({
dataType:'json',
async:false,
url:'${base}/newIndex/map/getStaticData?cityName='+encodeURI(encodeURI(cityName)),
success: function(result){
if(result.data.alertCount>0){
var url = "${base}/newIndex/map/Alertdetails?cityName="+encodeURI(encodeURI(cityName)) ;
var dialog = top.CommonDialog.create({
top : 20,
width:'80%',
height:'80%',
url: url,
title: '告警追溯'
});
}
}
});
}
</script>
</body>
</html>
写回答
-
https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB没开启吧 http://echarts.baidu.com/doc/doc.html#Series
boolean|string}selectedModenull饼图，地图选中模式，默认关闭，可选single，multiple 谢谢，问题按照你说的方式以及解决2020-06-20 19:12:11赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
