三步完成echers展示离线地图

news2024/9/23 19:19:55

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

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

相关文章

python实现pdf双页文档转png图片,png图片裁剪为左右两等分,再合并为新的pdf单页文档

一、问题引入 现有pdf双页文档如下: 现按照以下页码次序对pdf双页文档进行裁剪和拼接,其中有两点需要特别注意,一是封面页只裁剪中间部分,二是文档是从右往左的顺序排版的 二、python程序 import os import office from PIL …

vue3 组合式api中 ref 和$parent 的使用

ref 的使用 vue3中, 在 组件中添加一个 component ref“xxx” ,就可以在父组件中得到 子组件的 dom 对象, 以及 虚拟的 dom 对象, 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了 ref 的使用方法 vue3中ref 的特点 以上…

h5 ws 客户端 监听ws服务器广播的信息

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>AI智能写作</title><!-- Bootstrap CSS --><meta charset"utf-8"><meta name"viewport" content"widt…

常用Web漏洞扫描工具汇总(持续更新中)

常用Web漏洞扫描工具汇总 常用Web漏洞扫描工具汇总1、AWVS&#xff0c;2、OWASP Zed&#xff08;ZAP&#xff09;&#xff0c;3、Nikto&#xff0c;4、BurpSuite&#xff0c;5、Nessus&#xff0c;6、nmap7、X-ray还有很多不是非常知名&#xff0c;但可能也很大牌、也较常见的。…

气传导耳机品牌推荐哪些?2023气传导耳机排行榜分享

​气传导耳机的出现&#xff0c;为我们带来了更加便捷和舒适的使用体验&#xff0c;同时也让我们能够更加自由地享受音乐和其他娱乐内容。因此&#xff0c;如果你正在寻找一款高品质的气传导耳机&#xff0c;不妨考虑一下以下气传导耳机的推荐&#xff01; Top1&#xff1a;南…

【斗破苍穹】天府联盟成立,三大势力加入,美杜莎缺席副盟主

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析【斗破苍穹】 在斗破苍穹中&#xff0c;身为主角的萧炎可以说建立了不少势力&#xff0c;最开始是磐门&#xff0c;这算是一个很小的势力&#xff0c;成员都是迦南学院的学生&#xff0c;而且战力普遍不高&#xff0c;全靠…

从零开始的Hadoop学习(六)| HDFS读写流程、NN和2NN工作机制、DataNode工作机制

1. HDFS的读写流程&#xff08;面试重点&#xff09; 1.1 HDFS写数据流程 1.1.1 剖析文件写入 &#xff08;1&#xff09;客户端通过 Distributed FileSystem 模块向 NameNode 请求上传文件&#xff0c;NameNode检查目标文件是否已存在&#xff0c;父目录是否存在。 &#x…

持续集成与持续交付(CI/CD):探讨在云计算中实现快速软件交付的最佳实践

文章目录 持续集成&#xff08;CI&#xff09;的最佳实践持续交付&#xff08;CD&#xff09;的最佳实践云计算环境下的特别注意事项 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&am…

基于微信小程序的反诈科普平台

任何系统都要遵循系统设计的基本流程&#xff0c;本系统也不例外&#xff0c;同样需要经过市场进行调研&#xff0c;论文需求进行分析&#xff0c;概要设计&#xff0c;系统详细设计&#xff0c;测试和编码等步骤&#xff0c;设计并实现了反诈科普平台。系统选用java语言&#…

带量采购药品数据查询集采分析平台(建议收藏!)

药品集采常态化下对不同中标企业的影响不尽相同&#xff0c;对于市场份额较大且拥有多款重要药品的大型企业来说&#xff0c;集采能够保持其市场份额&#xff0c;尽管被集采的药品可能会面临销售下降的局面&#xff0c;但该企业还有其他产品可以填补&#xff0c;整体影响不大。…

学习Bootstrap 5的第一天

目录 Bootstrap 简介 什么是 Bootstrap 5&#xff1f; Bootstrap5 与3 & 4的对比 总体对比&#xff1a; 具体对比&#xff1a; 起源 为什么要使用 Bootstrap&#xff1f; Bootstrap 5 包含的内容 Bootstrap5 实例 Bootstrap5 安装使用 使用 Bootstrap5 CDN 国内…

有名管道FIFO

目录 1、概述2、通过命令创建有名管道3、通过函数创建有名管道4、有名管道读写操作5、有名管道注意事项 1、概述 管道&#xff0c;由于没有名字&#xff0c;只能用于亲缘关系的进程间通信。为了克服这个缺点&#xff0c;提出了命名管道&#xff08;FIFO&#xff09;&#xff0…

风向变了!全域电子架构争夺战打响,玩家如何抢夺“软”黄金?

进入2023年&#xff0c;智能汽车已经进入了硬件快速革新的全新周期。从分布式架构到功能集成的域控制架构&#xff0c;再到如今的中央集中式电子架构&#xff0c;新一轮的产业链格局重塑已经启动。 在8月30日举办的2023年度&#xff08;第十五届&#xff09;高工智能汽车开发者…

Web3 社交平台如何脱颖而出?我们和 PoPP 聊了聊

能够颠覆 Web2 传统模式的社交产品有着怎样的特征&#xff1f;PoPP 作为专注于 Web3 的私域流量变现平台&#xff0c;为开发者和用户提供了社交产品发展的新路径&#xff0c;让社区用户充分实现互动交流&#xff0c;着力于创作内容的激励与变现。事实上&#xff0c;面对 Web3 社…

沐风老师3DMAX厨房橱柜生成器KitchenCabinetGenerator教程

3DMAX厨房橱柜生成器插件使用方法 3DMAX橱柜生成器KitchenCabinetGenerator是一个在3dMax中自动创建三维橱柜模型的高效脚本。它有多种风格的台面、门和橱柜&#xff0c;可以灵活地应用于Archviz项目&#xff0c;同时为3D艺术家节省大量时间。 【适用版本】 1.3dMax2018 – 20…

如何辨别不同等级的小红书美妆博主?

在当下的社交媒体时代&#xff0c;美妆博主已经成为了各大平台上备受关注的群体。他们以其出色的妆容技术、对美妆产品的独到见解以及精心打造的个人形象&#xff0c;吸引了大批粉丝的关注。今天给大家分享下&#xff0c;如何辨别不同等级的小红书美妆博主&#xff1f; 一、首先…

谷歌将在印度和日本推出生成式AI搜索服务SGE;OpenAI手把手官方教学

&#x1f989; AI新闻 &#x1f680; 谷歌将在印度和日本推出生成式AI搜索服务SGE 摘要&#xff1a;谷歌宣布其生成式AI搜索服务SGE将首次登陆印度和日本&#xff0c;并需通过加入Search Labs才能使用该功能。日本用户可使用日语&#xff0c;印度用户可选择使用英语或印地语。…

Ubuntu18.04系统下通过ROS控制Kinova真实机械臂

一、Kinova官方Development center控制 1.通过USB连接机械臂和电脑 2.Development center路径&#xff1a;文件夹Other Locations—Computer—opt—JACO-SDK—GUI—Development center(双击打开即可) 3.我们实验室自己搭建的双臂kinova机器人&#xff0c;通过Virtual Joystic…

RT-Thread 线程管理(一)

线程管理 在日常生活中&#xff0c;要完成一个大任务&#xff0c;一般会将它分解成多个简单、容易解决的小问题&#xff0c;小问题逐个被解决&#xff0c;大问题也就随之解决了。 在多线程操作系统中&#xff0c;也同样需要开发人员把一个复杂的应用分解成多个小的、可调度的…

视频一键对讲式消防报警柱

视频一键对讲式消防报警柱 一键对讲式消防报警柱是一种集报警、对讲、定位等多功能于一体的紧急报警设备。它通常安装在公共场所或大型建筑物内&#xff0c;用于紧急情况下的火灾报警和求助通话。 一键对讲式消防报警柱的主要特点如下&#xff1a; 1. 火灾报警功能&#xff1…