vue echarts地图

下载地图文件:

DataV.GeoAtlas地理小工具系列

范围选择器右侧行政区划范围中输入需要选择的省份或地市,选择自己想要的数据格式,这里选择了geojson格式,点右侧的蓝色按钮复制到浏览器地址栏中,打开的geojson文件内容右键另存为json文件即可。

实现代码:

init() {
      // 画布初始化
      if (myChart) {
        myChart.dispose(); // 销毁实例
      }
      let mapDom = document.getElementById("map");
      myChart = echarts.init(mapDom);
      // 隐藏数据刷新动画
      myChart.hideLoading();
      // 注册可用的地图
      echarts.registerMap("jiangsu", jiangsuJson);
      let option = {
        tooltip: {
          triggerOn: "mousemove", // 鼠标移动时触发
        },
        visualMap: {
          show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在
          type: "continuous", // 类型为连续型视觉映射
          range: [0, 100], // 定义数据范围,不同数值大小显示为不同的颜色
          calculable: false, // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
          inRange: {
            // 定义在选中范围中的视觉元素
            color: ["#00ffff", "#f36a00"]
          },
        },
        // 地理坐标系组件
        geo: {
          map: "jiangsu",
          aspectScale: 0.75, //长宽比
          zoom: 1.2,
          roam: false, // 滚轮 放大缩小
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: {
                // 默认区块颜色
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#BFFFDD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF", // 100% 处的颜色
                  },
                ],
              },
              shadowColor: "#FFFFFF", // 青色
              shadowBlur: 0,
              shadowOffsetX: 10,
              shadowOffsetY: 10,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            id: "map",
            type: "map", // 图表类型
            map: "jiangsu", // 已注册的地图
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#333",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#ece8ef",
                },
              },
            },
            select: {
              // 选中状态下的多边形和标签样式
              itemStyle: {
                borderColor: "#E167F5",
                borderWidth: 1,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3AD7FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0FE017", // 100% 处的颜色
                    },
                  ],
                },
              },
              label: {
                color: "#ece8ef",
              },
            },
            itemStyle: {
              // 地图区域的多边形 图形样式
              normal: {
                borderColor: "#0FE017",
                borderWidth: 0.4,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#DFFBFD", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFFFFF", // 100% 处的颜色
                    },
                  ],
                },
              },
              emphasis: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#D7FFA3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#70FE01", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#1F567E",
                borderWidth: 1,
                shadowColor: "rgba(150, 225, 245, 0.7)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
            animation: false,
            data: [
              { name: '南京', value: 9 },
              { name: '宿迁', value: 12 },
            ],
          },
        ],
      };
      // 将配置应用到地图上
      myChart.setOption(option);
      document.getElementById("map").removeEventListener;
      window.addEventListener("resize", () => {
        myChart.resize();
      });
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 670 最大交换数

周一,非常冷,大风呼呼的,上班路都走不动。 好消息,马上要过年了。大风吹,天气好。 过年过年,回家过年~ 学生时代的迷茫是不应该存在的,最好的时光应该尽情享受,而不应该自己给加层…

三年的功能测试,让我女朋友跑了,太难受了...

简单概括一下 先说一下自己的情况,普通本科,18年通过校招进入深圳某软件公司,干了3年多的功能测试,21年的那会,因为大环境不好,我整个人心惊胆战的,怕自己卷铺盖走人了,我感觉自己不…

测试数据: 在线MP4和图片url地址

收集整理一些开发中用到的测试数据 目录 MP4图片ICON MP4 https://media.w3.org/2010/05/sintel/trailer.mp4 图片 https://img-blog.csdnimg.cn/fcc22710385e4edabccf2451d5f64a99.jpeg ICON https://img-blog.csdnimg.cn/direct/fb1e1f109889467a85eec6af0984611c.png 以…

协同过滤源代码在真实数据集上运行及优化

最近在做推荐算法相关研究, 先拿一个协同过滤代码练手。 网上找代码很容易,但是大多是讲原理的示例代码,在真实数据集上运行问题特别多。 以一个2w节点的开源数据集为例(baby.inter) https://github.com/enoche/MM…

PSIM仿真DSP28335ADC功能并使用SCI串口模块输出曲线

在使用PSIM 2022 软件仿真DSP28335单片机时,发现里面还有SCI串口打印模块,在仿真软件里面可以看到串口数据,但是将代码下载到单片机上之后,使用串口助手却看不到任何数据,经过一番探索终于发现,串口不是这样…

【linux】串口工具

1. PuTTY - 尽管PuTTY更为人所知作为SSH和Telnet客户端,但它也有串口连接能力。 - 在Debian上可以通过命令 sudo apt-get install putty 来安装PuTTY。 2. Minicom - Minicom是一个字符界面的串行通信程序,经常用于调试串口和模拟器。 - 可以通过…

webserver 之 线程同步 线程池(半同步半反应堆)

目录 🐂前言 🍑B / S 模型 🐘线程同步机制 🌼概念 (1)RAII (2)信号量 (3)互斥量 (4)条件变量 🌼功能 &#xf…

python丰富的任务进度显示

pip install txdpy 安装 txdpy from txdpy import progbar 导入 progbar progbar()函数传入一个可遍历对象,返可迭代对象 from txdpy import progbar from random import uniform from time import sleepfor i in progbar(range(4651)):print(f第{i}条任务)…

Ubuntu Desktop 隐藏 / 显示文件和文件夹

Ubuntu Desktop 隐藏 / 显示文件和文件夹 1. GUI hot key2. Show hidden and backup filesReferences 1. GUI hot key Ctrl H: 隐藏 / 显示文件和文件夹 2. Show hidden and backup files Edit -> Preferences -> Views References [1] Yongqiang Cheng, https://yo…

Linux:vim的相关知识

目录 vim 是一个较为常见的编译文件的命令操作。 三种模式的区分的作用如下: 命令模式: 插入模式: 进入插入模式的标志:左下角有INSERT 底行模式: 命令模式的常见命令: 底行模式常见命令&#xff1…

【UE】在控件蓝图中通过时间轴控制材质参数变化

效果 步骤 1. 新建一个控件蓝图和一个材质 2. 打开材质,设置材质域为用户界面,混合模式设置为“半透明” 在材质图表中添加两个参数来控制材质的颜色和不透明度 3. 对材质创建材质实例 4. 打开控件蓝图,在画布面板中添加一个图像控件 将刚…

QT发送request请求

时间记录:2024/1/23 一、使用步骤 (1)pro文件中添加network模块 (2)创建QNetworkAccessManager网络管理类对象 (3)创建QNetworkRequest网络请求对象,使用setUrl方法设置请求url&am…

什么是BMC

BMC全称为Baseboard Management Controller(基板管理控制器),是一种独立于服务器操作系统和主处理器的专用微控制器,它内置在服务器、网络设备和其他复杂电子系统的主板上。BMC主要负责监控和管理系统硬件的状态,并提供…

模型之气体的行为

气体的行为 “探索气体动理论:分子运动与温度的统计关系” 气体动理论由丹尼尔•伯努利在1738年提出,后来又由麦克斯韦、玻尔兹曼等人在19世纪后半叶推进。根据这种理论,气体是由运动着的分子组成的,气体的许多性质——如温度和…

“深入理解RabbitMQ交换机的原理与应用“

深入理解RabbitMQ交换机的原理与应用 引言1. RabbitMQ交换机简介介绍1.1 什么是RabbitMQ?1.1.1 消息中间件的作用1.1.2 RabbitMQ的特点和优势 1.2 RabbitMQ的基本概念1.2.1 队列1.2.2 交换机1.2.3 路由键 1.3 交换机的作用和分类1.3.1 直连交换机(direct…

【MySQL进阶】锁

文章目录 锁概述全局锁语法特点 表级锁表锁意向锁 行级锁行锁间隙锁&临键锁 面试了解数据库的锁吗?介绍一下间隙锁InnoDB中行级锁是怎么实现的?数据库在什么情况下会发生死锁?说说数据库死锁的解决办法 锁 概述 锁机制:数据库…

C++进阶--哈希的应用之位图和布隆过滤器

哈希的应用之位图和布隆过滤器 一、位图1.1 位图(bitset)的提出1.2 位图的概念1.3 位图的模拟实现1.3.1 位图的底层结构1.3.2 位图的成员函数1.3.2.1 位图的构造1.3.2.2 位图的插入:set1.3.2.3 位图的删除:reset1.3.2.4 位图的查找…

LLM for Kernel Fuzzing

KernelGPT: Enhanced Kernel Fuzzing via Large Language Models 1.Introduction2.Background2.1.Kernel and Device Drivers2.2.Kernel Fuzzing2.2.1.Syzkaller规约2.2.2.规约生成 3.Approach3.1.Driver Detection3.2.Specification Generation3.2.1.Command Value3.2.2.Argum…

鸿蒙自定义刷新组件使用

前言 DevEco Studio版本:4.0.0.600 1、RefreshLibrary_HarmonyOS.har,用于HarmonyOS "minAPIVersion": 9, "targetAPIVersion": 9, "apiReleaseType": "Release", "compileSdkVersion": "3.…

【Redis】Redis如何实现key的过期删除

​ 🍎个人博客:个人主页 🏆个人专栏:Redis ⛳️ 功不唐捐,玉汝于成 ​ 目录 前言 正文 结语 我的其他博客 前言 在当今信息时代,数据的快速存储和高效检索成为了软件系统设计中的核心需求。Redis作为…
最新文章