关于如何使用echarts实现市县区地图的可视化

news/发布时间2024/5/8 21:02:13

找了很多资料,终于实现了

获取genjson的方式,很好用!!!

AreaCity Geo格式转换工具 (gitee.io)

然后将数据格式贴在下面就可以了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>石家庄市</title><script src="js/echarts.min.js"></script><script src="js/jquery.js"></script><style>html, body, #main {padding: 0px;margin: 0px;height: 100%;overflow: hidden;}</style>
</head>
<body><div id="main"></div><script type="text/javascript">var mapData = {
//贴在这里
        };var myChart = echarts.init(document.getElementById('main'));echarts.registerMap("luoyang", mapData);var option = {series: [{map: "luoyang",type: "map",aspectScale: 1.0,selectedMode: 'single', //选择类型,
                hoverable: true, //启用鼠标经过高亮
                roam: true, //启用鼠标滚轮缩放
                itemStyle: {normal: {borderWidth: 1,borderColor: '#2F89CF', // 更改轮廓边界颜色
                        areaColor: 'rgba(3, 49, 120, 0.8)', // 更改区域底色为80%透明度的深蓝色
                        label: {show: true,textStyle: {color: '#ffffff', // 更改文字颜色为白色
                                fontSize: 14 // 更改文字大小
                            }}},emphasis: { // 选中样式
                        borderWidth: 1,borderColor: '#00D887',areaColor: 'rgba(3, 63, 150, 0.6)', // 更改鼠标接触颜色为80%透明度的蓝色
                        label: {show: true,textStyle: {color: '#ffffff' // 更改选中文字颜色为白色
                            }}}}}]};myChart.setOption(option);</script></body>
</html>

 效果如图

 

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

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

相关文章

LeetCode 1206. Design Skiplist

原题链接在这里:https://leetcode.com/problems/design-skiplist/description/ 题目: Design a Skiplist without using any built-in libraries. A skiplist is a data structure that takes O(log(n)) time to add, erase and search. Comparing with treap and red-black …

系统渐渐沦为“屎山”,原因是..

相信有很多小伙伴都有小猫这样的体会,尤其是接手一个老的系统的时候,总是会吐槽当前的系统很烂,恨不得马上将其完完全全重构掉。分享是最有效的学习方式。 博客:https://blog.ktdaddy.com/背景 小猫维护现有的系统也有一段时间了,踩坑也不少,事故不少。感兴趣的小伙伴可以…

Word设置样式快捷键(转载)

1.问题 每次都要手动选择,有些隔着几个格子比较麻烦,设置快捷键进行管理 2.解决 参考:Word样式也有“快捷键”,你却不知道! (1)单击【开始】-【样式】组,在需要设置快捷键的样式上单击鼠标右键,在弹出的快捷菜单中选择“修改”命令。(2)打开“修改样式”对话框,单击“…

零门槛打造个人图床:感谢Telegraph-Image

零门槛打造个人图床:感谢Telegraph-Image 更好的阅读体验? 幕前小话 很早之前,我就用 GitHub 和 Cloudflare 搭建了自己的图床,不过没多久就发现 cf 自带的 dev 域名被墙了,于是就没再管它。直到上周,我在课上无聊时用手机随便翻了翻后台,没想到竟然又能打开了!并且后台…

在IDEA中使用Gradle存在的显示乱码问题

项目使用Gradle进行依赖管理,当代码中存在错误时,运行程序时Build界面将报错(这是正常的),但是在报错结果中显示乱码信息,如下所示:解决办法:给IDEA添加JVM参数:-Dfile.encoding=UTF-8,然后重启IDEA即可。 参数修改路径:Help -> Edit Custom VM Options...【参考…

基于Rust的Tile-Based游戏开发杂记(02)ggez绘图实操

尽管ggez提供了很多相关特性的demo供运行查看,但笔者第一次使用的时候还是有很多疑惑不解。经过仔细阅读demo代码并结合自己的实践,逐步了解了ggez在不同场景下的绘图方式,在此篇文章进行一定的总结,希望能够帮助到使用ggez的读者。供运行查看,但笔者第一次使用的时候还是…