vue+echarts踩过的坑

vue+echarts踩过的坑

文字显示居中：可以修改label的padding（只限修改个别地区）
地图只显示某一部分地区
用到了geo中regions（用了一整张中国地图，放大这四个地区某个中心点）
geo: {
map: “china”,
mapLocation: {
x: ‘center’
},
center: [“115.892151”, “28.676493”],
zoom:4.8,
label: {
normal:{
show:false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: “#fff”, //地图默认的背景颜色
borderColor: “#fff”,//地图默认的边线颜色,
opacity:0
},
emphasis: {
areaColor: “#fff”,//地图触发地区的背景颜色
}
},
regions: [
{
name: “浙江”,
label: {
normal:{
show:true,
fontSize:16,
color:’#fff’,
padding:[100,4,4,4]
},
emphasis: {
show: true
},
// label:{
// formatter:’{b}’,
// }
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:’#fff’,
opacity:1
},
emphasis: {
areaColor: “orange”, //地图触发地区的背景颜色
borderWidth:4,
borderColor:’#fff’,
}
}
},
{
name: “江西”,
label: {
normal:{
show:true,
fontSize:16,
color:’#fff’,
padding:[100,20,4,4]
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:’#fff’,
opacity:1
},
emphasis: {
areaColor: “orange”, //地图触发地区的背景颜色
borderWidth:4,
borderColor:’#fff’
}
}
},
{
name: “福建”,
label: {
normal:{
show:true,
fontSize:16,
color:’#fff’,
padding:[0,70,0,0]
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:’#fff’,
opacity:1
},
emphasis: {
areaColor: “orange”, //地图触发地区的背景颜色
borderWidth:4,
borderColor:’#fff’
}
}
},
{
name: “上海”,
label: {
normal:{
show:true,
fontSize:10,
color:’#fff’,
padding:[15,0,0,0]
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: “#1FB2A8”,
borderWidth:4,
borderColor:’#fff’,
opacity:1
},
emphasis: {
areaColor: “orange” ,//地图触发地区的背景颜色
borderWidth:4,
borderColor:’#fff’
}
}
}
]
},
series: [
{
type: ‘map’,
coordinateSystem: ‘geo’,
},
{
type: ‘map’,
geoIndex: 0,
data:datass
}
],
显示问题
formatter: function (params) {
// console.log(params)
var res=’’;
var name=’’;
for (var i = 0; i < datass.length; i++) {
if (datass[i].name == params.name) {
name=<p class="big">+datass[i].name+</p>
if(datass[i].value==’’){
res=’’
}else{
datass[i].value.forEach(element => {
res+=<p class="small">+element+</p>
});
}
}
}
return name+res
},
y轴显示百分号
axisLabel: {
formatter: ‘{value}%’
}