记录一次可视化大屏开发

news2024/10/6 12:25:29

版本: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.coloradmin.cn/o/946436.html

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

相关文章

(动态规划) 剑指 Offer 60. n个骰子的点数 ——【Leetcode每日一题】

❓ 剑指 Offer 60. n个骰子的点数 难度:中等 把 n 个骰子扔在地上,所有骰子朝上一面的点数之和为 s 。输入 n,打印出s的所有可能的值出现的概率。 你需要用一个浮点数数组返回答案,其中第 i 个元素代表这 n 个骰子所能掷出的点…

国民八路参考文献:[8]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑工业出版社,2022.

国民八路参考文献:[8]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑工业出版社,2022&#xff0…

Grid布局详解-看这篇就够了

Grid网格布局的概念,和flex布局的区别 含义:它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局 区别:Gid布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。但是&#…

Autosar存储入门系列04_NvM的CRC比较机制及同/异步写

本文框架 0.前言1. NvM的CRC校验1.1 CRC 比较机制 2. NvM的同步写及异步写2.1 NvM的同步写2.1 NvM的异步写 0.前言 本系列是Autosar存储入门系列,希望能从学习者的角度把存储相关的知识点梳理一遍,这个过程中如果大家觉得有讲得不对或者不够清晰的地方&…

【09期】HashMap常见面试题

简介 HashMap最早出现在JDK1.2中,底层基于散列算法实现。HashMap 允许 null 键和 null 值,是非线程安全类,在多线程环境下可能会存在问题。 1.8版本的HashMap数据结构: 为什么有的是链表有的是红黑树? 默认链表长度大…

Postman脚本批量转接口自动化用例

1、前言 作者之前已经开发了一个生成接口用例的工具 - API接口用例生成器,即将现有的 Postman 脚本转化为接口用例。本篇介绍另一款最近刚开发并项目落地的工具,将 Postman 的 json 脚本文件可以批量转换生成接口用例 - APICase-PostmanForJSON。 2、简…

jmeter接口测试及详细步骤以及项目实战教程

在接口测试项目实战中,JMeter是一款非常强大和流行的自动化测试工具,它可以测试各种类型的应用程序,并通过采样和报告来识别性能瓶颈和API的问题。本文将为你提供一个基于实际项目的JMeter接口测试项目实战教程,指导你如何使用JMe…

驱动day10

练习 基于platform实现 设备树 myplatform_homework{compatible "hqyj,myplatform_homework"; //用于获取节点reg <0x12345678 14>;interrupt-parent <&gpiof>; //引用父节点interrupts <9 0>; //这个节点引入的中断管脚led1-gpi…

Git 简单介绍

Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 一、Git 安装 windows安装&#xff1a;进入网站 https://git-scm.com/ 安装&#xff0c;ubuntu配置&#xff1a;apt install git。当前于 Win 下已安装 Git 版本 2.40.1。 二、配置 设…

ModStartBlog v8.1.0 博客密码访问,内容编辑升级

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场&#xff0c;后台一键快速安装 …

LLMs之Code:SQLCoder的简介、安装、使用方法之详细攻略

LLMs之Code&#xff1a;SQLCoder的简介、安装、使用方法之详细攻略 目录 SQLCoder的简介 1、结果 2、按问题类别的结果 SQLCoder的安装 1、硬件要求 2、下载模型权重 3、使用SQLCoder 4、Colab中运行SQLCoder 第一步&#xff0c;配置环境 第二步&#xff0c;测试 第…

Jetson Xavier NX安装torch环境

设备简介 Jetson Xavier NX是一款具有强大计算能力的AI处理器&#xff0c;它采用了NVIDIA的Turing架构和Volta GPU架构&#xff0c;可以实现高性能的深度学习和推理任务。具体性能如下&#xff1a; CPU&#xff1a;6核心ARM Cortex-A57处理器&#xff0c;最高主频1.5GHz。 GP…

一文讲透 JavaScript 应用的演进历程

在不断发展的软件开发领域中&#xff0c;很少有编程语言像JavaScript一样产生深远的影响。它起初只是一种简单的脚本语言&#xff0c;但如今已成为现代Web的驱动力量&#xff0c;改变了应用构建和体验的方式。本文将带你沿着时间线&#xff0c;穿越JavaScript的演进历程&#x…

【网络BSP开发经验】Linux gmac驱动调试(FH8626)

文章目录 Linux网络设备驱动简介Linux网卡驱动网络协议接口层网络设备接口层设备驱动功能层网络设备与媒介层linux驱动数据结构linux驱动注册过程网络设备驱动的注册与注销linux驱动数据包收发流程 Linux PHY驱动MDIO接口PHY简介PHY关联过程PHY状态机对端MAC情况&#xff08;接…

便携式水质检测仪都测哪些水中指标

水质检测仪分为实验室&#xff08;台式&#xff09;和户外使用的便携式多参数水质检测仪。 便携式的有哪些特点&#xff1f; 相对于实验室的水质分析设备&#xff0c;便携式水质多参数分析仪体积小巧&#xff0c;结构简单&#xff0c;户外使用更加便捷&#xff0c;功能更丰富。…

OLED透明屏暗斑问题解析:原因、解决方案与行业趋势

OLED透明屏作为一项创新技术&#xff0c;广泛应用于广告、零售和汽车等领域&#xff0c;其高透明度和出色的显示效果备受青睐。 然而&#xff0c;一些用户反映在使用过程中出现了暗斑问题&#xff0c;影响了显示效果。 那么&#xff0c;在这篇文章中&#xff0c;尼伽将和大家…

RT_Thread内核机制学习(六)互斥量

互斥量 互斥量是特殊的信号量&#xff0c;资源个数只能是0、1&#xff0c;实现了优先级继承。 互斥量优点&#xff1a;谁拥有谁释放&#xff0c;优先级继承。 信号量的缺点&#xff1a;谁都可以释放信号量、优先级反转。 HP被MP抢占&#xff0c;优先级反转。 互斥量实现了优…

MySQL备份和还原

前言 mysql日志默认保存在/usr/local/mysql/data 常见的日志&#xff1a; 1、错误日志 2、一般查询日志 3、二进制日志 4、中继日志 5、重做日志 6、回滚日志 7、慢查询日志 配置文件位置 vim /etc/my.cnf 错误日志&#xff0c;用来记录当MySQL启动、停止或运行时发生的错误信…

Java 数据结构使用学习

Set和List的区别 Set 接口实例存储的是无序的&#xff0c;不重复的数据。List 接口实例存储的是有序的&#xff0c;可以重复的元素。 Set 检索效率低下&#xff0c;删除和插入效率高&#xff0c;插入和删除不会引起元素位置改变 <实现类有HashSet,TreeSet>。 List 和数…

Linux-crontab使用问题解决

添加定时进程 终端输入&#xff1a; crontab -e选择文本编辑方式&#xff0c;写入要运行的脚本&#xff0c;以及时间要求。 注意&#xff0c;如果有多个运行指令分两种情况&#xff1a; 1.多个运行指令之间没有耦合关系&#xff0c;分别独立&#xff0c;则可以直接分为两个…