三步完成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,一经查实,立即删除!

相关文章

go学习笔记 炒土豆丝

今天的主菜是土豆,就来个土豆丝吧。我的大致流程如下: 1.挑选白瓤土豆,洗它 2.土豆去皮 3.土豆切片,切丝,丝要粗细均匀 4.清洗几遍土豆丝,去除上面的淀粉,在清水中泡一小会 5.起锅,放…

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

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

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

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

C#委托(delegate)

概念: 委托(delegate):是一种引用类型的变量,用于存储某个方法的引用地址 C#中的委托(Delegate)是一种类型安全的对象,它可以存储对一个或多个方法的引用。委托可以像其他类型一样作…

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

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

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

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

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

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

Redis 介绍

一.Redis 介绍 Redis 和 Memcached 都是非关系型数据库也称为 NoSQL 数据库,MySQL、 Mariadb、SQL Server、PostgreSQL、Oracle 数据库属于关系型数据 关系型数据库(RDBMS, Relational Database Management System)。 1.1 Redis 介绍 Redis(Remote Dictionary Se…

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图像上写文字 透视变换图像拼接颜色检测轮廓检测人脸检测…

前端无需install快速调试npm包,Console-Import使用

Console-Import是一个Chrome扩展插件,可以方便地从Chrome控制台导入JavaScript和CSS资源。它可以帮助我们在开发过程中快速调试和测试第三方库或代码。 下载地址 安装 要安装Console-Import,请在Chrome网上应用店搜索“Console-Import”,然…

微信小程序发布一个npm包

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

使用Redis统计网站的UV/DAU

HyperLogLog/BitMap 统计UV、DAU需要用到Redis的高级数据类型 M public class RedisKeyUtil {private static final String PREFIX_UV "uv";private static final String PREFIX_DAU "dau";// a single days UVpublic static String getUVKey(String …

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婴幼儿商品商城设计

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

【Hello Algorithm】链表相关算法题

本篇博客介绍: 介绍下链表相关的算法题 链表相关算法题 快慢指针回文结构链表将单向链表按某值划分为左边小,中间相等,右边大的形式复制带随机指针的链表 链表相关的算法题其实都算不上难 我们真正要考虑的是一些边界问题 事实上链表题就是在…

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

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

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

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

python用 xlwings库对Excel进行 字体、边框设置、合并单元格, 版本转换等操作

xlwings 其他的一些单元格读取写入操作网上很多, 下面就写些如何设置单元格的 字体对齐,字体大小、边框, 合并单元格, 这些设置。 import xlwings as xwapp xw.App(visibleTrue, add_bookFalse) app.display_alerts False #…