需求:
在echarts地图开发中,有时候需要点击某个省份的时候,地图变成当前省份的下级地图。
问题:
在海南岛点击下钻时,由于海南岛的三沙市是由很多岛屿组成(南海诸岛),而地图下钻会默认视图区域自适应,就会导致下面的情况:
通过实验发现,主要地区会挤在一起,正常情况下,应该是展示中间的大岛屿,而三沙市(南海诸岛)只需展示部分即可
解决:
option = { ... } //对echarts的一些设置 //由于海南地图包括南海及南海诸岛在内的大片区域,所以显示海南地图时,要将地图放大,并设置海南岛居中显示 if ($this.parmet.province === '海南省') { option.geo.center = [109.844902, 19.0392];//中心位置 option.geo.layoutCenter = ['50%', '40%'];//地图相对容器偏移 option.geo.layoutSize = "380%";//地图放大比例 } else { //非显示海南时,将设置的参数恢复默认值 option.geo.center = undefined; option.geo.layoutCenter = undefined; option.geo.layoutSize = undefined; } myChart.setOption(option);
效果图:
如果位置要求不一的话,可以调整上面if(){}
中的相应部分代码