因为echarts5没有china.js文件了,所以使用了4.9版本。4.9版本用了visualMap属性渲染地图,但是tooltip就用不了,为了解决这个问题两个方案,1:升级echarts版本,2:想办法在4.9版本上使用tooltip。
1:升级到echarts5之后,引入了China.js放到src/assets下面,不知道为啥一直报map没有引入。
问题如下:----未解决
2:想了个歪招,保留visualMap,将他的颜色置为透明,使用geo和series一起渲染地图,这样既可以保留tooltip还可以使用geo.regions。刚开始有个误导思想,以为统一赋值areaColor,就不能使用visualMap,然后只能用geo渲染地图。还是自己没捋明白。
效果如下:
#china_map_box{
width: 100%;
height: 100%;
position:relative
}
.map-legend{
position: absolute;
left: 0.3rem;
bottom: .5rem;
}
.map-tip{
font-size:.16rem ;
color:#93A7BD
}
.map-item{
font-size:.14rem ;
color:#93A7BD
}
.map-sq{
display:inline-block;
width: 0.3rem;
height:0.2rem;
border-radius: 2px;
background-color: #002823;
margin-top: .2rem;
margin-right:0.1rem
}
.squ1{
border:3px solid #002823
}
.squ2{
border:3px solid #03674E
}
.squ3{
border:3px solid #747517
}
.squ4{
border:3px solid #91411B
}
#china_map {
width: 100%;
height: 100%;
pointer-events: auto
}
.tooltip{
width: 3px;
height: 12px;
background: #00FFFF;
border-radius: 2px;
display: inline-block;
margin-right: 5px;
}
.tooltip_right{
color:#C3E6FE;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
margin-left: 10px;
}