vue使用echarts中国地图

需求:Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图。鼠标悬浮省份上面显示指定的数据,地图支持缩放和拖拽的功能,页面放大缩小支持自适应,window.addEventListener(‘resize’, resize); 添加防抖动函数debounce。
在这里插入图片描述

一、安装 Echarts

npm install echarts --save

安装成功后如下:

在这里插入图片描述

二、下载地图的 json 数据

免费的文件下载地址:

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
在这里插入图片描述

三、具体代码如下

1,chinaMap.vue组件如下:

<template><div class="leftCard"><div id="chinaMap" ref="chinaMap"></div></div>
</template><script setup lang="ts" name="ChinaMap">
import { reactive, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue';
import * as echarts from 'echarts';
import china from "./china.json";  //中国地图
import { debounce } from 'lodash-es';
const chinaMap = ref()
var myChart = {} as any
const resize = debounce(() => myChart && myChart.resize(), 200)
const props = defineProps({areadataInfo: {type: Array,default: () => []}
});
const state = reactive({MapDataList: [{name: "黑龙江省",value: 44,randomCount: 80,relCenterCount: '80/1092',relDoctorCount: '80/1223',perf: "1%",rank: ''},{name: "湖南省",value: 23,randomCount: 100,relCenterCount: '100/1092',relDoctorCount: '100/1223',perf: "70%",rank: 'Top2'},{name: "云南省",value: 88,randomCount: 180,relCenterCount: '187/1092',relDoctorCount: '190/1223',perf: "80%",rank: 'Top1'},{name: "安徽省",value: 66,randomCount: 90,relCenterCount: '157/1092',relDoctorCount: '188/1223',perf: "60%",rank: 'Top3'},{name: "新疆维吾尔自治区",value: 166,randomCount: 90,relCenterCount: '157/1092',relDoctorCount: '188/1223',perf: "60%",rank: 'Top001'},{name: "内蒙古自治区",value: 106,randomCount: 90,relCenterCount: '157/1092',relDoctorCount: '188/1223',perf: "60%",rank: 'Top002'}] as any
});
watch(() => props.areadataInfo,(newProps) => {if (newProps) {state.MapDataList = newPropsnextTick(() => {initEchartMap();});}},{ immediate: true, deep: true }
);
const emit = defineEmits(['MaphospitalRecommend']);onMounted (() => {window.addEventListener('resize', resize);
})onBeforeUnmount(() => {window.removeEventListener('resize', resize);
})// 初始化地图
function initEchartMap(){echarts.registerMap('china', china) //这个特别重要if (myChart != null && myChart != "" && myChart != undefined) {echarts.dispose(chinaMap.value)}myChart = echarts.init(chinaMap.value);myChart.off('click');//echart 配制option  var options= {tooltip: { // 鼠标移到图里面的浮动提示框// formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatterformatter(params, ticket, callback) {// params.data 就是series配置项中的data数据遍历let patienticfVal, randomCount, relCenterCount, relDoctorCount, areaName, rankif (params.data) {patienticfVal = params.data.icfCount;randomCount = params.data.randomCount;relCenterCount = params.data.relCenterCount;relDoctorCount = params.data.relDoctorCount;areaName = params.data.areaName;rank = 'Top' + params.data.rank;} else {// 为了防止没有定义数据的时候报错写的patienticfVal = 0;randomCount = 0;relCenterCount = 0;relDoctorCount = 0;rank = '';}let htmlStr = `<div style='font-size:14px; margin-bottom:10px;'> ${areaName ? areaName : params.name} ${rank} </div><p style='text-align:left;margin-top:-4px;'>患者ICF数:${patienticfVal}<br/>患者入组数:${randomCount}<br/>覆盖医院:${relCenterCount}<br/>覆盖医生:${relDoctorCount}</p>`;return htmlStr;},backgroundColor: "#ff7f50", //提示标签背景颜色textStyle: { color: "#fff" }, //提示标签字体颜色padding: [5, 10, 0, 10],  // 设置上下的内边距为 5,0,左右的内边距为 10},visualMap: {  show: true,bottom: 20,left: 50,// left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度text: ['高', '低'],min: 0,itemHeight: 200,  //图形的高度,即长条的高度。color: ['#ee6666',//红色'#fc8452',//橙色'#fac858',//黄色'#9a60b4',//紫色'#ea7ccc',//淡紫'#3ba272',//绿色'#91cc75',//浅绿'#5470c6',//蓝色'#5283e7',//淡蓝]},    geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解: https://echarts.baidu.com/option.html#geomap: "china", // 表示中国地图roam: true, // 是否开启鼠标缩放和平移漫游// roam : 'scale',scaleLimit: { //滚轮缩放的极限控制min: 1,max: 12},zoom: 1.2, // 当前视角的缩放比例(地图的放大比例)label: {show: false},itemStyle: {normal: {areaColor: "#d5e8f3",borderColor: "#fcfdfe",borderWidth: 1,},emphasis: {areaColor: "#aaa",},},// emphasis: {  // 地图区域的多边形 图形样式。//   borderColoer: "#ffffff",//未选中的状态//   areaColor: "#D8E9FD", //背景颜色//   label: {//     show: true, //显示名称//   },//   itemStyle: {  //选中的状态// 高亮状态下的多边形和标签样式//     shadowBlur: 20,//     shadowColor: "rgba(0, 0, 0, 0.5)",//     borderColoer: "#fff",//     areaColor: "#DA3A3A"//   }// }},series: [{name: "地图", // 浮动框的标题(上面的formatter自定义了提示框数据,所以这里可不写)type: "map",geoIndex: 0,label: {show: true,},// 这是需要配置地图上的某个地区的数据,根据后台的返回的数据进行拼接(下面是我定义的假数据)data: state.MapDataList,}]}myChart.clear();myChart.setOption(options);// window.addEventListener('resize', () => {//   if (myChart) {//     myChart.resize();//   }// });// myChart.resize();//地图的点击事件 ,钻取到市我就不举例了,类似的方法,点击事件可以获取到当前点击的省份的数据;myChart.on('click', function(params) {// console.log(params, '---点击地图---')emit('MaphospitalRecommend', params);})// myChart.on('mouseover', function(params) {//     console.log(params, '---鼠标移入---')// })// myChart.on('mouseout', function(params) {//     console.log(params, '---鼠标移出---')// })
}
</script><style scoped lang="scss">
.leftCard{width: 100%;height: 100%;#chinaMap{width: 100%;height: 600px;}
}
</style>

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

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

相关文章

回顾方法的定义

/*** Description 回顾方法的定义*/ package com.oop.demo01;import java.io.IOException;public class Demo01 {//main 方法public static void main(String[] args){}/*修饰符 返回值类型 方法名(...){//方法体return 返回值}*///return 结束方法,返回一个人结果&#…

零基础学Python第三天||写一个简单的程序

通过对四则运算的学习&#xff0c;已经初步接触了Python中内容&#xff0c;如果看官是零基础的学习者&#xff0c;可能有点迷惑了。难道敲几个命令&#xff0c;然后看到结果&#xff0c;就算编程了&#xff1f;这也不是那些能够自动运行的程序呀&#xff1f; 的确。到目前为止…

算法基础二

回文数 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 示例 1&#xff1a; 输入&#xff1…

C++——STL标准模板库——初识

一、概念 STL&#xff1a;标准模板库&#xff0c;Standard Template Library的缩写。是c编程语言中重要部分&#xff0c;提供了一组通用模板&#xff0c;实现常用的数据结构和算法。是泛型编程思想的重要体现&#xff0c;进一步提升了复用性。 STL分为六大组件&#xff1a;容…

【FGPA】Verilog:JK 触发器 | D 触发器 | T 触发器 | D 触发器的实现

0x00 JK 触发器 JK 触发器是 RS 触发器和 T 触发器的组合&#xff0c;有两个输入端 J 和 K&#xff0c;如果两个输入端都等于 1&#xff0c;则将当前值反转。 行为表 状态图 Timing Diagram Circuit JK 触发器的设计目的是防止 RS 触发器在输入 S 和 R 均等于 …

使用Java给钉钉群发消息

目录 目录 1.安装依赖 2.编写工具类 3.测试 安全设置 Webhook 代码编写 运行测试 4.艾特全部功能 1.安装依赖 <dependency><groupId>com.taobao.dingding</groupId><artifactId>taobao-sdk</artifactId><version>1.0.0</versio…

Java中枚举类的创建及其应用场景

枚举类 枚举是一种特殊的类(编译之后也是生成class文件)可以实现接口,属于引用数据类型,枚举类是一组常量(枚举对象)的集合可以将枚举对象当作常量使用 自定义枚举类 自定义一个类实现枚举的效果 构造器私有化: 因为枚举对象的个数是固定的,所以需要防止直接new对象 创建一…

Zabbix监控Oracle表空间

警告 Oracle {#TABLESPACE}: 表空间数据文件已分配超过 {$ORACLE.TBS.UTIL.PCT.MAX.HIGH}% &#xff0c;且表空间已使用超过{$ORACLE.TBS.USED.PCT.MAX.WARN}% 警告 min(/Oracle by ODBC-2/oracle.tbs_used_file_pct["{#TABLESPACE}"],5m)>{$ORACLE.TBS.USED.PC…

E云管家开发个人微信号批量修改好友备注

简要描述&#xff1a; 修改好友备注 请求URL&#xff1a; http://域名地址/modifyRemark 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说…

内部类——静态/非静态对外部类的访问

非静态内部类 可以访问外部类的非静态属性/静态属性&#xff0c;包括私有属性 静态内部类 1.只可以访问外部类的静态属性&#xff0c;包括静态私有属性 2.不可以可以访问外部类的非静态属性&#xff0c;包括私有属性

扫地机器人市场持续火爆,景联文科技数据采集标注方案助力扫地机器人智能化升级

随着消费者对智能家居和清洁卫生的需求增加&#xff0c;扫地机器人市场规模不断扩大。市场竞争也日益激烈&#xff0c;各品牌都在努力提升产品性能和服务质量&#xff0c;以获取更大的市场份额。 IDC的统计数据显示&#xff0c;今年双十一前两周&#xff08;2023年10月23日至20…

Python入门05 print函数

目录 1 Python中的内置函数2 print函数介绍3 print函数的用途总结 1 Python中的内置函数 Python中内置了很多函数&#xff0c;我们可以直接调用&#xff0c;以下是一些常见的函数&#xff1a; abs()&#xff1a;返回一个数的绝对值。all()&#xff1a;判断一个可迭代对象中的…

Jmeter和Testlink自动化测试框架研究与实施

摘 要 目前基于Jmeter的接口自动化测试框架&#xff0c;大多只实现脚本维护和自动调度&#xff0c;无法与Testlink进行互通&#xff0c;实现测试方案与自动化实施流程连接&#xff0c;本文基于Testlink、Jmeter、Jenkins实现&#xff1a;通过Testlink统一维护接口自动化测试用…

基于python的IOS自动化测试小技巧

文章目录 一、Xpath 的使用1.1 使用Xpath读取固定位置的元素的内容一、Xpath 的使用 在执行IOS APP UI自动化测试时,需要使用到元素定位,我们使用WEditor进行元素的定位,操作流程可以查看基于Python的IOS自动化测试环境搭建 ,但是在一些特殊的场景需要灵活使用元素定位。 …

大数据平台/大数据技术与原理-实验报告--部署全分布模式HBase集群和实战HBase

实验名称 部署全分布模式HBase集群和实战HBase 实验性质 &#xff08;必修、选修&#xff09; 必修 实验类型&#xff08;验证、设计、创新、综合&#xff09; 综合 实验课时 2 实验日期 2023.11.07-2023.11.10 实验仪器设备以及实验软硬件要求 专业实验室&#xff…

diffusion model (九) EmuEdit技术小结

文章目录 背景1 核心思想2 方法2.1 方法建模2.2 数据工程2.2.1 image-edit任务类别定义2.2.2 指令集生成2.2.3 图片对的生成 3 结果 Paper: https://emu-edit.metademolab.com/assets/emu_edit.pdf Project web: https://emu-edit.metademolab.com/ Code: have not opensourc…

vue3 setup语法糖 搜索

前言 Vue.js 是一款流行的 JavaScript 框架&#xff0c;用于构建用户界面。它提供了一种简洁的方式来创建可维护和可测试的前端应用程序。Vue.js 的核心库只关注视图层&#xff0c;易于上手&#xff0c;同时与其他库或现有项目整合也非常方便。Vue 也完全能够为复杂的单页应用…

DBT踩坑第二弹

总结下dbt-spark踩到的坑&#xff0c;连接方式采用的是thrift连接 Kerberos认证。考虑到开源组件Kyuubi也是基于Hiveserver2&#xff0c;使用的thrift协议&#xff0c;所以采用Kyuubi执行SparkSQL。 官方文档给出的Thrift方式连接示例真的是简单&#xff0c;但是真是用起来真是…

Selenium+Python做web端自动化测试框架与实例详解教程

最近受到万点暴击&#xff0c;由于公司业务出现问题&#xff0c;工作任务没那么繁重&#xff0c;有时间摸索seleniumpython自动化测试&#xff0c;结合网上查到的资料自己编写出适合web自动化测试的框架&#xff0c;由于本人也是刚刚开始学习python&#xff0c;这套自动化框架目…

基于HTML+CSS+JavaScript的登录注册界面设计

一、界面效果: 二、HTML代码: 登录注册html: 登录成功html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>登录成功!</h1> </body> <…