echart地图的小demo12.27

图形:

DataV.GeoAtlas地理小工具系列

点击以上链接进入--》

再点击箭头---》复制坐标到文件: 取名为 china.json中 (文件名自定义)  

<template>
  <div class="map" ref="chartMap">地图</div>
</template>
<script>
import * as echarts from "echarts";
import chinaJSON from "./china.json";
export default {
  name: "",
  data() {
    return {
      data: [
      
      ],
    };
  },
  methods: {
    drawChart() {
      // 注册地图
      echarts.registerMap("china", chinaJSON);
      let myChart = echarts.init(this.$refs.chartMap);
      myChart.setOption({
        backgroundColor: "#7E7667", //设置地图的背景颜色
        geo: [
          {
            type: "map",
            map: "china",
            roam: true, //地图是否可以拖拽移动,默认是不可以的
            zoom: 1.2, // 地图比例
            //地图的位置调试  距离容器上下左右的距离 有点类似内边距padding做挤压
            left: 150,
            top: 150,
            right: 150,
            bottom: 0,
            label: {
              show: true, //是否显示地图上的文字
              fontSize: 12, //文字大小
              color: "#fff", //文字颜色
            },
            itemStyle: {
              areaColor: "RGB(172,160,242,.2)", //地图每一个区块的颜色
              borderWidth: 2, //设置地图的外层边框宽度
              borderColor: "#F9CA3F", //设置地图的外层边框颜色
              shadowColor: "rgba(1,34,73,0.48)", //为地图设置阴影内容
              shadowBlur: 10,
              shadowOffsetX: -15,
              shadowOffsetY: 15,
            },
            emphasis: {
              label: {
                fontSize: 40, //高亮之后地图文字大小变化
              },
              itemStyle: {
                areaColor: "#F3511D", //高亮之后地图每一个区块的颜色
              },
            },
          },
        ],
        series:[
        {
				type: 'lines',
				coordinateSystem: 'geo', //该系列使用的坐标系是地图
				z:99,//折线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
				zlevel: 2,//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
				effect: {
					show: true,
					period: 2, //箭头指向速度,值越小速度越快
          delay:1,
					trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
					symbol: 'arrow', //箭头图标
					symbolSize: 10, //图标大小
				},
				lineStyle: {
            type: 'dotted', //线条样式
					  color: 'rgba(79, 141, 245, 1)',
						width: 2, //尾迹线条宽度
						opacity: 1, //尾迹线条透明度
						curveness: .3 //尾迹线条曲直度
				},
				data:[{
        coords: [[116.4551, 40.2539], [119.5313, 29.8773]]
    },{
        coords: [[117.29, 32.0581], [119.5313, 29.8773]]
    },{
        coords: [[114.3896, 30.6628], [119.5313, 29.8773]]
    },{
        coords: [[114.4995, 38.1006], [119.5313, 29.8773]]
    }]
			},
        ]
      });
    },
  },
  created() {},
  mounted() {
    this.drawChart();
  },
};
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
  // background-color: aquamarine;
}
</style>

备注:里面的coords 是坐标

(简单地图小demo对我都是折磨,东找找西找找,第一次写地图,有点难)

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

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

相关文章

轻量应用服务器与云服务器CVM对比——腾讯云

腾讯云轻量服务器和云服务器CVM该怎么选&#xff1f;不差钱选云服务器CVM&#xff0c;追求性价比选择轻量应用服务器&#xff0c;轻量真优惠呀&#xff0c;活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三…

科荣AIO UtilServlet存在任意文件读取漏洞

文章目录 产品简介漏洞概述指纹识别漏洞利用修复建议 产品简介 科荣AIO是一款企业管理软件&#xff0c;提供企业一体化管理解决方案。它整合了ERP&#xff08;如进销存、财务管理&#xff09;、OA&#xff08;办公自动化&#xff09;、CRM&#xff08;客户关系管理&#xff09…

【数据库系统概论】第6章-关系数据库理论

真别看吧&#xff0c;抄ppt而已啊 文章目录 6.1 引言6.2 规范化6.2.1 函数依赖6.2.2 码6.2.3 范式&#xff08;Normal Form&#xff09;6.2.4 BC范式6.2.5 规范化小结 6.1 引言 我们有这样一张表&#xff1a; but 为啥这样设计呢&#xff1f;由此引出怎样设计一个关系数据库…

1.2.3 TCP/IP参考模型

一、OSI参考模型与TCP/IP参考模型 1、应用层&#xff1a;将表示层和会话层都纳入其中&#xff0c;形成一个比较大的层次&#xff0c;包含所有的高层协议 2、传输层&#xff1a;实现端到端的&#xff0c;进程与进程之间的通信。 3、网际层&#xff1a;TCP/IOP模型中最关键的部…

VScode——下载、安装、配置C/C++环境(windows)

一.快速下载 还在因为vscode官方下载慢而头疼嘛&#xff0c;按这个步骤来直接起飞兄弟萌 首先进入vscode官方网站然后选择对应版本下载然后进入浏览器下载页面复制下载链接粘贴到地址栏 将地址中的/stable前换成vscode.cdn.azure.cn 即可实现超速下载 下面是一个国内镜像的下…

一种删除 KubeSphere 中一直卡在 Terminating 的 Namespace--KubeSphere Logging System的简单方法

文章目录 一、问题提出二、删除方法1&#xff0c;获取kubesphere-logging-syste的详细信息json文件2&#xff0c;编辑kubesphere-logging-system.json3&#xff0c;执行清理命令 三、检查结果 一、问题提出 在使用 KubeSphere 的时候发现有一个日志服务KubeSphere Logging Sys…

C语言——指针题目“指针探测器“

如果你觉得你指针学的自我感觉良好&#xff0c;甚至已经到达了炉火纯青的地步&#xff0c;不妨来试试这道题目&#xff1f; #include<stdio.h> int main() {char* c[] { "ENTER","NEW","POINT","FIRST" };char** cp[] { c 3…

我的NPI项目之行业黑话 -- 电子/机构/软件/认证

因为最近的NPI项目&#xff0c;参加了很多项目的会议&#xff0c;有电子/机构/软件/认证相关的各方面的专业词汇就出现了。这里我将之称为黑话&#xff0c;就是对我&#xff08;纯软件) 来说是黑盒的话。这里简单记录并用于理解。 EE有关&#xff1a; Layout&#xff0c;一直…

腾讯云轻量服务器和云服务器CVM该怎么选?区别一览

腾讯云轻量服务器和云服务器CVM该怎么选&#xff1f;不差钱选云服务器CVM&#xff0c;追求性价比选择轻量应用服务器&#xff0c;轻量真优惠呀&#xff0c;活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三…

C++ 一个有bug的贪吃蛇。。。。。。。。

C 一个有bug的贪吃蛇。。。。。。。。 #include <graphics.h> #include<Windows.h> #include<Mmsystem.h> #include<conio.h> #include<time.h> #include<stdio.h> #include<easyx.h> using namespace std; #pragma warning(di…

LeetCode 刷题日志

文章目录 1954. 收集足够苹果的最小花园周长思考&#xff1a;暴力枚举代码实现二分查找代码实现 1954. 收集足够苹果的最小花园周长 1954. 收集足够苹果的最小花园周长 难度&#xff1a; 中等 题目大意&#xff1a; 给你一个用无限二维网格表示的花园&#xff0c;每一个 整…

Spring Boot + Mybatis + vue2 — 实现分页查询

后端 pom.xml文件导入依赖 <!--分页查询--> <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version> </dependency> 配置全局配置…

Python接口自动化之requests请求统一封装

还记得我们之前写的get请求、post请求么&#xff1f; 大家应该有体会&#xff0c;每个请求类型都写成单独的函数&#xff0c;代码复用性不强。 接下来将请求类型都封装起来 自动化用例都可以用这个封装的请求类进行请求&#xff0c;我们将常用的get、post请求封装起来。 imp…

亚信安慧AntDB数据库——通信运营商核心系统的全面演进

AntDB数据库源自通信运营商核心系统&#xff0c;经过15年的平稳运行和不断演进&#xff0c;成功跟随通信技术的升级步伐&#xff0c;逐步迈向5G时代&#xff0c;并且在这期间完成了8次大版本的迭代&#xff0c;为行业树立了技术领先的典范。其独特之处在于具备超融合架构&#…

Laravel的知识点

1.{{ }} 是在 HTML 中内嵌 PHP 的 Blade 语法标识符&#xff0c;表示包含在该区块内的代码都将使用 PHP 来编译运行。 2.两种写法 3.return void 在这段注释中&#xff0c;"return void" 表示该函数或方法没有返回值。这意味着它执行某些操作或任务&#xff0c;但…

数据结构学习 Leetcode494 目标和

关键词&#xff1a;动态规划 01背包 dfs回溯 一个套路&#xff1a; 01背包&#xff1a;空间优化之后dp【target1】&#xff0c;遍历的时候要逆序遍历完全背包&#xff1a;空间优化之后dp【target1】&#xff0c;遍历的时候要正序遍历 题目&#xff1a; 解法一&#xff1a; …

专为初学者设计:Nutch库Java下载器入门指南

概述: Nutch是一款开源的Java爬虫框架&#xff0c;用于抓取、解析、提取和存储网页数据。基于Hadoop的分布式系统&#xff0c;Nutch支持大规模网络爬取&#xff0c;并提供各种插件&#xff0c;包括链接分析、语言检测和内容过滤等功能。 本文旨在介绍如何使用Nutch库编写简单…

Python自动化测试:选择最佳的自动化测试框架

在开始学习python自动化测试之前&#xff0c;先了解目前市场上的自动化测试框架有哪些&#xff1f; 随着技术的不断迭代更新&#xff0c;优胜劣汰也同样发展下来。从一开始工具型自动化&#xff0c;到现在的框架型&#xff1b;从一开始的能用&#xff0c;到现在的不仅能用&…

SD-WAN企业组网的核心要点

随着企业网络需求的不断演进和全球化业务的扩张&#xff0c;SD-WAN&#xff08;软件定义广域网&#xff09;作为一种先进的网络架构技术&#xff0c;逐渐成为企业组网的首选方案。SD-WAN通过提供更灵活、高效和安全的网络连接&#xff0c;帮助企业轻松应对不同地区和业务需求。…

C++ 之LeetCode刷题记录(三)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅&#xff0c;多学多练&#xff0c;尽力而为。 先易后难&#xff0c;先刷简单的。 13、罗马数字转整数 罗马数字包含以下七种字符: I&#xff0c…
最新文章