@Kener-林峰 你好,想跟你请教个问题:Echarts 地图 鼠标悬浮提示效果没出来,麻烦给指导下。谢谢。

Luuvy 发布于 2015/05/26 18:14
阅读 2K+
收藏 0

 你好:

我想实现这个鼠标悬浮的提示效果,下图是我根据官网例子做出来的,但这个鼠标悬浮提示效果没显示,本地代码附上,麻烦给指导一下。谢谢!

<script type="text/javascript">
$(function(){
getProvList();
echarone();
})
function getProvList(id){
var op=""; 
var url = '<%=path%>/com.asiainfo.module.YiKaShuangHaoModule.getProvList.db(report).invoke?serial=' +(new Date().getTime());
$.ajax({
url:url,
dataType:'json',
success : function(req){
   var list=req.list;
for(var i=0;i<list.length;i++){
op += "<option id='"+list[i].ORDER_NO+"' value='"+list[i].PRVNCE_ID+"'>"+list[i].AREA_NM+"</option>"
}
$("#province").append(op);
}
});
}
function changeArea(){
//var name = $("#Yreseller").find("option:selected").text();
var pId = $("#province").val();
setMap(pId);
}

require.config({
    paths: {
        echarts: '<%=path%>/channel/echarts/build/source'
       }
   });
   var echarone = function(){
    require(
    [
        'echarts',   
           'echarts/chart/map'   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
       ],
           function (ec) {
               setMap("821,822,823");
           }
);
}
function setMap(obj){
var myChart = require('echarts').init(document.getElementById('main'));
   var url = '<%=path%>/com.asiainfo.module.YiKaShuangHaoModule.getMapValueList.db(report).invoke?serial=' +(new Date().getTime())+'&prvnceId='+obj;
$.ajax({        
url:url,
data:{},
dataType:'json',
success : function(result){
data = result.json;
/*data={
'legen':['辽宁','吉林','黑龙江'],
'markLine':[
[{name:'黑龙江'},{name:'安徽'}],[{name:'黑龙江'},{name:'北京'}],[{name:'黑龙江'},{name:'福建'}],[{name:'黑龙江'},{name:'甘肃'}],[{name:'黑龙江'},{name:'广东'}],[{name:'黑龙江'},{name:'广西'}],[{name:'黑龙江'},{name:'贵州'}],[{name:'黑龙江'},{name:'海南'}],[{name:'黑龙江'},{name:'河北'}],[{name:'黑龙江'},{name:'河南'}],[{name:'黑龙江'},{name:'黑龙江'}],[{name:'黑龙江'},{name:'湖北'}],[{name:'黑龙江'},{name:'湖南'}],[{name:'黑龙江'},{name:'吉林'}],[{name:'黑龙江'},{name:'江苏'}],[{name:'黑龙江'},{name:'江西'}],[{name:'黑龙江'},{name:'辽宁'}],[{name:'黑龙江'},{name:'内蒙古'}],[{name:'黑龙江'},{name:'宁夏'}],[{name:'黑龙江'},{name:'青海'}],[{name:'黑龙江'},{name:'山东'}],[{name:'黑龙江'},{name:'山西'}],[{name:'黑龙江'},{name:'陕西'}],[{name:'黑龙江'},{name:'上海'}],[{name:'黑龙江'},{name:'四川'}],[{name:'黑龙江'},{name:'天津'}],[{name:'黑龙江'},{name:'西藏'}],[{name:'黑龙江'},{name:'新疆'}],[{name:'黑龙江'},{name:'云南'}],[{name:'黑龙江'},{name:'浙江'}],[{name:'黑龙江'},{name:'重庆'}],[{name:'吉林'},{name:'安徽'}],[{name:'吉林'},{name:'北京'}],[{name:'吉林'},{name:'福建'}],[{name:'吉林'},{name:'甘肃'}],[{name:'吉林'},{name:'广东'}],[{name:'吉林'},{name:'广西'}],[{name:'吉林'},{name:'贵州'}],[{name:'吉林'},{name:'海南'}],[{name:'吉林'},{name:'河北'}],[{name:'吉林'},{name:'河南'}],[{name:'吉林'},{name:'黑龙江'}],[{name:'吉林'},{name:'湖北'}],[{name:'吉林'},{name:'湖南'}],[{name:'吉林'},{name:'吉林'}],[{name:'吉林'},{name:'江苏'}],[{name:'吉林'},{name:'江西'}],[{name:'吉林'},{name:'辽宁'}],[{name:'吉林'},{name:'内蒙古'}],[{name:'吉林'},{name:'宁夏'}],[{name:'吉林'},{name:'青海'}],[{name:'吉林'},{name:'山东'}],[{name:'吉林'},{name:'山西'}],[{name:'吉林'},{name:'陕西'}],[{name:'吉林'},{name:'上海'}],[{name:'吉林'},{name:'四川'}],[{name:'吉林'},{name:'天津'}],[{name:'吉林'},{name:'西藏'}],[{name:'吉林'},{name:'新疆'}],[{name:'吉林'},{name:'云南'}],[{name:'吉林'},{name:'浙江'}],[{name:'吉林'},{name:'重庆'}],[{name:'辽宁'},{name:'安徽'}],[{name:'辽宁'},{name:'北京'}],[{name:'辽宁'},{name:'福建'}],[{name:'辽宁'},{name:'甘肃'}],[{name:'辽宁'},{name:'广东'}],[{name:'辽宁'},{name:'广西'}],[{name:'辽宁'},{name:'贵州'}],[{name:'辽宁'},{name:'海南'}],[{name:'辽宁'},{name:'河北'}],[{name:'辽宁'},{name:'河南'}],[{name:'辽宁'},{name:'黑龙江'}],[{name:'辽宁'},{name:'湖北'}],[{name:'辽宁'},{name:'湖南'}],[{name:'辽宁'},{name:'吉林'}],[{name:'辽宁'},{name:'江苏'}],[{name:'辽宁'},{name:'江西'}],[{name:'辽宁'},{name:'辽宁'}],[{name:'辽宁'},{name:'内蒙古'}],[{name:'辽宁'},{name:'宁夏'}],[{name:'辽宁'},{name:'青海'}],[{name:'辽宁'},{name:'山东'}],[{name:'辽宁'},{name:'山西'}],[{name:'辽宁'},{name:'陕西'}],[{name:'辽宁'},{name:'上海'}],[{name:'辽宁'},{name:'四川'}],[{name:'辽宁'},{name:'天津'}],[{name:'辽宁'},{name:'西藏'}],[{name:'辽宁'},{name:'新疆'}],[{name:'辽宁'},{name:'云南'}],[{name:'辽宁'},{name:'浙江'}],[{name:'辽宁'},{name:'重庆'}]
],
'series':[
[[{name:'辽宁'},{name:'安徽',value:116}],[{name:'辽宁'},{name:'北京',value:503}],[{name:'辽宁'},{name:'福建',value:108}],[{name:'辽宁'},{name:'甘肃',value:52}],[{name:'辽宁'},{name:'广东',value:247}],[{name:'辽宁'},{name:'广西',value:32}],[{name:'辽宁'},{name:'贵州',value:118}],[{name:'辽宁'},{name:'海南',value:29}],[{name:'辽宁'},{name:'河北',value:243}],[{name:'辽宁'},{name:'河南',value:1107}],[{name:'辽宁'},{name:'黑龙江',value:2877}],[{name:'辽宁'},{name:'湖北',value:204}],[{name:'辽宁'},{name:'湖南',value:97}],[{name:'辽宁'},{name:'吉林',value:864}],[{name:'辽宁'},{name:'江苏',value:85}],[{name:'辽宁'},{name:'江西',value:172}],[{name:'辽宁'},{name:'辽宁',value:9517}],[{name:'辽宁'},{name:'内蒙古',value:203}],[{name:'辽宁'},{name:'宁夏',value:56}],[{name:'辽宁'},{name:'青海',value:5}],[{name:'辽宁'},{name:'山东',value:355}],[{name:'辽宁'},{name:'山西',value:40}],[{name:'辽宁'},{name:'陕西',value:233}],[{name:'辽宁'},{name:'上海',value:88}],[{name:'辽宁'},{name:'四川',value:1631}],[{name:'辽宁'},{name:'天津',value:55}],[{name:'辽宁'},{name:'西藏',value:null}],[{name:'辽宁'},{name:'新疆',value:1}],[{name:'辽宁'},{name:'云南',value:160}],[{name:'辽宁'},{name:'浙江',value:847}],[{name:'辽宁'},{name:'重庆',value:171}]],
[[{name:'吉林'},{name:'安徽',value:171}],[{name:'吉林'},{name:'北京',value:287}],[{name:'吉林'},{name:'福建',value:258}],[{name:'吉林'},{name:'甘肃',value:29}],[{name:'吉林'},{name:'广东',value:151}],[{name:'吉林'},{name:'广西',value:153}],[{name:'吉林'},{name:'贵州',value:103}],[{name:'吉林'},{name:'海南',value:91}],[{name:'吉林'},{name:'河北',value:100}],[{name:'吉林'},{name:'河南',value:51}],[{name:'吉林'},{name:'黑龙江',value:3067}],[{name:'吉林'},{name:'湖北',value:772}],[{name:'吉林'},{name:'湖南',value:179}],[{name:'吉林'},{name:'吉林',value:1372}],[{name:'吉林'},{name:'江苏',value:54}],[{name:'吉林'},{name:'江西',value:95}],[{name:'吉林'},{name:'辽宁',value:892}],[{name:'吉林'},{name:'内蒙古',value:121}],[{name:'吉林'},{name:'宁夏',value:31}],[{name:'吉林'},{name:'青海',value:6}],[{name:'吉林'},{name:'山东',value:137}],[{name:'吉林'},{name:'山西',value:62}],[{name:'吉林'},{name:'陕西',value:41}],[{name:'吉林'},{name:'上海',value:64}],[{name:'吉林'},{name:'四川',value:4626}],[{name:'吉林'},{name:'天津',value:34}],[{name:'吉林'},{name:'西藏',value:null}],[{name:'吉林'},{name:'新疆',value:null}],[{name:'吉林'},{name:'云南',value:210}],[{name:'吉林'},{name:'浙江',value:110}],[{name:'吉林'},{name:'重庆',value:387}]],
[[{name:'黑龙江'},{name:'安徽',value:148}],[{name:'黑龙江'},{name:'北京',value:382}],[{name:'黑龙江'},{name:'福建',value:171}],[{name:'黑龙江'},{name:'甘肃',value:37}],[{name:'黑龙江'},{name:'广东',value:1020}],[{name:'黑龙江'},{name:'广西',value:33}],[{name:'黑龙江'},{name:'贵州',value:105}],[{name:'黑龙江'},{name:'海南',value:97}],[{name:'黑龙江'},{name:'河北',value:136}],[{name:'黑龙江'},{name:'河南',value:43}],[{name:'黑龙江'},{name:'黑龙江',value:22974}],[{name:'黑龙江'},{name:'湖北',value:341}],[{name:'黑龙江'},{name:'湖南',value:103}],[{name:'黑龙江'},{name:'吉林',value:258}],[{name:'黑龙江'},{name:'江苏',value:70}],[{name:'黑龙江'},{name:'江西',value:131}],[{name:'黑龙江'},{name:'辽宁',value:1324}],[{name:'黑龙江'},{name:'内蒙古',value:171}],[{name:'黑龙江'},{name:'宁夏',value:39}],[{name:'黑龙江'},{name:'青海',value:6}],[{name:'黑龙江'},{name:'山东',value:310}],[{name:'黑龙江'},{name:'山西',value:32}],[{name:'黑龙江'},{name:'陕西',value:84}],[{name:'黑龙江'},{name:'上海',value:81}],[{name:'黑龙江'},{name:'四川',value:1626}],[{name:'黑龙江'},{name:'天津',value:74}],[{name:'黑龙江'},{name:'西藏',value:0}],[{name:'黑龙江'},{name:'新疆',value:0}],[{name:'黑龙江'},{name:'云南',value:152}],[{name:'黑龙江'},{name:'浙江',value:107}],[{name:'黑龙江'},{name:'重庆',value:65}]]
]
}*/
var legendData=[];
var seriesData=[];
if(data!=null && data['series'].length>0){
legendData=data['legen']; 
for(var j=1;j<data['legen'].length;j++){
var val = data['legen'][j];
option.legend.selected[val] = false;
}
seriesData.push({
'name': '全国',
'type': 'map',
'roam': true,
'hoverable': false,
'mapType': 'china',
'itemStyle':{
'normal':{
'borderColor':'rgba(100,149,237,1)',
   'borderWidth':'0.5',
   'areaStyle':{
    'color': '#1b1b1b'
   }
}
},
'data':[],
/*'tooltip' : {
'show': true,
   'trigger': 'item',
   'formatter': '{b}'
},*/
'markLine' : {
'smooth':true,
   'symbol': ['none', 'circle'],  
   'symbolSize' : '1',
   'itemStyle' : {
    'normal': {
        'color':'#fff',
           'borderWidth':'1',
           'borderColor':'rgba(30,144,255,0.5)'
    }
    },
    'data' : data['markLine']
},
'geoCoord': {
'北京': [116.4038740000,39.9148890000],
'天津': [117.2108130000,39.1439300000],
'河北': [117.2202970000,39.1731490000],
'山西': [112.5154960000,37.8665660000],
'内蒙古': [114.4158680000,43.4682380000],
'辽宁': [122.7535920000,41.6216000000],
'吉林': [126.5645440000,43.8719880000],
'黑龙江': [128.0474140000,47.3565920000],
'上海': [121.4878990000,31.2491620000],
'江苏': [119.3684890000,33.0137970000],
'浙江': [119.9572020000,29.1594940000],
'安徽': [117.2160050000,31.8592520000],
'福建': [117.9849430000,26.0501180000],
'江西': [115.6760820000,27.7572580000],
'山东': [118.5276630000,36.0992900000],
'河南': [101.5563070000,34.5113900000],
'湖北': [112.4105620000,31.2093160000],
'湖南': [111.7206640000,27.6958640000],
'广东': [113.3948180000,23.4080040000],
'广西': [108.9242740000,23.5522550000],
'海南': [106.9253970000,39.2962090000],
'重庆': [106.5306350000,29.5446060000],
'四川': [102.8991600000,30.3674810000],
'贵州': [106.7349960000,26.9028260000],
'云南': [101.5929520000,24.8642130000],
'西藏': [89.1379820000,31.3673150000],
'陕西': [109.5037890000,35.8600260000],
'甘肃': [102.4576250000,38.1032670000],
'青海': [96.2025440000,35.4997610000],
'宁夏': [106.1554810000,37.3213230000],
'新疆': [85.6148990000,42.1270010000],
}
});      
for(var i=0,len=data['series'].length;i<len;i++){
seriesData.push({
'name':legendData[i],
'type': 'map',
'mapType': 'china',
'data':[],
   /*'tooltip' : {
    'show': true,
       'trigger': 'item',
       'formatter': '{b}'
   },*/
'markLine' : {
'smooth':true,
   'effect' : {
    'show': true,
       'scaleSize': '1',
       'period': '30',
       'color': '#fff',
       'shadowBlur': '10'
   },
   'itemStyle' : {
    'normal': {
       'borderWidth':'1',
       'lineStyle': {
        'type': 'solid',
           'shadowBlur': '10'
       },
       'label':{
       show:true,
//formatter: '{b}'
}
    }
    },
    'data':data['series'][i]  
}    
});
}
}
option.legend.data=legendData;
option.series=seriesData;
myChart.setOption(option);
//myChart.setSeries(seriesData);
//myChart.setOption({tooltip : {trigger : 'item',formatter: '{b}'}}); 
}
});
}
var option = {
   backgroundColor: '#1b1b1b',
   color: ['gold','aqua','lime'],
   title : {
       text: '一卡双号',
       //subtext:'数据纯属虚构',
       x:'center',
       textStyle : {
           color: '#fff'
       }
   },
tooltip : {
show: true,
trigger: 'item',
formatter: '{b}'
},
   legend: {
       orient: 'vertical',
       x:'left',
       data:[],
       selectedMode: 'single',
       selected:{},
       textStyle : {
           color: '#fff'
       }
   },
   dataRange: {
       x : 'left',
       min : 0,
       max : 1000,
       calculable : true,
       color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
       textStyle:{
           color:'#fff'
       }
   },
   series : []
};
</script>

加载中
0
永和
永和
@Kener-林峰 不做客服好久了吧 
L
Luuvy
这样啊,不知道呢,那你们给我指导指导吧。
0
纠结名字
其实我更想问@Kener-林峰 ,echarts到底算是百度的开源作品,还是@Kener-林峰 的。如果是百度的,听说@Kener-林峰 已经离职,是否还会义务帮大家解决一些echarts相关的难题。
0
Kener-林峰
Kener-林峰

issue hi群,还有一个团队在维护,放心

b
bobkingdom
是百度hi群么?求个QQ号,有echarts问题请教
0
L
Luuvy

正确的如下:

<script type="text/javascript">
$(function(){
getProvList();
echarone();
})
function changeArea(){
//var name = $("#Yreseller").find("option:selected").text();
var pId = $("#province").val();
setMap(pId);
}
require.config({
    paths: {
        echarts: '<%=path%>/channel/echarts/build/source'
       }
   });
   var echarone = function(){
    require(
    [
        'echarts',   
           'echarts/chart/map'   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
       ],
           function (ec) {
               setMap("821,822,823");
           }
);
}
function setMap(obj){
var myChart = require('echarts').init(document.getElementById('main'));
   var url = '<%=path%>/com.asiainfo.module.YiKaShuangHaoModule.getMapValueList.db(report).invoke?serial=' +(new Date().getTime())+'&prvnceId='+obj;
$.ajax({        
url:url,
data:{},
dataType:'json',
success : function(result){
data = result.json;
var legendData=[];
var seriesData=[];
if(data!=null && data['series'].length>0){
legendData=data['legen']; 
for(var j=1;j<data['legen'].length;j++){
var val = data['legen'][j];
option.legend.selected[val] = false;
}
seriesData.push({
           name: '全国',
           type: 'map',
           roam: true,
           hoverable: false,
           mapType: 'china',
           itemStyle:{
               normal:{
                   borderColor:'rgba(100,149,237,1)',
                   borderWidth:0.5,
                   areaStyle:{
                       color: '#1b1b1b'
                   }
               }
           },
           data:[],
           markLine : {
               smooth:true,
               symbol: ['none', 'circle'],  
               symbolSize : 1,
               itemStyle : {
                   normal: {
                       color:'#fff',
                       borderWidth:1,
                       borderColor:'rgba(30,144,255,0.5)'
                   }
               },
               data : data['markLine'],
           },
           geoCoord: {
                '北京': [116.4038740000,39.9148890000],
               '天津': [117.2108130000,39.1439300000],
               '河北': [117.2202970000,39.1731490000],
               '山西': [112.5154960000,37.8665660000],
               '内蒙古': [114.4158680000,43.4682380000],
               '辽宁': [122.7535920000,41.6216000000],
               '吉林': [126.5645440000,43.8719880000],
               '黑龙江': [128.0474140000,47.3565920000],
               '上海': [121.4878990000,31.2491620000],
               '江苏': [119.3684890000,33.0137970000],
               '浙江': [119.9572020000,29.1594940000],
               '安徽': [117.2160050000,31.8592520000],
               '福建': [117.9849430000,26.0501180000],
               '江西': [115.6760820000,27.7572580000],
               '山东': [118.5276630000,36.0992900000],
               '河南': [101.5563070000,34.5113900000],
               '湖北': [112.4105620000,31.2093160000],
               '湖南': [111.7206640000,27.6958640000],
               '广东': [113.3948180000,23.4080040000],
               '广西': [108.9242740000,23.5522550000],
               '海南': [106.9253970000,39.2962090000],
               '重庆': [106.5306350000,29.5446060000],
               '四川': [102.8991600000,30.3674810000],
               '贵州': [106.7349960000,26.9028260000],
               '云南': [101.5929520000,24.8642130000],
               '西藏': [89.1379820000,31.3673150000],
               '陕西': [109.5037890000,35.8600260000],
               '甘肃': [102.4576250000,38.1032670000],
               '青海': [96.2025440000,35.4997610000],
               '宁夏': [106.1554810000,37.3213230000],
               '新疆': [85.6148990000,42.1270010000],
}
       });       
for(var i=0,len=data['series'].length;i<len;i++){
seriesData.push({
           name: legendData[i],
           type: 'map',
           mapType: 'china',
           data:[],
           markLine : {
               smooth:true,
               effect : {
                   show: true,
                   scaleSize: 1,
                   period: 30,
                   color: '#fff',
                   shadowBlur: 10
               },
               itemStyle : {
                   normal: {
                       borderWidth:1,
                       lineStyle: {
                           type: 'solid',
                           shadowBlur: 10
                       }
                   }
               },
               data : data['series'][i]  
           },
           markPoint : {
               symbol:'emptyCircle',
               symbolSize : function (v){
                   return 10 + v/1000
               },
               effect : {
                   show: true,
                   shadowBlur : 0
               },
               itemStyle:{
                   normal:{
                       label:{show:false}
                   },
                   emphasis: {
                       label:{position:'top'}
                   }
               },
               data : []
           }
   });
}
option.legend.data=legendData;
myChart.setOption(option);
myChart.setSeries(seriesData);
}
}
});
}
function getProvList(id){
var op=""; 
var url = '<%=path%>/com.asiainfo.module.YiKaShuangHaoModule.getProvList.db(report).invoke?serial=' +(new Date().getTime());
$.ajax({
url:url,
dataType:'json',
success : function(req){
   var list=req.list;
for(var i=0;i<list.length;i++){
op += "<option id='"+list[i].ORDER_NO+"' value='"+list[i].PRVNCE_ID+"'>"+list[i].AREA_NM+"</option>"
}
$("#province").append(op);
}
});
}
var option = {
   backgroundColor: '#1b1b1b',
   color: ['gold','aqua','lime'],
   title : {
       text: '一卡双号',
       //subtext:'数据纯属虚构',
       x:'center',
       textStyle : {
           color: '#fff'
       }
   },
   tooltip : {
       trigger: 'item',
       formatter: '{b}'
   },
   legend: {
       orient: 'vertical',
       x:'left',
       data:[],
       selectedMode: 'single',
       selected:{},
       textStyle : {
           color: '#fff'
       }
   },
   dataRange: {
       x : 'left',
       min : 0,
       max : 1000,
       calculable : true,
       color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
       textStyle:{
           color:'#fff'
       }
   },
   series : []
};
</script>

返回顶部
顶部