1.echarts地图不显示，只显示上面的图标。
这个问题很头大，一开始当我从官网把示例copy下来运行发现，中国地图没有显示，只显示在地图上标注各个城市位置的图标，上网查了才知道，原来是因为我没有引入china.js中国地图这个js文件才导致的地图没有加载出来，把这个js引入就可以了。现在由于官网不提供下载可以直接引入这个地址来获取china.js文件：
<script type="text/javascript" src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>2.echarts地图的颜色没有根据值映射相应的颜色。
随着上面问题的解决~~新问题又来了。引入china.js文件后如图所示：
但是官网给的例子却是下面这样的：
可以发现我自己做的地图没有根据value值出现渐变颜色而是灰色的。。。这个问题其实是echarts.min.js源文件的问题，当时我在官网下载这个源文件时选择的是常用的js版本~~里面只有一些常用的饼，折，柱形图，并没有地图类的代码，所以我又去官网下载个完整版的echarts源文件替换时终于解决了~~
3.鼠标悬浮省份上时显示信息的自定义。
当我们鼠标悬浮在某个省时，需要显示该省的一些业务信息，这时，就需要用到formatter函数来自定义显示内容，如下：
tooltip:{
trigger:'item',
formatter:function(params,ticket,callback){
var hoverMessage = params.data;
//console.log(params);
//console.log(hoverMessage);
return '缴费总额：'+hoverMessage.value+'<br>'+'支付总额：'+hoverMessage.zhifu+'<br>'+'资产总净值：'+hoverMessage.jingzhi;
}
}以上的是直接在前台写的死数据显示出来的东西，下面我贴一下我通过ajax从后台获取相关数据并显示的代码：
var echartsMap = echarts.init(document.getElementById("piccEchartsMap"));
//数据查询
$.ajax({
url : '../../public.asp',
type : 'post',
data : {
funcId : "tabulateDataMap",
},
dataType:'json',//接受数据格式
success : function(data) {
if(data.err_code==""){
var dataArr = [];//全部数据
var bufenArr = [];//资产总净值数据
for(var i=0;i<data.items.length;i++){
var dataName = data.items[i].AccMngName.substr(0,2);
var organizationName=data.items[i].AccMngName
if(dataName=="中央"){
dataName = '北京';
}
if(organizationName=="北京市社会保险经办机构1"){
organizationName = '北京市社会保险经办机构';
}
if(dataName=="内蒙"){
dataName = '内蒙古';
}
if(dataName=="黑龙"){
dataName = '黑龙江';
}
bufenArr.push({//省份的数据
name:dataName,
value:data.items[i].Totalfundshare,
})
dataArr.push({//每个标记的数据
name:dataName,
accMngName:organizationName,
value:data.items[i].Totalfundshare,
beforeTaxMoney:data.items[i].BeforeTaxMoney,
cashaMount:data.items[i].CashaMount,
})
}
echartsMapFun(dataArr);//初始化地图
echartsMap.setOption({//填入数据
series : [{
name: 'categoryA',
type: 'map',
geoIndex: 0,
// tooltip: {show: false},
data:bufenArr
}]
})
}else{
$.messager.alert('错误',data.err_message,'error');
}
},
failure : function(data) {
$.messager.alert('错误','初始化数据失败！','error');
}
});
var geoCoordMap = {//各省市机构经纬度
'山东省社会保险经办机构':[120.38,37.35],
'黑龙江省社会保险经办机构':[123.97,47.33],
'宁夏回族自治区社会保险经办机构':[106.26667,38.46667],
'甘肃省社会保险经办机构':[102.188043,38.520089],
'福建省社会保险经办机构':[118.58,24.93],
'西藏自治区社会保险经办机构':[91.11,29.97],
'上海市社会保险经办机构':[121.48,31.22],
'四川省社会保险经办机构':[101.718637,26.582347],
'广东省社会保险经办机构':[113.23,23.16],
'山西省社会保险经办机构':[112.53,37.87],
'云南省社会保险经办机构':[102.73,25.04],
'陕西省社会保险经办机构':[108.72,34.36],
'海南省社会保险经办机构':[110.35,20.02],
'辽宁省社会保险经办机构':[121.62,38.92],
'辽宁省社会保险经办机构':[123.38,41.8],
'吉林省社会保险经办机构':[125.35,43.88],
'江西省社会保险经办机构':[115.89,28.68],
'广西壮族自治区社会保险经办机构':[109.4,24.33],
'青海省社会保险经办机构':[101.74,36.56],
'内蒙古自治区社会保险经办机构':[111.65,40.82],
'湖南省社会保险经办机构':[110.479191,29.117096],
'重庆市社会保险经办机构':[106.54,29.59],
'江苏省社会保险经办机构':[118.78,32.04],
'贵州省社会保险经办机构':[106.71,26.57],
'新疆维吾尔自治区社会保险经办机构':[84.77,45.59],
'北京市社会保险经办机构':[116.46,39.92],
'中央国家机关养老保险管理中心':[116.86,40.22],
'新疆生产建设兵团社会保险经办机构':[87.68,43.77],
'浙江省社会保险经办机构':[120.19,30.26],
'天津市社会保险经办机构':[117.2,39.13],
'河南省社会保险经办机构':[113.65,34.76],
'河北省社会保险经办机构':[114.48,38.03],
'湖南省社会保险经办机构':[113,28.21],
'安徽省社会保险经办机构':[117.27,31.86],
'湖北省社会保险经办机构':[114.31,30.52],
};
function echartsMapFun(data){
echartsMap.setOption({
tooltip:{
trigger:'item',
formatter:function(params,ticket,callback){//自定义鼠标悬浮框内的数据内容与格式
var hoverMessage = params.data;
var paymentAmount = hoverMessage.beforeTaxMoney;//支付总额
var totalNetAssetValue = hoverMessage.cashaMount;//缴费总额的值
var totalPayment = hoverMessage.totalfundshare;//资产总净值
//console.log(params);
//console.log(hoverMessage);
if(totalNetAssetValue==undefined||totalNetAssetValue==null&&paymentAmount==undefined||paymentAmount==null){
return '';//使鼠标悬浮在省份上时不显示悬浮框内的信息
}else{//鼠标悬浮在标记上时显示该省份的信息
return '缴费总额：'+totalPayment+'<br>'+'支付总额：'+paymentAmount+'<br>'+'资产总净值：'+totalNetAssetValue;
}
}
},
visualMap: {
min: 0,
max: 4500,
left: 'left',
top: 'bottom',
inRange: {
color: ['#e0ffff', '#006edd']
},
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgb(0,0,0)'//地图上各省会颜色样式
}
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type: 'scatter',//散点图类型
name:'scatterMap',
coordinateSystem: 'geo',
data:scatterData(data),//加载标记的数据
symbolSize: 20,//小标记的图片大小
symbol: 'image://../../css/images/address.png',//小标记的图片路径
symbolRotate: 5,//小标记的图片角度
label: {
normal: {
formatter: '{b}',
position: 'right',
color:'#000',//鼠标悬浮上标记时显示名称的颜色
fontWeight:'bold',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
},
{
name: 'categoryA',
type: 'map',
geoIndex: 0,
// tooltip: {show: false},
data:[]
}
]
});
}
function scatterData(data){
if(data==undefined||data==""||data==null){
return false;
}
var dataItems = data;
for(var j=0;j<dataItems.length;j++){
dataItems[j]['totalfundshare']=dataItems[j]['value'];
//增加一个新的属性totalfundshare,因为散点图标记的value值只能为该点的经纬度，不然标记会不显示
}
//console.log(dataItems);
var res = [];//承载标记上的数据数组
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[dataItems[i].accMngName];
var geoZhifu = dataItems[i].beforeTaxMoney;
var geoJiaofei = dataItems[i].cashaMount;
var geoJingzhi = dataItems[i].totalfundshare;
if (geoCoord) {
res.push({
name: dataItems[i].accMngName,
value: geoCoord.concat(),
beforeTaxMoney:geoZhifu,
cashaMount:geoJingzhi,
totalfundshare:geoJiaofei,
});
}
}
console.log(res);
return res;
}
最后附上china.js文件的下载地址：www.webmq.cn/echarts-master.zip
还有做echarts地图散点图的文章：http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
