三步完成echers展示离线地图

1.首先要去阿里云提供的地图选择器网站选择你需要下载的地图矢量数据。链接

以湖北省为例:

 2.复制上图中的JSON API,在浏览器输入json api链接,可以看到数据格式是很规整的json数据,在浏览器中右键保存为json格式数据,如本文保存为hubei.json。如图所示;

 3.将json文件放到你需要的项目中,并引入。

// ...全局引入echerts
// 引入json文件
import hubei from './Json/hubei.json'export default {//  ....省略mounted(){echarts.registerMap('湖北省', hubei)this.getEcharts()},metheds: {getEcharts() {let myChart = echarts.init(document.getElementById('mapChart'));let option = {roamController: {show: true,x: 'right',// mapTypeControl: {//     '湖北省': true// }},// geo: {//     itemStyle: {//         areaColor: 'transparent'//     }// },series: [{type: 'map',map: '湖北省',roam: false,label: {normal: {show: true,position: "centerTop",height: 20,padding: 3,rich: {d: {color: '#fff',textBorderColor: '#000',textBorderWidth: 1,fontSize: 10,lineHeight: 24,width: 50,height: 24,marginTop: 20,align: 'center'},},formatter: '{d|{b}}',textStyle: {color: "#ccc",fontSize: "10",},},},itemStyle: {normal: {color: 'transparent',borderColor: '#3e91be',areaColor: 'transparent',areaStyle: { areaColor: 'transparent', },textStyle: {color: 'red' //省份字体颜色}},},data: [],}],}myChart.setOption(option)},}
}

4.展示

 tips: 如果你需要其他格式的文件,可以使用在线转换工具。 在线转换工具

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

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

相关文章

Bytebase 2.7.0 - ​新增分支(Branching)功能

🚀 新功能 新增支持与 Git 类似的分支(Branching)功能来管理 schema 变更。支持搜索所有历史工单。支持导出审计日志。 🎄 改进 变更数据库工单详情页面全新改版。优化工单搜索体验。SQL 审核规则支持针对不同数据库进行独立配…

癌症预测新利器:弹性逻辑回归让健康更可控!

一、引言 癌症是全球范围内健康领域的重大挑战,早期预测和诊断对于提高治疗效果和生存率至关重要。在过去的几十年里,随着医学和数据科学的快速发展,基于机器学习和统计方法的癌症风险预测成为研究的热点。其中,弹性逻辑回归作为一…

热烈祝贺蜀益表面处理成功入选航天系统采购平台

经过航天系统采购平台的严审,眉山市蜀益表面处理科技有限公司成功入选中国航天系统采购供应商库。航天系统采购平台是航天系统内企业采购专用平台,服务航天全球范围千亿采购需求,目前,已有华为、三一重工、格力电器、科大讯飞等企…

使用php实现微信登录其实并不难,可以简单地分为三步进行

使用php实现微信登录其实并不难,可以简单地分为三步进行。 第一步:用户同意授权,获取code //微信登录public function wxlogin(){$appid "";$secret "";$str"http://***.***.com/getToken";$redirect_uriu…

Linux文件管理知识:查找文件(第二篇)

上篇文章详细介绍了linux系统中查找文件的工具或者命令程序locate和find命令的基本操作。那么,今天这篇文章紧接着查找文件相关操作内容介绍。 Find命令所属操作列表中的条目,有助于我们想要的结果输出。上篇文章已讲到find 命令是基于搜索结果来执行操作…

Hadoop HA模式切换

Hadoop HA模式下 主从的切换(操作命令) YARN HA 获取所有RM节点的状态 yarn rmadmin -getAllServiceState获取 rm1 节点的状态 yarn rmadmin -getServiceState rm1手动将 rm1 的状态切换到STANDBY yarn rmadmin -transitionToStandby rm1 ##或者 y…

【LeetCode-中等题】236. 二叉树的最近公共祖先

文章目录 题目方法一:后序遍历 回溯 题目 方法一:后序遍历 回溯 解题的核心就是:采用后序遍历 讨论p,q是否在当前的root的两边,如在两边则返回当前节点root 如何不在两边,只要出现一个节点等于p或者q就…

OpenCV

文章目录 OpenCV学习报告读取图片和网络摄像头1.1 图片读取1.2 视频读取1.1.1 读取视频文件1.1.2读取网络摄像头 OpenCV基础功能调整、裁剪图像3.1 调整图像大小3.2 裁剪图像 图像上绘制形状和文本4.1 图像上绘制形状4.2图像上写文字 透视变换图像拼接颜色检测轮廓检测人脸检测…

微信小程序发布一个npm包

参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 同npm一样流程 npm install weixin_heath_apis

MySQL 8.1.0 推出 InnoDB Cluster 只读副本

全面了解 8.1.0 版本新功能:InnoDB Cluster 只读副本的相关操作。 作者:Miguel Arajo 高级软件工程师 / Kenny Gryp MySQL 产品总监 本文来源:Oracle MySQL 官网博客 * 爱可生开源社区出品。 前言 MySQL 的第一个 Innovation 版本 8.1.0 已…

基于JAVA SpringBoot和HTML婴幼儿商品商城设计

摘要 随着网络技术的发展与普遍,人们的生活发生了日新月异的变化,特别是计算机的应用已经普及到经济和社会的各个领域.为了让消费者网上购物过程变得简单,方便,安全,快捷,网上商城购物成了一种新型而热门的购物方式。网上商城在商品销售的发展中占据了重要的地位,已成为商家展示…

【大数据】数据湖:下一代大数据的发展趋势

数据湖:下一代大数据的发展趋势 1.数据湖技术产生的背景1.1 离线大数据平台(第一代)1.2 Lambda 架构1.3 Lambda 架构的痛点1.4 Kappa 架构1.5 Kappa 架构的痛点1.6 大数据架构痛点总结1.7 实时数仓建设需求 2.数据湖助力于解决数据仓库痛点问…

5 大虚拟数字人工具:视频内容创作的未来

人工智能(AI)给视频内容创作领域带来了一场革命。这一领域的显着进步之一是人工智能生成的会说话的化身的出现,它已经成为制作高质量视频的游戏规则改变者,而无需专业演员或昂贵的视频编辑软件。在这篇博文中,我们将深…

java八股文面试[多线程]——一个线程两次调用start()方法会出现什么情况

典型回答: Java 的线程是不允许启动两次的,第二次调用必然会抛出 IllegalThreadStateException,这是一种运行时异常,多次调用 start 被认为是编程错误。 通过线程的状态图,在第二次调用 start() 方法的时候&#xff…

发表于《自然》杂志:语音转文本BCI的新突破实现62字/分钟的速度

语音脑机接口(BCI)是一项创新技术,通过用户的大脑信号在用户和某些设备之间建立通信通道,它们在恢复残疾患者的言语和通信能力方面具有巨大潜力。 早期的研究虽然很有希望,但尚未达到足够高的精度来解码大脑活动&…

【斗罗Ⅱ】演员阵容曝光,张予曦披发惊艳,奥斯卡选角出新变革

Hello,小伙伴们,我是小郑继续为大家深度解析国漫! 由周翊然和张予曦主演的《斗罗大陆2》电视剧,目前还在拍摄中。和第一部相比,主演阵容来了个全员大换血。服化道有参考动漫,但是做出来的质感,却引起了很多…

Mycat之前世今生

如果我有一个32核心的服务器,我就可以实现1个亿的数据分片,我有32核心的服务器么?没有,所以我至今无法实现1个亿的数据分片。——MyCAT ‘s Plan 话说“每一个成功的男人背后都有一个女人”,自然MyCAT也逃脱不了这个诅…

Flutter的未来与趋势,23年还学吗?

随着移动应用市场的不断扩大,跨平台开发框架的需求也越来越大。Flutter框架可以帮助开发者在不同平台上快速开发高质量的移动应用程序,这种趋势将进一步推动Flutter的发展和普及。 作为一名前端开发工程师,学习Flutter框架是非常有必要的。因…

链表OJ练习(1)

一、移除链表元素 本题为力扣原题203 题目介绍&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 列表中的节点数目范围在 0~10000内 1<Node.val<50 0<val<50 …

构建简单的Node.js HTTP服务器,发布公网远程访问的快速方法

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…