之前写过一篇文章,是关于中国地图的展示。
vue+echarts.js 实现中国地图——根据数值表示省份的深浅——技能提升:http://t.csdn.cn/rfQGl
最后实现的效果如下图所示:
今天遇到一个需求,就是实现中国地图和世界地图的切换。
import regions from '@/utils/china'; //地图的数据,参考上一篇管理地图数据的博文,格式跟文中的一致
import regionsWorld from '@/utils/world'; //地图的数据,参考上一篇管理地图数据的博文,格式跟文中的一致
var chart = this.$echarts.init(document.getElementById('Map'));
if(this.type==2){
this.$echarts.registerMap('world', regionsWorld); // 注册矢量地图数据
}else{
this.$echarts.registerMap('china', regions); // 注册矢量地图数据
}
getProvinceDataAll().then((res) => {//这个接口是为了拿全中国的数据,需要替换成自己的数据来源
console.log('maxArr', maxArr);
var option = {
backgroundColor: '#fff', //画布背景颜色
tooltip: {
show: true,
trigger: 'item',
formatter: (data) => {
return `${data}
`;
},
data: maxArr,
},
visualMap: {
min: 0,
max: maxArr[0].value,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#8dc1f1', '#0e31a4'],
},
textStyle: {
color: '#333',
},
left: 20,
bottom: 10,
},
series: [
{
name: '浏览量',
type: 'map',
map: this.type==2?'world':'china',
geoIndex: 0,
tooltip: { show: false },
label: {
normal: {
formatter: '{b}\r\n{c}',
position: 'right',
show: false,
},
emphasis: {
show: true,
},
},
data: maxArr,
},
],
};
chart.setOption(option);
});
中国地图数据js来源:获取中国地图数据js的链接:http://t.csdn.cn/sav3s 备注:china.js
世界地图数据js来源:获取中国地图数据js的链接:http://t.csdn.cn/sav3s 备注:world.js
完成!!!多多积累,多多收获!