echarts-地图

使用地图的三种的方式：

  1. 注册地图(用json或svg,注册为地图)，然后使用map地图
  2. 使用geo坐标系，地图注册后不是直接使用，而是注册为坐标系。
  3. 直接使用百度地图、高德地图，使用百度地图或高德地图作为坐标系。

用json或svg注册为地图，然后使用map地图

从DataV中获取地图数据。
在这里插入图片描述
echarts.registerMap(“china”, china) 注册地图
map ：使用 registerMap 注册的地图名称。

import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import "./vintage";
import china from "./china.json";
let myEcharts;
onMounted(() => {
  let canvas = document.getElementById("canvas");
  echarts.registerMap("china", china);
  myEcharts = echarts.init(canvas, "vintage", {
    width: 500,
    height: 500,
    devicePixelRatio: window.devicePixelRatio,
    locale: "ZH",
  });

  let options = {
    tooltip: {},
    series: [
      {
        type: "map",
        roam: true,
        width: 500,
        height: 500,
        map: "china",
      },
    ],
  };
  rednderEcharts(options);
});

function rednderEcharts(options) {
  myEcharts.setOption(options);
}

在这里插入图片描述

使用series调节绘制的地图

地图中也label,tooltip,lenged等属性，也可以用itemStyle调整每块区域的样式。
地图特有的属性：
数据映射： nameMap
缩放相关的：scaleLimit,zoom

如果想给某个省份添加数据，可以设置data

 let options = {
    tooltip: {},
    series: [
      {
        type: "map",
        roam: true,
        width: 500,
        height: 500,
        map: "china",
        label: {
          // show: true,
        },
        itemStyle: { // 地图的颜色
          areaColor: "blue",
        },
        emphasis: { //高亮色
          itemStyle: {
            areaColor: "red",
          },
        },
        data: [{ name: "天津市", value: 20 }],//name要完全对应
      },
    ],
  };

在这里插入图片描述
scaleLimit ：滚轮缩放的极限控制，通过min, max最小和最大的缩放值。
zoom：当前视角的缩放比例。
nameMap：自定义地区的名称映射。

 let options = {
  tooltip: {},
  series: [
    {
      type: "map",
      roam: true,
      width: 500,
      height: 500,
      map: "china",
      label: {
        // show: true,
      },
      itemStyle: {
        // 地图的颜色
        areaColor: "blue",
      },
      emphasis: {
        //高亮色
        itemStyle: {
          areaColor: "red",
        },
      },
      nameMap: {
        河北省: "冀",
      },
      scaleLimit: {
        min: 1,
        max: 5,
      },
      zoom: 5,
      data: [
        { name: "天津市", value: 20 },
        {
          name: "冀",
          value: 100,
        },
      ],
    },
  ],
};

在这里插入图片描述

visualMap 根据数值显示不同的颜色，一般配合热力图或地图

inRange 调控颜色的变化范围
min,max 调控最大、最小值
left 调节组件的位置
text调节组件最高最低的文本

 let options = {
    tooltip: {},
    series: [
      {
        type: "map",
        roam: true,
        width: 500,
        height: 500,
        map: "china",
        label: {
          // show: true,
        },
        itemStyle: {
          // 地图的颜色
          areaColor: "blue",
        },
        emphasis: {
          //高亮色
          itemStyle: {
            areaColor: "red",
          },
        },
        nameMap: {
          河北省: "冀",
        },
        scaleLimit: {
          min: 1,
          max: 5,
        },
        //  zoom: 5,
        data: [
          { name: "天津市", value: 20 },
          { name: "山西省", value: 10 },
          { name: "河南省", value: 15 },
          {
            name: "冀",
            value: 40,
          },
        ],
      },
    ],
    visualMap: {
      type: "continuous", //"piecewise" 调控颜色的条是连续的还是不连续的
      min: 0,  // 
      max: 40,
      range: [4, 35],  //范围是从4-35 ,整个范围是0-40
      text: ["最小值", "最大值"], // 调控颜色的条上下的文字
      left: 120,
      inRange: {
        color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8"],
      },
    },
  };

在这里插入图片描述

geo 地理坐标系绘制地图

如果以地图为基础，在地图的某个位置上绘制一些东西，可以使用geo地理坐标系来绘图
1.图表的调节与map图标一致
2. 如果相对地图中的某一个区域进行特殊的配置，要使用regions

 let options = {
    tooltip: {},
    geo: {
      map: "china",
      roam: true,
      zoom: 2,
      itemStyle: {
        areaColor: "blue",
      },
    },
    visualMap: {
      type: "continuous", //"piecewise"
      min: 0,
      max: 40,
      range: [4, 35],
      text: ["最小值", "最大值"],
      left: 120,
      inRange: {
        color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8"],
      },
    },
  };

在这里插入图片描述
在图中添加数据，以graph关系图为例

 let options = {
    tooltip: {},
    geo: {
      map: "china",
      roam: true,
      zoom: 1,
      itemStyle: {
        areaColor: "blue",
      },
    },
    series: [
      {
        type: "graph",
        coordinateSystem: "geo",
        data: [
          [112.549248, 37.857014],
          [111.670801, 40.818311],
          [115.426264, 39.950502],
          [116.677853, 40.970888],
        ],
      },
    ],
  };

在这里插入图片描述


  let options = {
    tooltip: {},
    geo: {
      map: "china",
      roam: true,
      zoom: 1,
      itemStyle: {
        areaColor: "blue",
      },
      regions: [
        {
          name: "河北省",
          itemStyle: {
            areaColor: "yellow",
          },
        },
      ],
    },
    series: [
      {
        type: "graph",
        coordinateSystem: "geo",
        data: [
          [112.549248, 37.857014],
          [111.670801, 40.818311],
          [115.426264, 39.950502],
          [116.677853, 40.970888],
        ],
      },
    ],
  };

在这里插入图片描述

geo地理坐标系搭配lines绘制路线

lines经常配合geo使用，用于绘制路线图。与line折线图不同的是,lines主要用来绘制多个线条，数据写法也不同。

lines:路径图
coords:一个包含两个到多个二维坐标的数组

 let options = {
    tooltip: {},
    geo: {
      map: "china",
      roam: true,
      zoom: 1,
      itemStyle: {
        // areaColor: "blue",
      },
      regions: [
        {
          name: "河北省",
          itemStyle: {
            areaColor: "yellow",
          },
        },
      ],
    },
    series: [
      {
        type: "lines",
        lineStyle: {
          color: "red",
          width: 3,
        },
        data: [
          {
            coords: [
              [117.000923, 36.675807],
              [114.27261, 24.700624],
            ],
          },
          {
            coords: [
              [115.057317, 24.703343],
              [114.27261, 24.700624],
            ],
          },
        ],
      },
    ],
  };

在这里插入图片描述

使用高德或百度地图

在这里插入图片描述
在html中引入百度地图（要在vue加载前使用，所以放在head中，提前加载）
必须是3.0,1.0会报错

在这里插入图片描述
在echarts中使用

<script setup>
import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import "./vintage";

import "echarts/extension/bmap/bmap";

let myEcharts;
onMounted(() => {
  let canvas = document.getElementById("canvas");
 
  myEcharts = echarts.init(canvas, null, {
    width: 1200,
    height: 1200,
    devicePixelRatio: window.devicePixelRatio,
    locale: "ZH",
  });

  let options = {
    tooltip: {},
    bmap: {
      center: [116.405285, 39.904989],
      roam: true,
      zoom: 18,
    },
    series: [],
  };
  rednderEcharts(options);
});

function rednderEcharts(options) {
  myEcharts.setOption(options);
}
</script>

<template>
  <div id="canvas" width="400" height="400"></div>
</template>

<style scoped>
#canvas {  //一定要在给 元素设置宽高，否则会报错
  width: 1200px;
  height: 1200px;
}
</style>

在这里插入图片描述
添加数据

 let options = {
    tooltip: {},
    bmap: {
      center: [116.405285, 39.904989],
      roam: true,
      zoom: 18,
    },
    series: [
      {
        type: "lines", //这里的线条有动画效果
        coordinateSystem: "bmap",
        lineStyle: {
          color: "yellow",
          width: 1,
        },
        effect: {
          show: true,
          symbol: "",
        },
        data: [
          {
            coords: [
              [117.000923, 36.675807],
              [114.27261, 24.700624],
            ],
          },
          {
            coords: [
              [115.057317, 24.703343],
              [114.27261, 24.700624],
            ],
          },
        ],
      },
    ],
  };

在这里插入图片描述

自定义地图的颜色

可以修改陆地，海洋的颜色

let options = {
    tooltip: {},
    bmap: {
      center: [116.405285, 39.904989],
      roam: true,
      zoom: 18,
      mapStyle: {
        styleJson: [
          {
            featureType: "land",
            elementType: "all",
            stylers: {
              color: "#f3f3f3",
            },
          },
        ],
      },
    },
    series: [
      {
        type: "lines",
        coordinateSystem: "bmap",
        lineStyle: {
          color: "yellow",
          width: 1,
        },
        effect: {
          show: true,
          symbol: "",
        },
        data: [
          {
            coords: [
              [117.000923, 36.675807],
              [114.27261, 24.700624],
            ],
          },
          {
            coords: [
              [115.057317, 24.703343],
              [114.27261, 24.700624],
            ],
          },
        ],
      },
    ],
  };

在这里插入图片描述

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

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

相关文章

Selenium 高频面试题及答案

Selenium 高频面试题及答案

1、什么是 Selenium&#xff1f;它用于做什么&#xff1f; Selenium 是一个用于自动化测试的开源框架。它提供了多种工具和库&#xff0c;用于模拟用户在不同浏览器和操作系统上的行为&#xff0c;并且可用于测试网页应用程序。 2、Selenium WebDriver 和 Selenium IDE 有何区…
阅读更多...
【机器学习300问】100、怎么理解卷积神经网络CNN中的池化操作？

【机器学习300问】100、怎么理解卷积神经网络CNN中的池化操作？

一、什么是池化&#xff1f; 卷积神经网络&#xff08;CNN&#xff09;中的池化&#xff08;Pooling&#xff09;操作是一种下采样技术&#xff0c;其目的是减少数据的空间维度&#xff08;宽度和高度&#xff09;&#xff0c;同时保持最重要的特征并降低计算复杂度。池化操作不…
阅读更多...
JavaWeb_Web——Maven

JavaWeb_Web——Maven

介绍&#xff1a; Maven是Apache公司发行的&#xff0c;一个Java项目管理和构建工具 作用&#xff1a; 1.方便的依赖管理 2.统一的项目结构 3.标准的项目构建流程 模型&#xff1a; Maven通过项目对象模型(POM)和依赖管理模型(Dependency)管理依赖(jar包)&#xff0c;如果新添…
阅读更多...
新闻稿海外媒体投稿，除了美联社发稿（AP）和彭博社宣发（Bloomberg），还有哪些优质的国外媒体平台可以选择

新闻稿海外媒体投稿，除了美联社发稿（AP）和彭博社宣发（Bloomberg），还有哪些优质的国外媒体平台可以选择

发布高质量的新闻稿到海外媒体&#xff0c;除了美联社发稿&#xff08;AP&#xff09;和彭博社发稿&#xff08;Bloomberg&#xff09;&#xff0c;还有许多其他优质的媒体平台可以选择。以下是一些受欢迎和高效的海外媒体发布平台&#xff1a; 路透社 (Reuters) 路透社是全球最…
阅读更多...
HILL密码

HILL密码

一&#xff1a;简介 Hill密码又称希尔密码是运用基本矩阵论原理的替换密码&#xff0c;属于多表代换密码的一种&#xff0c;由L e s t e r S . H i l l Lester S. HillLesterS.Hill在1929年发明。 二&#xff1a;原理 1.对于每一个字母&#xff0c;我们将其转化为对应的数字&am…
阅读更多...
[Android]联系人-删除修改

[Android]联系人-删除修改

界面显示 添加按钮点击&#xff0c;holder.imgDelete.setlog();具体代码 public MyViewHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) {//映射布局文件&#xff0c;生成相应的组件View v LayoutInflater.from(parent.getContext()).inflate(R.layout.d…
阅读更多...
[ C++ ] 类和对象( 中 ) 2

[ C++ ] 类和对象( 中 ) 2

目录 前置和后置重载 运算符重载和函数重载 流插入流提取的重载 全局函数访问类私有变量 友员 const成员 取地址及const取地址操作符重载 前置和后置重载 运算符重载和函数重载 流插入流提取的重载 重载成成员函数会出现顺序不同的情况&#xff08;函数重载形参顺序必须相…
阅读更多...
渗透工具CobaltStrike工具的下载和安装

渗透工具CobaltStrike工具的下载和安装

一、CobalStrike简介 Cobalt Strike(简称为CS)是一款基于java的渗透测试工具&#xff0c;专业的团队作战的渗透测试工具。CS使用了C/S架构&#xff0c;它分为客户端(Client)和服务端(Server)&#xff0c;服务端只要一个&#xff0c;客户端可有多个&#xff0c;多人连接服务端后…
阅读更多...
AbMole - 肿瘤发展与免疫器官的“舞蹈”：一场细胞层面的时间赛跑

AbMole - 肿瘤发展与免疫器官的“舞蹈”：一场细胞层面的时间赛跑

在生物医学领域&#xff0c;肿瘤与免疫系统之间的相互作用一直是研究的热点话题。肿瘤细胞不是孤立存在的&#xff0c;它们与宿主的免疫系统进行着一场复杂的“舞蹈”。 最近&#xff0c;一项发表在《Molecular & Cellular Proteomics》杂志上的研究&#xff0c;为我们揭开…
阅读更多...
＜el-table＞根据后端返回数据决定合并单元格的数量（521特别版）

＜el-table＞根据后端返回数据决定合并单元格的数量（521特别版）

文章目录 一、需求说明二、用到的方法三、代码&#xff08;只展示了本文章重点代码&#xff09; 一、需求说明 &#x1f49d;仅合并第一列&#xff0c;其余为固定列 二、用到的方法 &#x1f48c;合并单元格可以采用三种方法 &#x1f495;1. 手写表格 简单 但没有饿了么写…
阅读更多...
使用bash shell来测试网络连接或通信 _ 统信 _ 麒麟 _ 中科方德

使用bash shell来测试网络连接或通信 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;使用bash shell来测试网络连接或通信 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天我们将讨论如何在国产操作系统统信UOS、麒麟KOS以及中科方德上使用bash shell的内置特性/dev/tcp来测试网络连接或进行简单的网络通信。这种方法不…
阅读更多...
小白入职 必要熟悉 Git / tortoiseGit 工具

小白入职 必要熟悉 Git / tortoiseGit 工具

1.安装Git 1.1 了解Git Git是分布式版本控制系统&#xff0c;没有中央服务器的每个人的电脑就是一个完整的版本库&#xff0c;工作时无需联网可多人协作&#xff0c;只需把各自的修改推送给对方&#xff0c;就可以互相看到对方的修改了 分布式版本控制工具管理方式&#xff…
阅读更多...
Git Large File Storage (LFS) 的安装与使用

Git Large File Storage (LFS) 的安装与使用

Git Large File Storage [LFS] 的安装与使用 1. An open source Git extension for versioning large files2. Installing on Linux using packagecloud3. Getting Started4. Error: Failed to call git rev-parse --git-dir: exit status 128References 1. An open source Git…
阅读更多...
requests_html使用介绍

requests_html使用介绍

文章目录 一、requests_html 基本介绍二、requests_html 基本使用三、发送带有参数的请求四、图片抓取实战案例 一、requests_html 基本介绍 A、装库: pip install requests_html B、介绍: requests 和 requests_html 是同一个作者 二、requests_html 基本使用 A、导包: fro…
阅读更多...
具身人工智能：人工智能机器人如何感知世界

具身人工智能：人工智能机器人如何感知世界

什么是具身人工智能 虽然近年来机器人在智能城市、工厂和家庭中大量出现，但我们大部分时间都在与由传统手工算法控制的机器人互动。这些机器人的目标很狭隘，很少从周围环境中学习。相比之下，能够与物理环境互动并从中学习的人工智能 (AI) 代理（机器人、虚拟助手或其他智能系…
阅读更多...
1-Django开端--学生管理系统

1-Django开端--学生管理系统

目录 项目结构 前端页面: add_data.html class_data.html index.html apps.py models.py views.py settings,py urls.py ...实现简略的身架... 项目结构 前端页面: add_data.html --添加数据. {% extends index/index.html %}{% block content %} <div class&qu…
阅读更多...
泰拉瑞亚从零开始的开服教程

泰拉瑞亚从零开始的开服教程

前言 本教程将讲诉使用Linux系统搭建泰拉瑞亚服务器&#xff08;因为网上已经有很完善的windows开服教程了&#xff09;&#xff0c;使用的Linux发行版是Debian11,服务端使用的程序是TShock&#xff0c;游戏版本是1.4.4.9 所需要准备的 一台服务器&#xff08;本教程使用的是…
阅读更多...
Vmware 17安装 CentOS9

Vmware 17安装 CentOS9

前言 1、提前下载好需要的CentOS9镜像&#xff0c;下载地址&#xff0c;这里下载的是x86_64 2、提前安装好vmware 17&#xff0c;下载地址 &#xff0c;需要登录才能下载 安装 1、创建新的虚拟机 2、在弹出的界面中选择对应的类型&#xff0c;我这里选择自定义&#xff0c;点…
阅读更多...
导弹初识（一）

导弹初识（一）

目录 导弹初识1 导弹是什么2 导弹的分类2.1 按飞行方式2.2 按发射/目标2.2.1 空空导弹2.2.1 空地导弹2.2.1 地空导弹2.2.1 地地导弹 2.3 按打击目标 3.实例3.1 防空导弹3.2 低空防空导弹武器系统 本文节选自 zh&#xff0c;还有百度百科 导弹初识 1 导弹是什么 导弹两个字拆…
阅读更多...
民国漫画杂志《时代漫画》第15期.PDF

民国漫画杂志《时代漫画》第15期.PDF

时代漫画15.PDF: https://url03.ctfile.com/f/1779803-1247458444-8befd8?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;
阅读更多...
最新文章

Copyright @ 2022~2023