echarts生成湖南省地图

利用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 = thisecharts.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 = paramsvar countryCode = nullthat.cityName = params.namefor (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 = 0server.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();
}

echarts生成湖南省地图相关推荐

如何在echarts生成得到地图上添加标记
在echarts生成的图形上如果利用本地的图片达到标记的效果想要达到的效果 1.首先我们可以在全局先把这个图片引进来 2.在我们的那个生成图形的方法里面可以这样 let markImg='image ...
Echarts生成广东省地图
前一段时间因为业务问题需要生成地图数据,所以使用了Echarts来作为生成的工具,以下是相关的一些使用经验: 首先Jsp页面: <div class="map-box" id ...
echarts生成json地图最简单代码
只需要替换到相对应的json文件即可. 全国各省市地json文件:https://download.csdn.net/download/weixin_38959210/10543965 全世界各国家地 ...
使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图效果准备资料第三方插件 <script type="tex ...
用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GI ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
解决echarts在平移和缩放中国地图后，下钻到下一级具体省份地图时生成的地图不在容器中间，会跑到容器外面去。
问题: echart地图三级下钻地图在平移和缩放后,点击到省,由于中心点的偏移,该省市区地图跑到容器以外的地方去了,导致新生成的地图看不见解决方法: 后来发现,是重新绘制图表的时候需要: myCha ...
关于echarts生成地图的二三事
1.地图数据的获取中国地图及各省市县地图可在地图选择器(数据来源于高德开放平台) 选择需要的区域,右方可下载其JSON API格式的数据. 2.地图的编辑特定需求下需要对原有地图数据进行修改,如: ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...

echarts生成湖南省地图

echarts生成湖南省地图相关推荐

最新文章

热门文章