Echarts引入省级地图(简便快捷,以浙江省为例)

tech2023-01-20  135

Echarts引入省级地图(简便快捷,以浙江省为例)

最近需求,利用echarts地图显示浙江省行政区。一开始找了很多资料,但是一直没法实现,也不知道为什么。网上的办法试了个遍,老是不成功。总感觉打开方式不对。不过真的感觉要用GeoJson真的是很麻烦,直到我看到了一篇博文,哈哈哈,博主的吐槽深得我意。 接下来,就是见证奇迹的时刻。哈哈哈哈

initZheJiang () { let mychart = this.$echarts.init(document.getElementById('mychart')) window.addEventListener('resize', function () { this.mychart.resize() }) // 绘制图表 mychart.setOption({ backgroundColor: '#404a59', title: { text: '浙江', top: 25, left: 'center', textStyle: { fontSize: 25, fontWeight: 650, color: '#fff' } }, tooltip: { trigger: 'item', formatter: function (val) { return val.data.name + '<br>宅基地审批: ' + val.data.value + '户' } }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, series: [ { type: 'map', map: '浙江', mapType: '浙江',//这个地方是重点, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d', label: { show: true, color: 'white' }, } }, // 是否开启鼠标缩放和平移漫游 默认不开启 roam: true, top: 70, label: { show: true // 是否显示对应地名 }, data: this.cityDatas }], }) },

你想要的省级Js、Json文件,node_modules全都有。惊不惊喜,意不意外。 当然不要忘了在主文件中引入文件,这里我用JS的方式,其他的方法敬请期待之后的文章。

import echarts from ‘echarts’; import ‘…/node_modules/echarts/map/js/province/zhejiang.js’;

参考 指路那篇深得我意的博文,博主把我想吐槽的全给说了,哈哈哈哈哈:https://blog.csdn.net/m0_37723113/article/details/81282205.

嘻嘻,我的下一篇文章讲得也很详细哦,引用下载下来的json文件,欢迎围观。https://blog.csdn.net/weixin_44272792/article/details/108880952

最新回复(0)