当前位置：首页 > news >正文

vue3+echart绘制中国地图并根据后端返回的坐标实现涟漪动画效果

news 2025/8/4 1:50:58

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)).dataconst 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.commNamechild.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>