echarts生成湖南省地图
利用echarts生成湖南省地图,默认选中长沙市,点击各市可切换选中的市,选中的市会高亮显示。注意:益阳市名称显示有点偏差,应该是我那个json文件数据导致的,各位重新去找一份地图的json数据就行。我的json数据来自于:http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999
·
利用echarts生成湖南省地图,默认选中长沙市,点击各市可切换选中的市,选中的市会高亮显示。
注意:益阳市名称显示有点偏差,应该是我那个json文件数据导致的,各位重新去找一份地图的json数据就行。
我的json数据来自于:http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
地图生成代码参考:https://blog.csdn.net/weixin_41187842/article/details/81220293
我的效果图如下:
主要代码如下:
// 初始化湖南地图
initHunanMap() {
var that = this
echarts.registerMap('hunan', hunanMapData);
console.log('湖南的数据:',hunanMapData)
this.$nextTick(function() {
setTimeout(function(){
var myChart = echarts.init(document.getElementById('hunanMap'));
that.option = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>'
},
series: [
{
type: 'map',
mapType: 'hunan',
label: {
show: true
},
itemStyle: {
normal: {
borderColor: '#4a86fd', //区域边框颜色
areaColor: '#bfdfe0', //区域填充颜色
},
emphasis: { //鼠标事件区块样式
areaColor: '#4380fd',
borderWidth: 0
}
},
data: [
{name: that.cityName, selected: true} // 选中某市
]
}
]
}
myChart.setOption(that.option);
myChart.on('click', function(params) {
var country = params
var countryCode = null
that.cityName = params.name
for (var i = 0; i < that.hunnaShiMap.length; i++) {
if (params.name == that.hunnaShiMap[i].name) {
countryCode = that.hunnaShiMap[i].code
}
}
// 切换选中的区域(高亮)
that.option.series[0].data[0]={
name: params.name, selected: true
}
myChart.setOption(that.option);
that.currentIndex = 0
server.getInvestmentEnvironmentInfo(countryCode).then(function(res){
if (res.data) {
that.cityDes={
physicalGeography: res.data.physicalGeography,
infrastructure: res.data.infrastructure,
economicDevelopment: res.data.economicDevelopment
}
that.desc=res.data.physicalGeography
} else {
that.desc= ''
}
})
})
}, 500 )
});
}
mounted:function(){
this.initHunanMap();
}
更多推荐
已为社区贡献1条内容
所有评论(0)