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

news2024/9/24 17:17:34

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>