你好:
我想实现这个鼠标悬浮的提示效果,下图是我根据官网例子做出来的,但这个鼠标悬浮提示效果没显示,本地代码附上,麻烦给指导一下。谢谢!
<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>
issue hi群,还有一个团队在维护,放心
正确的如下:
<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>