记录一次可视化大屏开发

news/2024/10/21 15:33:28/

版本:echarts5.3.0 - echarts-gl2.0.8
echarts大部分问题都是版本原因,4.x和5.x区别很大,推荐^5.3.0,因为有些api需要这个版本以上才支持。另外5.1支持svg地图数据格式,与之前的一些用法截然不同,同时拓展性也更加高了,svg地图值得研究下,像svg内插入图片、定义事件等。

这里推荐一下echarts社区的案例,便于开发。

https://www.makeapie.cn/echarts_component/geo_27.html

  1. 起初,lz做了个2d的中国地图,效果图被淹没了。后因需求改造,改成湖北省的了。看图,
    在这里插入图片描述
    说实话,我自己都看不下去了,好丑。说下遇到的问题吧。
const mapJson = require('@/pages/centerPage/charts/china.json')
echarts.registerMap('HBmapJson', HBmapJson)

首先需要去

https://datav.aliyun.com/portal/school/atlas/area_selector

这个地址下载个地图数据,全国的就下载全国数据,指定省的就下载指定省的数据。然后在文件夹导入,在echarts.init的时候注入地图数据。map: “需要是导入的数据名称”,名称是自定义的。

geo: {show: true,map: "china",   // 地图数据名称
}

这里介绍下geo和series.type: ‘map’,geo是地图系列的配置总和,就是series下不管有多少个map都是采用的geo的配置,可以理解为map中公用的配置写到geo里边。
另外,介绍下指定数据的地图配置,像在china.json里边找到"name":"北京市"这种,可以看作是这个区域的id值,可以在geo.regions下对这个区域单独配置。在这里插入图片描述
标记一个坑,目前下载的china.json数据里边基本都会包含南海诸岛以及南海的九段线,这部分是代码没办法去除的,需要我们在china.json数据文件中找到这部分的坐标数据,将这部分数据删除掉。

2d地图使用纹理图:

geo.itemStyle.areaColor是支持纹理图展示的。这里展示关键代码:

let mapBG = new Image()
mapBG.src = require('@/assets/images/chineBG5.png')
areaColor: {image: mapBG,repeat: 'repeat'
}
......
mapBG.onload = () => {chart.setOption(option);
}

后续:lz这里推荐将图片转为base64格式进行导入使用,可以避免很多问题。

地图打点(type: ‘scatter’)、热力点(type: ‘heatmap’)、涟漪点(type: ‘effectScatter’)这些就直接看文档吧。这几个稍微困难点的就是事件监听,有问题可以私信。

3D地图

geo3D/type: ‘map3D’
3d地图的纹理贴图可以较为完美的解决2d地图带来的纹理图模糊问题!!!

shading: 'color',
colorMaterial: {detailTexture: bgBase64Str,
},

3d地图使用纹理图的时候请一定要使用base64格式,使用图片会出现setOptions时图片失效!
在没有特殊材质的要求下,推荐使用shading: 'color’进行渲染,其它两种性能消耗较大,掌控不好会出现页面卡帧的情况。

效果:
在这里插入图片描述
目前3d地图的打点都是打在2d地图上的,然后将3d地图与2d地图对齐,目前没找到更好的方法。
没使用3d的打点是因为客户一定要这个涟漪点,然而设计师没法给我涟漪效果的gif图。

遗留问题:

  1. 2d地图使用图片平铺纹理图时,纹理图会很模糊。
  2. 3d地图只能通过symbol的方式去给打点设置好看的效果图,比如2d地图的涟漪点(type: ‘effectScatter’)该怎么在3d地图上实现?

http://www.ppmy.cn/news/1072703.html

相关文章

一致性算法 Raft Paxos

背景 存在多个服务实例 某个实例数据修改,数据一致性问题某个实例宕机恢复,数据一致性问题跨分区网络异常(脑裂),数据一致性问题 Paxos 是基于消息传递的一致性算法 有 Basic Paxos, Multi Paxos, Fast Paxos 版本…

WordPress 网站使用 CDN 后获取访客真实 IP

WordPress 往数据库存 IP 的时候似乎用的是 REMOTE_ADDR,这样一来数据库里面的评论信息就全是从各个 CDN 服务器来的 IP。 在 wp-config.php 文件中增加下面代码就可以获取 CDN 后访客的真实 IP。这个函数的核心是用解析后的 HTTP_X_FORWARDED_FOR 替换 REMOTE_ADD…

【局部活动轮廓】使用水平集方法实现局部活动轮廓方法研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

无涯教程-Android Studio函数

第1步-系统要求 您将很高兴知道您可以在以下两种操作系统之一上开始Android应用程序的开发- MicrosoftWindows10/8/7/Vista/2003(32或64位)MacOSX10.8.5或更高版本,最高10.9(小牛) GNOME或KDE桌面 第二点是,开发Android应用程序所需的所有工具都是开源的,可以从Web上下载。以…

C++笔记之单例通过GetInstance传递参数

C笔记之单例通过GetInstance传递参数 code review! 文章目录 C笔记之单例通过GetInstance传递参数例1.普通指针的单例例2.结合智能指针和std::call_once例3.编译不通过的错误例子,在GetInstance内不可以使用std::make_shared来创建对象 例1.普通指针的单例 运行 …

利用fsimage分析HDFS小文件

一、Hive 小文件概述 在Hive中,所谓的小文件是指文件大小远小于HDFS块大小的文件,通常小于128 MB,甚至更少。这些小文件可能是Hive表的一部分,每个小文件都包含一个或几个表的记录,它们以文本格式存储。 Hive通常用于…

深度思考rpc框架面经之五:rpc熔断限流、rpc复用连接机制

11 RPC框架如何实现限流和熔断 推荐文章:RPC实现原理之核心技术-限流熔断 11.1 为什么Dubbo要做服务的限流?(根本原因是服务端进行自我保护) 限流是一种常见的系统保护手段。在分布式系统和微服务架构中,一个接口的过度使用可能会导致资源…

研磨设计模式day15策略模式

场景 问题描述 经常会有这样的需要,在不同的时候,要使用不同的计算方式。 解决方案 策略模式 定义: 解决思路: