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-40text: ["最小值", "最大值"], // 调控颜色的条上下的文字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],],},],},],};

在这里插入图片描述

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

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

相关文章

C++中string类的初步介绍

C语言中的字符串 在C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;C标准库中提供了一系列str系列的库函数&#xff0c;但这些库函数与字符串是分离的&#xff0c;不符合面向对象的编程思想。 string类的大致介绍 1.string是表示字符串的字符串类 2.stri…

GpuMall智算云:meta-llama/llama3/Llama3-8B-Instruct-WebUI

LLaMA 模型的第三代&#xff0c;是 LLaMA 2 的一个更大和更强的版本。LLaMA 3 拥有 35 亿个参数&#xff0c;训练在更大的文本数据集上GpuMall智算云 | 省钱、好用、弹性。租GPU就上GpuMall,面向AI开发者的GPU云平台 Llama 3 的推出标志着 Meta 基于 Llama 2 架构推出了四个新…

pycharm画图猫和老鼠

在PyCharm中&#xff0c;你可以使用turtle模块来画图。以下是一个简单的例子&#xff0c;展示如何使用turtle模块来绘制一个猫和一个老鼠。 import turtle # 设置窗口标题 turtle.title("画图猫和老鼠") # 创建两个turtle对象&#xff0c;一个用于绘制猫&#xf…

AWS联网和内容分发之API Gateway

Amazon API Gateway是一种完全托管的服务&#xff0c;可以帮助开发人员轻松创建、发布、维护、监控和保护任意规模的API。API充当应用程序的前门&#xff0c;可从您的后端服务访问数据、业务逻辑或功能。使用API Gateway&#xff0c;您可以创建RESTful API和WebSocket API&…

lightGBM 集成学习模型 - 以银行风控业务为例

LightGBM&#xff08;Light Gradient Boosting Machine&#xff09;是基于梯度提升决策树&#xff08;GBDT&#xff09;的一种改进实现。其核心思想是通过加法模型&#xff08;additive model&#xff09;和前向分布算法&#xff08;forward distribution algorithm&#xff09…

Qt pro工程文件编写汇总(区分debug和release、32位和64位的方法,编译输出目录等)

前言&#xff1a; 从事qt开发已经好几年了&#xff0c;但有关pro编写的一些细节问题一直没有一个很好的梳理汇总——因为实际工作开发中&#xff0c;往往只需要编译特定版本的软件&#xff08;例如32位release版本&#xff09;&#xff0c;项目创建好后并设置好编译路径&#x…

ML307R OpenCPU GPIO使用

一、GPIO使用流程图 二、函数介绍 三、GPIO 点亮LED 四、代码下载地址 一、GPIO使用流程图 这个图是官网找到的&#xff0c;ML307R GPIO引脚电平默认为1.8V&#xff0c;需注意和外部电路的电平匹配&#xff0c;具体可参考《ML307R_硬件设计手册_OpenCPU版本适用.pdf》中的描…

零基础PHP入门(一)选择IDE和配置环境

配置环境 官网下载安装包&#xff0c;windows https://windows.php.net/download#php-8.3 我是下载的最新版&#xff0c;也可以切换其他版本 https://windows.php.net/downloads/releases/archives/ 下载好压缩文件后&#xff0c;双击解压到一个目录 D:\soft\php 复制ph…

成都爱尔眼科医院《中、欧国际近视手术大数据白皮书2.0》解读会圆满举行

2024年5月12日&#xff0c;爱尔眼科联合中国健康促进基金会健康传播与促进专项基金、新华社新媒体中心与中南大学爱尔眼科研究院、爱尔数字眼科研究所重磅发布《中、欧国际近视手术大数据白皮书2.0》。这是继2021、2022年在国内相继发布《国人近视手术白皮书》、《2022中、欧近…

Ubuntu系统初始化相关配置

目录 Ubuntu文件传输: ubuntu怎么打开word:安装wps(应用中心搜索) Ubuntu安装annoconda

模型蒸馏笔记

文章目录 一、什么是模型蒸馏二、如何蒸馏三、实践四、参考文献 一、什么是模型蒸馏 Hinton在NIPS2014提出了知识蒸馏&#xff08;Knowledge Distillation&#xff09;的概念&#xff0c;旨在把一个大模型或者多个模型ensemble学到的知识迁移到另一个轻量级单模型上&#xff0…

【SpringBoot】SpringBoot中防止接口重复提交(单机环境和分布式环境)

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f33c;前言 &#x1f512;单机环境下防止接口重复提交 &#x1f4d5;导入依赖 &#x1f4c2;项目结构 &#x1f680;创建自定义注解 ✈创建AOP切面 &#x1f697;创建Conotroller &#x1f4bb;分布…

构建高效的在线培训机构CRM应用架构实践

在当今数字化时代&#xff0c;在线培训已成为教育行业的重要趋势之一。为了提供更好的学习体验和管理服务&#xff0c;在线培训机构需要构建高效的CRM&#xff08;Customer Relationship Management&#xff09;应用架构。本文将探讨在线培训机构CRM应用架构的设计与实践。 一、…

PTA 6-3 入侵者围剿第二关3情报解密

经过上一步已经将2个分队得到的秘密情报合并到一起&#xff0c;并进行了信息去重。接下来&#xff0c;经过情报的分析&#xff0c;发现情报进行加密的方式&#xff0c;将链表从正中间断开&#xff0c;然后后面的链表全部接到前面&#xff0c;输出来的次序就是敌方的武器发射次序…

绿色智能:AI机器学习在环境保护中的深度应用与实践案例

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

在vps的centos系统中用Python和青龙检测网页更新

环境&#xff1a;vps&#xff0c;centos7&#xff0c;python3.8.10&#xff0c;青龙面板&#xff08;用宝塔安装&#xff09; 任务&#xff1a;用python代码&#xff0c;监控一个网站页面是否有更新&#xff08;新帖子&#xff09;&#xff0c;若有&#xff0c;则提醒&#xf…

【数据结构】二叉树的认识与实现

目录 二叉树的概念&#xff1a; 二叉树的应用与实现&#xff1a; 二叉树实现接口&#xff1a; 通过前序遍历的数组"ABD##E#H##CF##G##"构建二叉树 二叉树节点个数​编辑 二叉树叶子节点个数 二叉树第k层节点个数 二叉树查找值为x的节点​编辑 二叉树前序遍…

XSS+CSRF攻击

一、前言 在DVWA靶场的XSS攻击下结合CSRF攻击完成修改密码 也就是在具有XSS漏洞的情况下实施CSRF攻击 二、实验 环境配置与上一篇博客一致&#xff0c;有兴趣可以参考CSRF跨站请求伪造实战-CSDN博客 首先登录DVWA&#xff0c;打开XSS模块 name随便输入&#xff0c;message…

嵌入式0基础开始学习 Ⅲ Linux基础(1)Linux基本命令

1.APT unbuntu中功能最强大的命令行软件包管理工具&#xff0c; 用来获取&#xff0c;安装&#xff0c;编译&#xff0c;卸载&#xff0c;查询软件包。 工作原理; /etc/apt/sources.list -> 文件 用来指针ubuntu的软件源服务器…

HQL面试题练习 —— 合并数据

题目来源&#xff1a;京东 目录 1 题目2 建表语句3 题解 1 题目 已知有数据 A 如下&#xff0c;请分别根据 A 生成 B 和 C。 数据A ------------ | id | name | ------------ | 1 | aa | | 2 | aa | | 3 | aa | | 4 | d | | 5 | c | | 6 | aa…