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

news2024/11/14 5:48:21

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的原因,还需静下心来,踩过的坑希望老铁们直接跳过。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1364818.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

K210基础实验系列

CanMV K210 开发板: CanMV K210 是由 01Studio 设计研发&#xff0c;基于嘉楠科技边缘计算芯片 K210 &#xff08; RSIC V 架构&#xff0c; 64 位双核&#xff09;方案的一款开发板&#xff0c;采用硬件一体化设计&#xff08; K210 核心板、 摄像头、 LCD 集成在一个…

服务器内存不足怎么办?会有什么影响?

服务器内存&#xff0c;也被称为RAM&#xff08;Random Access Memory&#xff09;&#xff0c;是一种临时存储设备&#xff0c;用于临时存放正在运行的程序和数据。它是服务器上的超高速存储介质&#xff0c;可以快速读取和写入数据&#xff0c;提供给CPU进行实时计算和操作。…

localhost和127.0.0.1的区别是什么

今天在网上逛的时候看到一个问题&#xff0c;没想到大家讨论的很热烈&#xff0c;就是标题中这个&#xff1a; localhost和127.0.0.1的区别是什么&#xff1f; 前端同学本地调试的时候&#xff0c;应该没少和localhost打交道吧&#xff0c;只需要执行 npm run 就能在浏览器中打…

Priors in Deep Image Restoration and Enhancement: A Survey

深度图像恢复和增强中的先验&#xff1a;综述 论文链接&#xff1a;https://arxiv.org/abs/2206.02070 项目链接&#xff1a;https://github.com/VLIS2022/Awesome-Image-Prior (Preprint. Under review) Abstract 图像恢复和增强是通过消除诸如噪声、模糊和分辨率退化等退化…

【北邮国院大四上】Business Technology Strategy 企业技术战略

北邮国院电商大四在读&#xff0c;本笔记仅为PPT内容的整理与翻译&#xff0c;并不代表本课程的考纲及重点&#xff0c;仅为本人复习时方便阅读与思考之作。 写在前面 大家好&#xff0c;欢迎来到大学期间的最后一门课程&#xff0c;本门课程是中方课&#xff0c;所以很庆幸的…

WEB 3D技术 three.js 顶点交换

本文 我们来说 顶点的转换 其实就是 我们所有顶点的位置发生转变 我们整个物体的位置也会随之转变 这里 我们编写代码如下 import ./style.css import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.j…

基于MATLAB的均值,方差,变量的矩(附完整代码与例题)

目录 一. 数学期望与方差 二. 样本的均值与方差 三. MATLAB代码 四. 例题与代码 4.1 正态分布 4.2 Rayleigh分布 五. 随机变量的矩 5.1 原点矩与中心距 5.2 例题3 5.3 样本向量的原点矩与中心矩 一. 数学期望与方差 将某连续随机变量x的概率密度函数记为p(x)&#x…

CentOS未能挂起虚拟机

问题&#xff1a; CentOS未能挂起虚拟机 解决方案&#xff1a; 1、切换到root 2、打开/etc/selinux/config 3、编辑fonfig文件SELINUXpermissive 4、重启VMware&#xff08;很重要&#xff01;&#xff01;&#xff01;简单粗暴&#xff0c;直接右上角x关机。&#xff09; …

《Linux C编程实战》笔记:创建线程

上一章是进程&#xff0c;这一章是线程 有关线程进程的概念之类的请自行学操作系统吧&#xff0c;书里都是偏实战应用的 线程创建函数pthread_create #include <pthread.h> int pthread_create(pthread_t *thread, const pthread_attr_t *attr,void *(*start_routine)…

【AI视野·今日NLP 自然语言处理论文速览 第六十九期】Wed, 3 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Wed, 3 Jan 2024 Totally 24 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers An Autoregressive Text-to-Graph Framework for Joint Entity and Relation Extraction Authors Zaratiana Ur…

Presto CLI学习

1. 序言 作为Presto的客户端之一&#xff0c;Presto CLI是一个基于终端的交互式shell&#xff0c;对应presto源码中的presto-cli模块 Presto CLI的本质是一个self-executing jar —— presto-cli-version-executable.jar&#xff0c;就像一个普通的UNIX可执行文件 因此&#…

leaflet呼吸闪烁效果

leaflet呼吸闪烁效果 1.功能背景 这个效果一把用于点击选中&#xff0c;报警提升效果。 2.功能开发 2.1 marker 这个效果还是很好实现&#xff0c;主要通过计时器设置透明度的组合实现。 function setTargetSelect(e){var i 1var int setInterval(() > {if(!e._map…

FineBI实战项目一(4):指标分析之每日订单总额/总笔数

1 明确数据分析目标 统计每天的订单总金额及订单总笔数 2 创建用于保存数据分析结果的表 use finebi_shop_bi;create table app_order_total(id int primary key auto_increment,dt date,total_money double,total_cnt int ); 3 编写SQL语句进行数据分析 selectsubstring(c…

IP地址定位技术筑牢网络安全防线

随着互联网技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;成为人们关注的焦点。如何有效防范和打击网络犯罪&#xff0c;维护国家安全和社会稳定&#xff0c;是摆在我们面前的一项紧迫任务。IP地址定位技术作为网络安全领域的一项重要技术&#xff0c;在防范和打…

【pytorch学习】 深度学习 教程 and 实战

pytorch编程实战博主&#xff1a;https://github.com/lucidrains https://github.com/lucidrains/vit-pytorch

MySQL 8.0.33.0安装、配置教程

一、概述 本文选用的是MySQL 8.0.33.0版本&#x1f449;下载链接 注意&#xff1a; 1.电脑中必须有python&#xff08;没有会导致部分功能无法使用&#xff09; 下载地址&#xff1a; https://www.python.org/ftp/python/3.9.7/python-3.9.7-amd64.exe 2.不同版本之间安装区别…

图像解析力测试

什么是图像解析力测试 图像解析力测试是衡量成像系统性能的关键指标之一,它决定了摄像头捕捉到的图像细节和清晰度。目前主流的图像解析力测试方法主要有TV line检测、MTF检测和SFR检测。 TV line检测主要用于主观测试,通过观察图像中的线条来评估解析力。然而,这种方法缺乏…

Qt/QML编程学习之心得:QProcess进程创建(27)

Qt除了线程Thread,进程也有支持类,那就是QProcess。 可以看出,这个类很大,支持的内容也很多。最简单的使用如: myParam << QString("-param hello") ; bool bRes = QProcess::startDetached("/usr/bin/myApplication", myParam);要启动进程,主…

超维空间M1无人机使用说明书——41、ROS无人机使用yolo进行物体识别

引言&#xff1a;用于M1无人机使用的18.04系统&#xff0c;采用的opencv3.4.5版本&#xff0c;因此M1无人机只提供了基于yolov3和yolov4版本的darknet_ros功能包进行物体识别&#xff0c;识别效果足够满足日常的物体识别使用&#xff0c;如果需要更高版本的yolov7或者yolov8&am…

解决Typescript报错问题[亲测有效]

目录 1、安装 2、报错 3、分析 4、三种更新途径 如果你tsc -v报错&#xff0c;请看这篇文章&#xff0c;本人亲测有效&#xff01; 1、安装 在前端项目中使用TS&#xff0c;需要进行安装&#xff0c;命令为&#xff1a;npm install -g typescript 查看TS版本&#xff1a; …