vue使用echarts中国地图

news2024/11/28 7:39:01

需求：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 = newProps
      nextTick(() => {
        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.formatter
        formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let patienticfVal, randomCount, relCenterCount, relDoctorCount, areaName, rank
            if (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#geo
        map: "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.coloradmin.cn/o/1266765.html

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

相关文章

房屋租赁出售经纪人入驻小程序平台

房屋租赁出售经纪人入驻小程序平台

一款专为房屋中介开发的小程序平台&#xff0c;支持独立部署&#xff0c;源码交付&#xff0c;数据安全无忧。 核心功能&#xff1a;房屋出租、经纪人独立后台、分佣后台、楼盘展示、房型展示、在线咨询、地址位置配套设施展示。 程序已被很多房屋交易中介体验使用过&#x…
阅读更多...
操作系统校招知识点总结

操作系统校招知识点总结

文章目录 前言1. 操作系统概述1.1 操作系统的四大特征&#xff08;并共虚异&#xff09;1.2 操作系统的主要功能&#xff1f;1.3 动态链接库和静态链接库的区别&#xff1f;1.4 并发和共享之间的关系&#xff1f;1.5 中断和异常的概念&#xff1f; 2. 进程与线程2.1 进程和线程…
阅读更多...
台灯怎么选对眼睛好？适合考研使用的护眼台灯推荐

台灯怎么选对眼睛好？适合考研使用的护眼台灯推荐

现在晚上仍然需要工作、学习的人有很多&#xff0c;这样的一件事似乎已经成为“家常便饭”&#xff0c;尤其事对于一些学生党而言。每天都有写不完的作业、做不完的功课&#xff0c;这样高强度的用眼下来&#xff0c;容易导致眼睛疲劳、近视等等。很多人会选择在夜晚的时候使用…
阅读更多...
基于Java SSM框架+Vue实现房屋租赁网站项目【项目源码+论文说明】

基于Java SSM框架+Vue实现房屋租赁网站项目【项目源码+论文说明】

基于java的SSM框架Vue实现房屋租赁网站演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;房屋租赁系统当然也不能排除在外。房屋租赁系统是以实际运用为开发背景&…
阅读更多...
计算机网络 一到二章 PPT 复习

计算机网络 一到二章 PPT 复习

啥币老师要隔段时间测试&#xff0c;我只能说坐胡狗吧旁边 第一章 这nm真的会考&#xff0c;我是绷不住的 这nm有五种&#xff0c;我一直以为只有三种 广播帧在后面的学习中经常遇到 虽然老师在上课的过程中并没有太过强调TCP/IP的连接和断开&#xff0c;但我必须强调一下&…
阅读更多...
数组元素积的符号

数组元素积的符号

数组元素积的符号 描述 : 已知函数 signFunc(x) 将会根据 x 的正负返回特定值&#xff1a; 如果 x 是正数&#xff0c;返回 1 。如果 x 是负数&#xff0c;返回 -1 。如果 x 是等于 0 &#xff0c;返回 0 。 给你一个整数数组 nums 。令 product 为数组 nums 中所有元素值的…
阅读更多...
ER图-重新学习与应用实践

ER图-重新学习与应用实践

1.应用场景 主要用于利用ER图快速实现项目需求开发实现. 2.学习/操作 1.文档阅读 chatgpt & 其他资料 ER图-相关 ER 图是什么&#xff1f;这一篇让你搞懂 ER 图&#xff01;_数据分析_产品海豚湾_InfoQ写作社区 2.整理输出 2.1 是什么 ER 图也称实体-联系图(Entity Relat…
阅读更多...
界限与不动产测绘乙级申请条件

界限与不动产测绘乙级申请条件

整理一期关于测绘资质界限与不动产测绘乙级资质的申请要求 测绘资质是由测绘资质主管部门自然资源部制定的 想要了解标准、正规的申请条件&#xff0c;可以到当地省份的政务网搜索测绘资质办理相关标准&#xff08;例如下图&#xff09; 1、通用标准 http://gi.mnr.gov.cn/20…
阅读更多...
visual c++ 2019 redistributable package

visual c++ 2019 redistributable package

直接安装下面包只有24M Microsoft Visual C Redistributable 2019 x86: https://aka.ms/vs/16/release/VC_redist.x86.exe x64: https://aka.ms/vs/16/release/VC_redist.x64.exe ———————————————— 版权声明&#xff1a;本文为CSDN博主「kpacnB_Z」的原创文章…
阅读更多...
Unity安装

Unity安装

DAY1 下载Unity 打开Unity3D官网&#xff0c;下载Unity Hub&#xff0c;管理Unity的软件。链接https://unity.cn/releases (可能需要注册账号&#xff0c;就正常注册登录即可) 如果是新版的hub&#xff0c;可能长下面这个样子&#xff0c;还是英文的&#xff0c;点击圆圈的设…
阅读更多...
【模电】晶闸管

【模电】晶闸管

晶闸管 结构和等效模型工作原理晶闸管的伏安特性晶闸管的主要参数额定正向平均电流 I F I\tiny F IF维持电流 I H I\tiny H IH触发电压 U G U\tiny G UG和触发电流 I G I\tiny G IG正向重复峰值电压 U D R M U\tiny DRM UDRM反向重复峰值电压 U R R M U\tiny RRM URRM 晶体闸流…
阅读更多...
使用Python实现SVM来解决二分类问题

使用Python实现SVM来解决二分类问题

下面是一个使用Python实现SVM来解决二分类问题的例子&#xff1a; # 导入所需的库 from sklearn.datasets import make_blobs from sklearn.model_selection import train_test_split from sklearn.svm import SVC import matplotlib.pyplot as plt# 生成一个二分类数据集 X, …
阅读更多...
Linux 启动过程

Linux 启动过程

linux启动步骤&#xff1a; <1>加电 <2>加载bios设置 <3>加载grup <4>加载内核系统到内存中 <5>加载配置文件 <6>加载内核模块 <7>完成相应的初始化工作和启动相应的服务 <8>启动系统进程 <9>出现登录界面 &l…
阅读更多...
第三方发起备份的ORA-00245问题

第三方发起备份的ORA-00245问题

文章目录 前言一、信息确认共享目录位置控制文件快照位置节点1节点2 二、RAC修改snapshot controlfile 参数三、字典表确认以及测试 前言 在使用 AnyBackup 管理控制台发起 Oracle RAC 数据库备份后&#xff0c;在任务历史记录 > 执行输出中显示如下错误信息&#xff1a; c…
阅读更多...
NX二次开发UF_MTX3_multiply_t 函数介绍

NX二次开发UF_MTX3_multiply_t 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_MTX3_multiply_t Defined in: uf_mtx.h void UF_MTX3_multiply_t(const double mtx1 [ 9 ] , const double mtx2 [ 9 ] , double mtx_product [ 9 ] ) overview 概述 Returns a…
阅读更多...
14.spring源码解析-postProcessBeanFactory

14.spring源码解析-postProcessBeanFactory

此方法允许子类在所有的bean尚未初始化之前注册BeanPostProcessor。空实现且没有子类覆盖。
阅读更多...
一种方便、优美的使用Python调用fofa API的方法

一种方便、优美的使用Python调用fofa API的方法

免责声明&#xff1a;由于传播或利用此文所提供的信息、技术或方法而造成的任何直接或间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c; 文章作者不为此承担任何责任。 学习网络安全的过程中&#xff0c;绕不开fofa搜索&#xff0c;我的需求是使用fofa获取互联网所…
阅读更多...
docker的理解

docker的理解

docker最底层就是bootfs(boot file system)主要包含 bpotloader 和 kernel&#xff0c;bootloader主要是引导加载 kernel&#xff0c;Linux 刚启动时会加载 bootfs文件系统&#xff0c;在Docker镜像的最底层是bootfs。这一层与我们典型的Linux/Unix系统是一样的&#xff0c;包含…
阅读更多...
儿童台灯怎么选对眼睛好？专业儿童护眼台灯分享

儿童台灯怎么选对眼睛好？专业儿童护眼台灯分享

随着时代的改革和发展&#xff0c;现在的孩子学业压力要远比我们想象中的繁重很多&#xff0c;而且随着年龄的增长&#xff0c;用眼到需求也会越来越大。再加上过早的接触电子产品&#xff0c;导致现在的孩子近视率都非常高&#xff01; 因此作为家长一定要重视孩子的视力健康&…
阅读更多...
C语言进阶指南（11）（指针数组与二维数组）

C语言进阶指南（11）（指针数组与二维数组）

*欢迎来到博主的专栏——C语言进阶指南 博主id&#xff1a;reverie_ly 文章目录 N级指针指针数组指针数组与二维数组数组指针作为函数的参数 N级指针 指针变量是一个存放地址的变量&#xff0c;在C语言中&#xff0c;每个变量都会有一个地址值。所以指针变量也有一个地址。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023