echarts4.9版本geo地图,regions渲染不同颜色的省际线,鼠标移入出现浮窗

400 阅读1分钟

因为echarts5没有china.js文件了,所以使用了4.9版本。4.9版本用了visualMap属性渲染地图,但是tooltip就用不了,为了解决这个问题两个方案,1:升级echarts版本,2:想办法在4.9版本上使用tooltip。 1:升级到echarts5之后,引入了China.js放到src/assets下面,不知道为啥一直报map没有引入。 问题如下:----未解决 e9c46b701eef2423158764d4681d518.jpg 2:想了个歪招,保留visualMap,将他的颜色置为透明,使用geo和series一起渲染地图,这样既可以保留tooltip还可以使用geo.regions。刚开始有个误导思想,以为统一赋值areaColor,就不能使用visualMap,然后只能用geo渲染地图。还是自己没捋明白。 效果如下:

image.png #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; }