vue echarts地图

news2024/10/6 8:34:40

下载地图文件:

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.coloradmin.cn/o/1405962.html

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

相关文章

[每日一题] 01.23 - 画矩形

画矩形 height,width,c,d input().split() height,width,d int(height),int(width),int(d) lis [c * width if d else c * (width - 2) c for i in range(height) ]lis: ##### # # # # ##### 或 # # # # # # # #if not d:print(c * width)for i in lis[1:-1…

苹果眼镜(Vision Pro)的开发者指南(3)-【3D UI SwiftUI和RealityKit】介绍

为了更深入地理解SwiftUI和RealityKit,建议你参加专注于SwiftUI场景类型的系列会议。这些会议将帮助你掌握如何在窗口、卷和空间中构建出色的用户界面。同时,了解Model 3D API将为你提供更多关于如何为应用添加深度和维度的知识。此外,通过学习RealityView渲染3D内容,你将能…

【加解密篇】电子数据取证分析之特殊的自加密BitLocker解密

【加解密篇】电子数据取证分析之特殊的自加密BitLocker解密 数据加解密通常是个耗时费力的事情—【蘇小沐】 1、实验环境 Windows 11 专业版,[23H2(22631.3007)] (一)自动开启BitLocker之天坑 1、经验之谈 在201…

php基础学习之数据类型

php数据类型的基本概念 数据类型:data type,在PHP中指的是数据本身的类型,而不是变量的类型。 PHP 是一种弱类型语言,变量本身没有数据类型。 把变量类比成一个杯子(容器),杯子可以装雪碧、可…

2024茶饮品牌如何出圈,媒介盒子分析

随着新式茶饮的消费场景更加多元化,品类不断拓宽,消费者对新式茶饮的热情也是只增不减。居民可支配收入水平不断上升,居民消费升级为新式茶饮的发展也提供了良好基础,今天媒介盒子就来和大家聊聊:2024茶饮品牌如何出圈…

【数据分析】matplotlib、numpy、pandas速通

教程链接:【python教程】数据分析——numpy、pandas、matplotlib 资料:https://github.com/TheisTrue/DataAnalysis 1 matplotlib 官网链接:可查询各种图的使用及代码 对比常用统计图 1.1 折线图 (1)引入 from …

软考之软件工程

一、瀑布模型 严格区分阶段,每个阶段因果关系紧密相连,只适合需求明确的项目 缺点:软件需求完整性、正确性难确定;严格串行化,很长时间才能看到结果;瀑布模型要求每个阶段一次性完全解决该阶段工作&#xf…

Prometheus+Grafana监控Mysql数据库

Promethues Prometheus https://prometheus.io Prometheus是一个开源的服务监控系统,它负责采集和存储应用的监控指标数据,并以可视化的方式进行展示,以便于用户实时掌握系统的运行情况,并对异常进行检测。因此,如何…

【测试开发】Junit5 + YAML 轻松实现参数化和数据驱动,让 App 自动化测试更高效(一)

1. 何为数据驱动 什么是参数化?什么又是数据驱动?经常有人会搞不明白他们的关系,浅谈一下个人的理解,先来看两个测试中最常见的场景: 登录:不同的用户名,不同的密码,不同的组合都需要…

makefile编译静态链接库(.a文件)

文章目录 makefile编译静态链接库(.a文件) makefile编译静态链接库(.a文件) 搞个文件测试静态链接库 aTest.h // // Created by qiufh on 2024-01-23. //#ifndef UNTITLED3_ATEST_H #define UNTITLED3_ATEST_Hclass aTest { pu…

c语言数据结构:单链表及其相关基础操作

目录 0.创建一个额外新的结点 1.链表的概念及其结构 2.单链表的概念 3.单链表的结点的创建 4. 顺序表的打印 5. 链表的尾插 5.1 有关单链表的传参 (重点) 5.1.1 错误的写法 5.1.2 如何修正 5.1.3 正确的写法 5.1.4 看穿二级指针变量 ​编辑 6.链表的头插 7.单链表的…

C++进阶:多态(下)

1、多态的原理 多态之所以可以实现,主要是因为虚函数表的存在,虚函数表用于记录虚函数的地址,他是一个函数指针数组,在类中用一个函数指针数组指针来指向数组,子类继承了父类的虚函数表,当有重写的情况发生…

软考14-上午题-编译、解释程序翻译阶段

一、编译、解释程序【回顾】 目的:高级程序设计语言(汇编语言、高级语言)—【翻译】—>机器语言 1-1、编译方式 将高级语言书写的源程序——>目标程序(汇编语言、机器语言) 包含的工作阶段:词法分…

latex添加图片以及引用的实例教程

原理 在 LaTeX 中插入图片,通常是使用 \includegraphics 命令,它是由 graphicx 包提供的。首先,确保在文档的前言部分(\documentclass 之后和 \begin{document} 之前)包含了 graphicx 包。 下面是一个基本的例子来展…

Hikvision综合安防管理平台files;.css接口存在任意文件读取漏洞 附POC软件

免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. Hikvisi…

HIVE中关联键类型不同导致数据重复,以及数据倾斜

比如左表关联键是string类型,右表关联键是bigint类型,关联后会出现多条的情况 解决方案: 关联键先统一转成string类型再进行关联 原因: 根据HIVE版本不同,数据位数上限不同, 低版本的超过16位会出现这种…

变分自编码器VAE模型与应用

变分自编码器(VAE,Variational Autoencoder)是一种深度学习模型,用于数据生成和特征学习。它结合了自编码器(autoencoders)和贝叶斯推断。 下面是VAE的详细解释: 自编码器(Autoenco…

Kafka-消费者-KafkaConsumer分析总结

KafkaConsumer依赖SubscriptionState管理订阅的Topic集合和Partition的消费状态,通过ConsumerCoordinator与服务端的GroupCoordinator交互,完成Rebalance操作并请求最近提交的offset。 Fetcher负责从Kafka中拉取消息并进行解析,同时参与posi…

关于网络协议的笔记

简介: 协议,网络协议的简称,网络协议是通信计算机双方必须共同遵从的一组约定。如怎么样建立连 接、怎么样互相识别等。只有遵守这个约定,计算机之间才能相互通信交流。它的三要素是:语 法、语义、时序。 为了使数据…

REVIT二次开发 自动门窗墙体标注

步骤1 步骤2 步骤3 using System; using System.Collections.Generic; using System.Linq; using System