echart地图的小demo12.27

news2025/1/19 17:17:22

图形:

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

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

相关文章

【Pytorch】学习记录分享9——PyTorch新闻数据集文本分类任务实战

【Pytorch】学习记录分享9——PyTorch新闻数据集文本分类任务 1. 认为主流程code2. NLP 对话和预测基本均属于分类任务详细见3. Tensorborad 1. 认为主流程code import time import torch import numpy as np from train_eval import train, init_network from importlib impo…

Neural Networks 期刊投稿指南

一 简介 这是国际神经网络学会、欧洲神经网络学会和日本神经网络学会的官方期刊。 论文类型 文章&#xff1a; 原创的、全文长度的文章将被考虑&#xff0c;前提是它们除了摘要形式外尚未发表&#xff0c;并且没有同时在其他地方进行审查。作者可以自愿但不是必须建议一位编辑…

<JavaEE> TCP 的通信机制(二) -- 连接管理(三次握手和四次挥手)

目录 TCP的通信机制的核心特性 三、连接管理 1&#xff09;什么是连接管理&#xff1f; 2&#xff09;“三次握手”建立连接 1> 什么是“三次握手”&#xff1f; 2> “三次握手”的核心作用是什么&#xff1f; 3&#xff09;“四次挥手”断开连接 1> 什么是“…

NineData产品功能重点发布(11月下+12月上)

12 月上半月 1.1 SQL 任务支持 MongoDB 介绍&#xff1a;SQL 任务功能已支持 MongoDB 数据源&#xff0c;可以通过 SQL 任务发起对 MongoDB 的变更申请&#xff0c;支持立即执行或定时执行。 场景&#xff1a; 安全变更&#xff1a;需要对企业成员提交的数据变更进行预审的场…

「Kafka」入门篇

「Kafka」入门篇 基础架构 Kafka 快速入门 集群规划 集群部署 官方下载地址&#xff1a;http://kafka.apache.org/downloads.html 解压安装包&#xff1a; [atguiguhadoop102 software]$ tar -zxvf kafka_2.12-3.0.0.tgz -C /opt/module/修改解压后的文件名称&#xff1a; [a…

哪个品牌的运动耳机比较好?蓝牙无线运动耳机推荐

​在运动时&#xff0c;一副合适的耳机能够让你的运动体验提升到一个新的层次。运动耳机需要具备耐用性、稳定性和优秀的音质&#xff0c;以适应各种运动场景。考虑到这些要求&#xff0c;我将为大家推荐几款在运动场景中表现优异的耳机&#xff0c;它们将是你运动时的理想伴侣…

PowerShell对象——数据的另一个名称

PowerShell对象—数据的另一个名称 实验 要求&#xff1a;需要运行PowerShell v3 或更新版本PowerShell的计算机 任务&#xff1a; 找出生成随机数字的Cmdlet 找出显示当前时间和日期的Cmdlet 任务#2的Cmdlet产生的对象类型是什么&#xff1f;&#xff08;由Cmdlet产生的对…

【Linux基础开发工具】Linux调试器-gdb

目录 前言 1. 背景 2. 基本使用 总结 前言 GDB&#xff08;GNU Debugger&#xff09;是一个功能强大的开源调试器&#xff0c;它用于调试C、C等程序&#xff0c;在Linux环境下软件开发的过程中&#xff0c;调试是一个至关重要的环节。无论是在开发新的软件还是维护现有的代…

linux cuda环境搭建

1&#xff0c;检查驱动是否安装 运行nvidia-smi&#xff0c;如果出现如下界面&#xff0c;说明驱动已经安装 记住cuda版本号 2&#xff0c;安装cudatoolkit 上官网CUDA Toolkit Archive | NVIDIA Developer 根据操作系统选择对应的toolkit 如果已经安装了驱动&#xff0c;选…

Visual Studio 2013 中创建一个基于 Qt 的动态链接库:并在MFC DLL程序中使用

在本地已经安装好 Qt 的情况下&#xff0c;按照以下步骤在 Visual Studio 2013 中创建一个基于 Qt 的动态链接库&#xff1a; 一、新建 Qt 项目&#xff1a; 在 Visual Studio 中&#xff0c;选择 “文件” -> “新建” -> “项目…”。在 “新建项目” 对话框中&#…

性能手机新标杆,一加 Ace 3 发布会定档 1 月 4 日

12 月 27 日&#xff0c;一加宣布将于 1 月 4 日发布新品一加 Ace 3。一加 Ace 系列秉持「产品力优先」理念&#xff0c;从一加 Ace 2、一加 Ace 2V 到一加 Ace 2 Pro&#xff0c;款款都是现象级爆品&#xff0c;得到了广大用户的认可与支持。作为一加 2024 开年之作&#xff0…

立体匹配算法(Stereo correspondence)SGM

SGM(Semi-Global Matching)原理&#xff1a; SGM的原理在wiki百科和matlab官网上有比较详细的解释&#xff1a; wiki matlab 如果想完全了解原理还是建议看原论文 paper&#xff08;我就不看了&#xff0c;懒癌犯了。&#xff09; 优质论文解读和代码实现 一位大神自己用c实现…

关于“Python”的核心知识点整理大全44

目录 ​编辑 15.3.4 模拟多次随机漫步 rw_visual.py 注意 15.3.5 设置随机漫步图的样式 15.3.6 给点着色 rw_visual.py 15.3.7 重新绘制起点和终点 rw_visual.py 15.3.8 隐藏坐标轴 rw_visual.py 15.3.9 增加点数 rw_visual.py 15.3.10 调整尺寸以适合屏幕 rw_vi…

介绍几种mfc140u.dll丢失的解决方法,找不到msvcp140.dll要怎么处理

如果你在使用电脑时遇到mfc140u.dll丢失错误时&#xff0c;这可能会导致程序无法正常运行&#xff0c;但是大家不必过于担心。今天的这篇文章本将为你介绍几种mfc140u.dll丢失的解决方法&#xff0c;找不到msvcp140.dll要怎么处理的一些解决方法。 一.mfc140u.dll文件缺失会有什…

Docker自建私人云盘系统

Docker自建私人云盘系统。 有个人云盘需求的人&#xff0c;主要需求有这几类&#xff1a; 文件同步、分享需要。 照片、视频同步需要&#xff0c;尤其是全家人都是用的同步。 影视观看需要&#xff08;分为家庭内部、家庭外部&#xff09; 搭建个人网站/博客 云端OFFICE需…

【超图】SuperMap iClient3D for WebGL/WebGPU —— 数据集合并缓存如何控制对象样式

作者&#xff1a;taco 最近在支持的过程中&#xff0c;遇到了一个新问题&#xff01;之前研究功能的时候竟然没有想到。通常我们控制单个对象的显隐、颜色、偏移的参数都是根据对象所在的图层以及对象单独的id来算的。那么问题来了&#xff0c;合并后的图层。他怎么控制单个对象…

PointNet人工智能深度学习简明图解

PointNet 是一种深度网络架构&#xff0c;它使用点云来实现从对象分类、零件分割到场景语义解析等应用。 它于 2017 年实现&#xff0c;是第一个直接将点云作为 3D 识别任务输入的架构。 本文的想法是使用 Pytorch 实现 PointNet 的分类模型&#xff0c;并可视化其转换以了解模…

【开源】基于JAVA的智能教学资源库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课程资源模块2.4 课程作业模块2.5 课程评价模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 课程档案表3.2.2 课程资源表3.2.3 课程作业表3.2.4 课程评价表 四、系统展示五、核心代…

账号租号平台PHP源码,支持单独租用或合租使用

源码简介 租号平台源码&#xff0c;采用常见的租号模式。 平台的主要功能如下&#xff1a; 支持单独租用或采用合租模式&#xff1b; 采用易支付通用接口进行支付&#xff1b; 添加邀请返利功能&#xff0c;以便站长更好地推广&#xff1b; 提供用户提现功能&#xff1b;…

人工智能 机器学习 深度学习:概念,关系,及区别说明

如果过去几年&#xff0c;您读过科技主题的文章&#xff0c;您可能会遇到一些新词汇&#xff0c;如人工智能&#xff08;Artificial Intelligence&#xff09;、机器学习&#xff08;Machine Learning&#xff09;和深度学习&#xff08;Deep Learning&#xff09;等。这三个词…