![](https://img-blog.csdnimg.cn/20210123105643314.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
可视化大屏+echarts
文章平均质量分 71
数据可视化大屏作为直观,有效的信息传递方式被广泛应用,技术的发展也也使数据可视化的开发越来越简单,这里也对平时开发中遇到相关技术性问题进行描述,以帮助更多遇到同样问题的快速解决。
觉醒法师
勤学习、干实事。
展开
-
解决页面等比缩放问题
近些年可视化数据大屏技术早已成熟,在市场上相关技术也是五花八门;通常情况是自行开发,要不找技术比较成熟大厂定制,或者使用较成熟的低代码平台实现。技术门槛比较低,不过在数据大屏项目实施过程中会发现,需要调整屏幕分辨率,页面大小自适应,字体大小等问题;由于网页中最小字段12px,通过样式控制非常麻烦;此篇将使用CSS3新特性transform技术,来实现分辨率变化后,还可以正常显示页面。原创 2023-06-30 23:53:34 · 4470 阅读 · 2 评论 -
Echart地图的省级,以及所有地市级下载与使用
echart在开发地图时,会遇到下钻显示子区域地图数据。比如江苏省,下钻到市级南京,南京再下钻到区级。在阿里的数据可视化平台,可以通过ajax方式:`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json` 进行获取,但有些项目需要在本地不联网状态下正常显示。此时我们就需要把每级数据的json文件下载下来,但一个一个下载太麻烦,这里提供一段nodejs抓取数据代码,通过上级区域数据的地址,就可以下载所有下级数据了。......原创 2022-08-08 10:47:31 · 3481 阅读 · 2 评论 -
解决echarts中地图重叠问题
在使用Echarts开发项目时,困扰许久的地图重叠问题,无意间在echarts官方文档中找到了解决方案。示例:如上图,其代码如下:geo: { backgroundColor:'#232e67', map: 'china', roam: true,},series: [ { backgroundColor:'#232e67', name: '用户分布', type: 'map', mapType: 'china', data: [] }]该写法会原创 2021-01-10 12:30:49 · 11848 阅读 · 20 评论 -
数据大屏开发基础(echarts+rem.js)
目前数据大屏开发项目比较多,但很多新手不清楚从何下手,其实上手很容易;另外 ,当前流行前端框也有很多,比如angularJs, vueJs,reactJs等;不过不必使用这些框架增加额外的学习成本,也可以快速开发数据大屏。这里直接使用html+css+js+echarts进行讲解。1.大屏尺寸这里使用1920*1080为例。2.创建rem.js文件代码如下:!function(n){ var e=n.document, t=e.documentElement原创 2021-01-20 17:42:27 · 1805 阅读 · 1 评论