1.效果图
2.前期准备
main.js
app.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL',
// v:'3.0', // 默认使用3.0
// type: 'WebGL' // ||API 默认API (使用此模式 BMap=BMapGL)
});
index.html
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL"></script>
<div>
<div id="main6"
style="width:650px;height:400px;"></div>
</div>
3.js,注意:import 'echarts/map/js/china.js'; 引入时需要注意当前echart是否为4.+版本,如否降级
npm install echarts@4.1.0 --save
<script setup>
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import {onMounted,defineProps} from 'vue';
import 'echarts/map/js/china.js'; //关键引入china.js
const props = defineProps(['data'])
var initData = JSON.parse(JSON.stringify(props)).data
const initMap = () =>{
var chartDom = document.getElementById('main6');
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: 'rgba(0,0,0,.1)',
title: {
text: '当前服务地区',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
geo: { //绘制中国地图
map: 'china',//关键必须写
zoom: 10,//地图缩放比例
center: [120.22221, 30.2084],//地图位置
roam: true, //是否允许鼠标放大缩小,拖拽功能
itemStyle: { //地图省份的样式;包括板块颜色和边框颜色
areaColor: 'rgba(0,0,0,.5)', //地图区域的颜色
borderColor: "#ffffff", //地图省份边框颜色
},
label: { //省份字体样式;包括是否展示,字体大小和颜色
normal: {
show:true,
fontSize: "11.5",
color: "rgb(107,102,102)"
}
},
emphasis: { //鼠标划过的高亮设置;包括省份板块颜色和字体等
itemStyle: {
areaColor: '#ffffff',
},
label: {
show: true,
color:"rgb(0,0,0)"
}
}
},
series: [
{
name: '地理坐标',
type: 'effectScatter', //样式,带有涟漪特效动画气泡图
coordinateSystem: 'geo', //该系列使用的坐标系,客官往上看
data:[], // data的数据格式为[{name:'海门',value:['121.15','31.89',200]},{name:'海门111',value:['121.15','31.89',200]}...]
encode: {
value: 2
},
showEffectOn: 'render', //绘制完成后显示特效
rippleEffect: { //涟漪特效相关配置。
brushType: 'stroke' //波纹的绘制方式
},
symbolSize: 10, //标记的大小,可以设置数组或函数返回值的形式
hoverAnimation: true, // 鼠标移入放大圆
label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: { //样式
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
},
emphasis: { //高亮状态下的多边形和标签样式
scale: true
},
zlevel: 1
}
]
};
// 处理数据 将数据转换成echart可以识别的数据格式,例如[{name:'海门',value:['121.15','31.89',200]},{name:'海门111',value:['121.15','31.89',200]}...],详情请查echart地图坐标
let result = []
initData.map((item,index)=> {
let child = {name: '', value:['','']}
child.name = item.commName
child.value[0] = Number(item.mapX)
child.value[1] = Number(item.mapY)
child.value[2] = Number(item.mapY)
result.push(child)
})
option.series[0].data = result
// myChart.registerMap('china', { geoJSON: chinaMap })
option && myChart.setOption(option);
// 窗口自适应
(window.onresize = function () {
myChart.resize();
})
}
onMounted(() => {
initMap()
})
</script>
4.end:本人查阅资料百度花了大量时间,资料都是大同小异,由于自己过于浮躁,对资料研究不彻底,只想着复制粘贴完事,导致出现问题就换一个案例,并没有查找bug的原因,还需静下心来,踩过的坑希望老铁们直接跳过。