utf-8格式下地图不显示怎么解决echarts 柱状配置项内容和展示
在utf-8格式下的页面地图不显示出来，其他图表没问题，报错Uncaught TypeError: Cannot read property 'getGeoJson' of undefined 把utf-8格式改为gkb格式，然后再改为utf-8格式地图出来了，但是全部图表都是乱码。。地图也是错乱的，如何解决？？ 注：单独项目没问题，就是放进另一个项目才出问题。另一个项目原本是gbk格式，已给我改为utf-8格式。
配置项如下
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{margin:0;padding:0;background:url(../../../sb_imgs/bg.png);background-size:100%;}
body > div{float:left;width:30%;}
#workload{width:100%;height:250px;border:1px solid #ccc;}
#distribution_information{width:100%;height:250px;border:1px solid #ccc;}
#map{width:100%;height:500px;border-bottom:1px solid #ccc;border-top:1px solid #ccc;}
#praise{width:100%;height:250px;border:1px solid #ccc;}
#early_warning{width:100%;height:250px;border:1px solid #ccc;}
#handle{width:49%;float:left;height:250px;border:1px solid #ccc;}
#wait{width:50%;float:left;height:250px;border:1px solid #ccc;}
</style>
</head>
<body scroll="no">
<div>
<div id="workload"></div>
<div id="distribution_information"></div>
</div>
<div style="width:39%;border:1px solid #ccc;">
<div id="map"></div>
</div>
<div>
<div id="praise"></div>
<div id="early_warning"></div>
</div>
<div style="width:100%;">
<div id="handle"></div>
<div id="wait"></div>
</div>
</body>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="build/dist/echarts.js"></script>
<script type="text/javascript" src="build/dist/jquery.min.js"></script>
<script>
var myChart1 = echarts.init(document.getElementById('workload'));
var myChart2 = echarts.init(document.getElementById('distribution_information'));
var myChart3 = echarts.init(document.getElementById('map'));
var myChart4 = echarts.init(document.getElementById('praise'));
var myChart5 = echarts.init(document.getElementById('early_warning'));
var myChart6 = echarts.init(document.getElementById('handle'));
var myChart7 = echarts.init(document.getElementById('wait'));
//工作量
var option1 = {
title : {
text : '工作量',
x : 'center',
textStyle : {color : '#fff'}
},
color : ['#3398DB'],
tooltip : {
trigger : 'axis',
axisPointer : {type : 'shadow'}
},
xAxis :{
type : 'category',
data : ['窗口1','窗口2','窗口3','窗口4'],
axisTick : {alignWidthLabel : true},
axisLabel : {textStyle : {color : '#fff'}},
axisLine : {lineStyle : {color : '#fff'}}
},
yAxis :{
type : 'value',
name : '工作量',
nameTextStyle : {color : '#fff'},
axisLabel : {textStyle : {color : '#fff'}},
axisLine : {lineStyle : {color : '#fff'}}
},
series : [
{
type : 'bar',
barWidth : '60%',
data : [10,52,200,334]
}
]
}
myChart1.setOption(option1);
//分布信息
var option2 = {
title : {
text : '分布信息',
x : 'center',
textStyle : {color : '#fff'}
},
tooltip : {
trigger : 'item',
formatter : "{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
left: '0',
data : ['分布一','分布二','分布三','分布四','分布五'],
textStyle : {color : '#fff'}
},
series : [
{
type : 'pie',
radius : '55%',
center : ['50%','60%'],
data : [
{value : 335,name : '分布一'},
{value : 310,name : '分布二'},
{value : 234,name : '分布三'},
{value : 135,name : '分布四'},
{value : 1548,name : '分布五'}
],
itemStyle : {
emphasis : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0,0,0,0.5)'
}
}
}
]
}
myChart2.setOption(option2);
//好评率
var option4 = {
title : {
text : '好评率',
x : 'center',
textStyle : {color : '#fff'}
},
tooltip : {
trigger : 'item',
formatter : "{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
left: '0',
data : ['满意','比较满意','一般','不太满意','不满意'],
textStyle : {color : '#fff'}
},
series : [
{
type : 'pie',
radius : '55%',
center : ['50%','60%'],
data : [
{value : 335,name : '满意'},
{value : 310,name : '比较满意'},
{value : 234,name : '一般'},
{value : 135,name : '不太满意'},
{value : 1548,name : '不满意'}
],
itemStyle : {
emphasis : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0,0,0,0.5)'
}
}
}
]
}
myChart4.setOption(option4);
//预警信息
var option5 = {
title : {
text : '预警信息',
x : 'right',
textStyle : {color : '#fff'}
},
tooltip : {formatter : "{c}%"},
series: [
{
type : 'gauge',
detail : {formatter:'{value}%'},
radius : '100%',
data : [{value: 50}]
}
]
}
myChart5.setOption(option5);
//地图
require.config({
paths : {
echarts : 'build/dist'
}
});
require(
[
'echarts',
'echarts/chart/map'
],
function(ec){
var myChart3 = ec.init(document.getElementById('map'));
var cityMap = {
"合肥市" : "340100",
"黄山市" : "341000",
"阜阳市" : "341200",
"宿州市" : "341300",
"滁州市" : "341100",
"安庆市" : "340800",
"蚌埠市" : "340300",
"亳州市" : "341600",
"芜湖市" : "340200",
"马鞍山市" : "340500",
"淮南市" : "340400",
"淮北市" : "340600",
"铜陵市" : "340700",
"六安市" : "341500",
"宣城市" : "341800",
"池州市" : "341700",
"巢湖市" : "341400"
};
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for( var city in cityMap ){
mapType.push(city);
mapGeoData.params[city] = {
getGeoJson : (function(c){
var geoJsonName = cityMap[c];
return function(callback){
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json',callback);
}
})(city)
}
}
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
myChart3.on(ecConfig.EVENT.MAP_SELECTED,function(param){
var mt = param.target;
var len = mapType.length;
var f = false;
for(var i = 0;i < len;i++){
if(mt == mapType[i]){
f = true;
mt = mapType[i];
}
}
if(!f){
mt = '安徽';
}
option.series[0].mapType = mt;
option.title.subtext = mt;
myChart3.setOption(option,true);
});
option = {
title : {
text : '安徽省',
subtext : '安徽',
textStyle : {color : '#fff'}
},
tooltip : {
trigger : 'item',
formatter : '{b}'
},
series : [
{
type : 'map',
mapType : '安徽',
selectedMode : 'single',
itemStyle : {
normal : {
borderWidth : 1,
borderColor : '#fff',
color : '#ccc',
label : {show : true}
},
emphasis : {
borderWidth : 1,
borderColor : '#fff',
color : '#f3d999',
label : {show : true}}
},
data : []
}
]
};
myChart3.setOption(option,true);
}
);
//平均办理时间
var option6 = {
title : {
text : '平均办理时间',
x : 'center',
textStyle : {color : '#fff'}
},
color : ['#3398DB'],
tooltip : {
trigger : 'axis',
axisPointer : {type : 'shadow'}
},
xAxis :{
type : 'category',
data : ['窗口1','窗口2','窗口3','窗口4'],
axisTick : {alignWidthLabel : true},
axisLabel : {textStyle : {color : '#fff'}},
axisLine : {lineStyle : {color : '#fff'}}
},
yAxis :{
type : 'value',
axisLabel : {textStyle : {color : '#fff'}},
axisLine : {lineStyle : {color : '#fff'}}
},
series : [
{
type : 'bar',
barWidth : '30%',
data : [10,52,200,334],
markLine : {
data : [
{
type : 'average',
name : '平均值'
}
]
}
}
]
}
myChart6.setOption(option6);
//平均等候时间
var option7 = {
title : {
text : '平均等候时间',
x : 'center',
textStyle : {color : '#fff'}
},
color : ['#3398DB'],
tooltip : {
trigger : 'axis',
axisPointer : {type : 'shadow'}
},
xAxis :{
type : 'category',
data : ['窗口1','窗口2','窗口3','窗口4'],
axisTick : {alignWidthLabel : true},
axisLabel : {textStyle : {color : '#fff'}},
axisLine : {lineStyle : {color : '#fff'}}
},
yAxis :{
type : 'value',
axisLabel : {textStyle : {color : '#fff'}},
axisLine : {lineStyle : {color : '#fff'}}
},
series : [
{
type : 'bar',
barWidth : '30%',
data : [10,52,200,334],
markLine : {
data : [
{
type : 'average',
name : '平均值'
}
]
}
}
]
}
myChart7.setOption(option7);
</script>
</html>
截图如下
