echarts加钓鱼岛赤尾屿(vue)(亲测有效)

1.首先引入json文件,node_modules/echarts中就有 import chinaData from "../../node_modules/echarts/map/json/china.json" 2.初始化地图,在初始化地图的时候加入钓鱼岛和赤尾屿的数据,在chinaData下的features中加入即可,

 

```initMap(){chinaData.features.push({ "id": "830000", "geometry": { "type": "Polygon", "coordinates": ["@@@@B@@@@@@@B@@@B@@@@@@@BA@@@@B@@@@@@@BA@@@@B@@@@@B@@@@@B@@@@@@@B@@@B@@@@@B@@@@@@@BA@@@@B@@A@@B@@@@A@@B@@@@@B@@A@@@@BA@@@@B@@A@@@A@@A@@A@@A@@@@@A@@A@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@B@@@@AA@@@@A@@@@B@AA@@@@@AA@@@A@BA@@@@A@@A@BAA@@B@@A@@@@@@@@@A@@A@@@@A@@AA@@@@@A@@@@AA@@@@@A@@@A@@@@A@@A@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@@A@@@@B@@@@@BA@@@@@@@@B@@@@@BA@@@@@@B@@B@@B@@@@@B@@@@B@@@@B@@@@@B@@B@@B@@@@B@@@@BB@@@BB@@@@B@@B@@B@@@BB@@@@B@@@@@B@@@@BB@@@@@B@@@@B@A@B@@B@@@@@B@@@@@B@@B@@@@B@@A@@BB@@"], "encodeOffsets": [ [126439, 26370] ] }, "properties": { "cp": [123.476492, 25.744676], "name": "钓鱼岛", "childNum": 1 }},{ "id": "830000", "geometry": { "type": "Polygon", "coordinates": ["@@@@B@@@@@@@B@@@B@@@@@@@BA@@@@B@@@@@@@BA@@@@B@@@@@B@@@@@B@@@@@@@B@@@B@@@@@B@@@@@@@BA@@@@B@@A@@B@@@@A@@B@@@@@B@@A@@@@BA@@@@B@@A@@@A@@A@@A@@A@@@@@A@@A@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@B@@@@AA@@@@A@@@@B@AA@@@@@AA@@@A@BA@@@@A@@A@BAA@@B@@A@@@@@@@@@A@@A@@@@A@@AA@@@@@A@@@@AA@@@@@A@@@A@@@@A@@A@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@@A@@@@B@@@@@BA@@@@@@@@B@@@@@BA@@@@@@B@@B@@B@@@@@B@@@@B@@@@B@@@@@B@@B@@B@@@@B@@@@BB@@@BB@@@@B@@B@@B@@@BB@@@@B@@@@@B@@@@BB@@@@@B@@@@B@A@B@@B@@@@@B@@@@@B@@B@@@@B@@A@@BB@@"], "encodeOffsets": [ [126439, 26370] ] }, "properties": { "cp": [124.33, 25.55], "name": "赤尾屿", "childNum": 1 }})let chart = this.$echarts.init(document.getElementById("map"));this.$echarts.registerMap('china', chinaData);let mapName='china'let option = {visualMap: {show: false,type: 'piecewise',left: 'left',top: 'bottom',orient: 'vertical',calculable: false,showLabel: false,inRange: {color: ['#82c96e', '#FFD700', '#fc4836'],}},geo: {show: true,layoutCenter: ['50%', '50%'],layoutSize: '120%',map: mapName,label: {normal: {show: true},emphasis: {show: true,}},itemStyle: {normal: {areaColor: '#ffffff',borderColor: '#3B5077',},emphasis: {areaColor: '#ff945c',}}},series: [{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: false,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: [{"name":"福建","value":10},{"name":"西藏","value":10},{"name":"贵州","value":10},{"name":"上海","value":10},{"name":"广东","value":10},{"name":"湖北","value":10},{"name":"湖南","value":10},{"name":"安徽","value":10},{"name":"四川","value":10},{"name":"新疆","value":10},{"name":"江苏","value":10},{"name":"吉林","value":10},{"name":"宁夏","value":10},{"name":"全国","value":10},{"name":"河北","value":10},{"name":"河南","value":10},{"name":"广西","value":10},{"name":"海南","value":10},{"name":"江西","value":10},{"name":"重庆","value":10},{"name":"云南","value":10},{"name":"北京","value":10},{"name":"甘肃","value":10},{"name":"山东","value":10},{"name":"陕西","value":10},{"name":"浙江","value":10},{"name":"内蒙古","value":10},{"name":"青海","value":10},{"name":"辽宁","value":10},{"name":"天津","value":10},{"name":"黑龙江","value":10},{"name":"山西","value":10},{"name":"台湾","value":10}]},]};chart.setOption(option,true);chart.on('mouseover',  (param) => {if(param.data == null || param.data.name ==null){return;}console.log(param)});},
3.再在页面上定义即可,contact-map样式中定义宽高。
<div id="map" class="contact-map"></div>
4.mounted中初始化即可
mounted(){this.initMap()
},
图例如下:
![alt](https://uploadfiles.nowcoder.com/images/20211030/920687331_1635579017653/151EF4220BCB37887540554004B36BAD)

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

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

相关文章

Design-Pattern设计模式

Design-Pattern设计模式 图说设计模式 图说设计模式 在线书籍 软件模式是将模式的一般概念应用于软件开发领域&#xff0c;即软件开发的 总体指导思路或参照样板。软件模式并非仅限于设计模式&#xff0c;还包括 架构模式、分析模式和过程模式等&#xff0c;实际上&#xff…

FFmpeg常见命令行(四):FFmpeg流媒体

前言 在Android音视频开发中&#xff0c;网上知识点过于零碎&#xff0c;自学起来难度非常大&#xff0c;不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》&#xff0c;结合我自己的工作学习经历&#xff0c;我准备写一个音视频系列blog。本文是音视频系…

leetcode做题笔记77组合

给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 思路一&#xff1a;直接求出组合数将每个组合放进数组中 int** combine(int n, int k, int* returnSize, int** returnColumnSizes) {int size 0, num 1, i;in…

Rust中的智能指针:Box<T> Rc<T> Arc<T> Cell<T> RefCell<T> Weak<T>

Rust中的智能指针是什么 智能指针&#xff08;smart pointers&#xff09;是一类数据结构&#xff0c;是拥有数据所有权和额外功能的指针。是指针的进一步发展 指针&#xff08;pointer&#xff09;是一个包含内存地址的变量的通用概念。这个地址引用&#xff0c;或 ” 指向”…

UML 类图的画法

1.类图的画法 类 整体是个矩形&#xff0c;第一层类名&#xff0c;第二层属性&#xff0c;第三层方法。 &#xff1a;public- : private# : protected空格: 默认的default 对应的类写法。 public class Student {public String name;public Integer age;protected I…

2023杭电第七场补题报告1002 1004 1011 1013

2023杭电第七场补题报告1002 1004 1011 1013 1002 B. Random Nim Game (hdu.edu.cn) 思路 手推一下就可以发现其实除了一次必定结束的其他情况概论都是 1 2 \frac{1}{2} 21​ 代码 #include <bits/stdc.h> using namespace std; #define int long long void solve()…

【hello C++】特殊类设计

目录 一、设计一个类&#xff0c;不能被拷贝 二、设计一个类&#xff0c;只能在堆上创建对象 三、设计一个类&#xff0c;只能在栈上创建对象 四、请设计一个类&#xff0c;不能被继承 五、请设计一个类&#xff0c;只能创建一个对象(单例模式) C&#x1f337; 一、设计一个类&…

Sentinel使用实例

不说了&#xff0c;直接上官方文档 https://github.com/alibaba/spring-cloud-alibaba/blob/master/spring-cloud-alibaba-examples/sentinel-example/sentinel-core-example/readme-zh.md Sentinel Example 项目说明 本项目演示如何使用 Sentinel starter 完成 Spring Clo…

【金融量化】对企业进行估值的方法有哪些?

估值的方法有哪些&#xff1f; 如何对企业进行估值&#xff1f;有2个方法估算。 1 绝对估值法 它是一种定价模型&#xff0c;用于计算企业的内在价值。 比如说你可以根据公司近N年的现金流情况。借此去预测未来N年的现金流情况。所有的现金流数据都可以在年报上查询到。最后…

ios 知识

IOS 类文件.h和.m中interface的区别 大家都知道我们在创建类文件时会发现&#xff1a; #import <UIKit/UIKit.h>interface ViewController : UIViewControllerend和 #import "ViewController.h"interface ViewController ()end那么他们之间有何区别呢&#x…

【Ajax】回调地狱解决方法

回调地狱&#xff08;Callback Hell&#xff09;是指在异步编程中&#xff0c;特别是在嵌套的回调函数中&#xff0c;代码变得深度嵌套、难以阅读和维护的现象。这通常发生在处理多个异步操作时&#xff0c;每个操作都依赖于前一个操作的结果。回调地狱使代码变得难以理解、扩展…

显卡服务器适用于哪些场景

显卡&#xff08;GPU&#xff09;服务器&#xff0c;简单来说&#xff0c;GPU服务器是基于GPU的应用于视频编解码、深度学习、科学计算等多种场景的快速、 稳定、弹性的计算服务。那么壹基比小鑫告诉你显卡服务器主要的用途有哪一些。 一、运行手机模拟器 显卡服务器可支持…

力扣:62. 不同路径(Python3)

题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&…

WebRTC音视频通话-WebRTC本地视频通话使用ossrs服务搭建

iOS开发-ossrs服务WebRTC本地视频通话服务搭建 之前开发中使用到了ossrs&#xff0c;这里记录一下ossrs支持的WebRTC本地服务搭建。 一、ossrs是什么&#xff1f; ossrs是什么呢&#xff1f; SRS(Simple Realtime Server)是一个简单高效的实时视频服务器&#xff0c;支持RTM…

STM32CubeIDE的安装和黑色主题及自动补全代码

STM32CubeIDE之前用过一点时间&#xff0c;但后来因为不习惯放弃了最近在新电脑上又用起来了&#xff0c;感觉相对之前好了很多&#xff0c;其实如果在工作中基本使用的是STM32,用意法的生态软件也挺好的&#xff0c;意法最近在这块也在大力发展&#xff0c;STM32CubeIDE安装包…

【BASH】回顾与知识点梳理(十三)

【BASH】回顾与知识点梳理 十三 十三. 文件内容查阅13.1 直接检视文件内容&#xff1a;cat, tac, nlcat (concatenate)tac (反向列示)nl (添加行号打印) 13.2 可翻页检视&#xff1a;more, lessmore (一页一页翻动)less (一页一页翻动) 13.3 资料撷取&#xff1a;head, tailhea…

【Linux】云服务器自动化部署VuePress博客(Jenkins)

前言 博主此前是将博客部署在 Github Pages&#xff08;基于 Github Action&#xff09;和 Vercel 上的&#xff0c;但是这两种部署方式对于国内用户很不友好&#xff0c;访问速度堪忧。因此将博客迁移到自己的云服务器上&#xff0c;并且基于 Jenkins&#xff08;一款开源持续…

浪涌保护器中SPD防雷模块的主要应用方案

浪涌保护器&#xff08;Surge Protective Device&#xff0c;SPD&#xff09;是一种用于限制瞬态过电压和导引泄放电涌电流的非线性防护器件&#xff0c;用以保护耐压水平低的电器或电子系统免遭雷击及雷击电磁脉冲或操作过电压的损害。SPD可以将过电压泄放到地线或限制过电压到…

类与对象(入门)

目录 1.前言 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1 访问限定符 4.2 封装 5.类的作用域 6.类的实例化 7. 结构体内存对齐规则 8.this指针 8.1 this指针的引出 8.2 this指针的特性 1.前言 C 是 基于面向对象 的&#xff0c; 关注 的是 对象 &#xff0c;…

【Spring】核心容器——依赖自动装配

Spring容器根据bean所依赖的资源在容器中自动查找并注入bean的过程叫做自动装配自动装配的方式 1、按类型 2、按名称&#xff08;耦合性较高&#xff09; 3、按构造方法 自动装配特点 1、自动装配用于对引用类型进行依赖注入&#xff0c;不能对简单类型进行操作 2、自动装配的…