记录一次可视化大屏开发

news/2024/6/17 4:38:37 标签: echarts

版本: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.niftyadmin.cn/n/4982801.html

相关文章

基于饥饿游戏算法优化的BP神经网络(预测应用) - 附代码

基于饥饿游戏算法优化的BP神经网络(预测应用) - 附代码 文章目录 基于饥饿游戏算法优化的BP神经网络(预测应用) - 附代码1.数据介绍2.饥饿游戏优化BP神经网络2.1 BP神经网络参数设置2.2 饥饿游戏算法应用 4.测试结果:5…

adb 查找应用包名,应用 Activity 等信息

列出设备上的包 不使用参数:adb shell pm list packages,打印设备/模拟器上的所有软件包 根据包名查看应用的activity 命令: dumpsys package 包名 adb shell dumpsys package 包名 petrel-cv96d:/data/app # dumpsys package com.instal…

Linux中的工具:yum,vim,gcc/g++,make/makefile,gdb

目录 1、yum 1.1 查看软件包: 1.2 安装软件包 1.3 卸载软件 2、vim 2.1 vim的三种模式 2.2 vim的基本操作 2.3. vim正常模式命令集 2.3.1 插入模式 2.3.2 移动光标 2.3.3 删除文字 2.3.4 复制 2.3.5 替换 2.3.6撤销上一次操作 2.3.7 更改 2.3.8 跳至…

C# VS调试技巧

一.按照条件调试步骤 ①在需要代码执行的行打断点 ②触发此断点,让代码执行到此处 ③鼠标滑至在断点处,点击设置 ④设置断点条件,如下图所示 二、多线程调试技巧 ①在需要代码执行的行打断点 ②触发此断点,让代码执行到此处…

Python Qt学习(四)Radio Button

代码 # -*- coding: utf-8 -*-# Form implementation generated from reading ui file D:\Works\Python\Qt\qt_radiobutton.ui # # Created by: PyQt5 UI code generator 5.15.9 # # WARNING: Any manual changes made to this file will be lost when pyuic5 is # run again.…

Linux命令查看CPU、内存、IO使用情况简单介绍

文章目录 1. CPU相关介绍1.1 物理CPU1.2 物理CPU内核1.3 逻辑CPU1.4 几核几线程1.5 CPU设计图 2. top 查看系统负载、CPU使用情况2.1 系统整体的统计信息2.2 进程信息2.3 top命令使用 3. lscpu 显示有关 CPU 架构的信息4. free 查看内存信息5. iostat 查看io信息 1. CPU相关介绍…

第三节 函数

第三节 函数 目录 一. 函数是什么?二. C语言中函数的分类1. 库函数:2. 自定义函数 三. 函数的参数1. 实际参数(实参):2. 形式参数(形参): 四&…

按照json文件的值复制图片

按照json文件的值复制图片 文件格式处理当前JSON代码封装增加批处理 文件格式 0是不挑选,1是挑选 处理当前JSON # coding: utf-8 from PIL import Image, ImageDraw, ImageFont import os import shutil import cv2 as cv import numpy as np import jsondef read…