自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 资源 (4)
  • 收藏
  • 关注

原创 vite搭建前端工程

基于Vite搭建前端工程,包含Vite的特性介绍、常用配置项配置方式及相关插件的应用

2024-07-24 16:36:06 1254

原创 webpack常用优化项及配置文件拆分

webpack常用优化项,包括webpack配置文件的拆分,noParse、IgnorePlugin的使用以及在webpack中使用动态链接库将第三方库单独打包,启用多线程打包等。

2024-07-15 10:11:08 1040

原创 webpack基础配置及常用loader

webpack基础配置及常用loader

2024-07-10 21:02:43 679

原创 前端开发常见问题及数据可视化经验分享

前端技术分享交流会-前端开发常见问题及数据可视化经验分享

2024-06-05 08:43:26 986

原创 CSS实现渐变仪表盘的简单尝试

本章节尝试性的使用CSS实现一个简单的渐变仪表盘,给大家提供一些借鉴。实现角向渐变,不得不提一下conic-gradient属性,这个属性是实现角向渐变的关键;其次,数据可视化开发中,以图表的形式展示数据,这就离不开对数据进行处理,将对应的指标数据映射到图表上,也是可视化开发的一项重要工作;另外,图形的展示形式多种多样,高度还原设计师的设计稿,还需要我们对图形有一定的空间想象力。俗话说“条条大道通罗马”,针对设计图形来说,实现方式也有多种多样,只要能达到预期的效果,都是值的学习的

2022-11-28 23:53:54 1465 1

原创 CSS实现3D球面字符云

在大屏可视化应用中,使用3D的场景有很多,复杂的交互动画通常是使用Three.js或echarts-gl来实现,但是在一些简单的3D场景中,CSS也可以实现一些不错的展示效果.

2022-11-27 19:38:40 917

原创 CSS实现个性化水球图

在可视化应用中,水球图也是一种常见的数据展示形式,关于使用CSS实现个性化水球,在相当长的一段时间并没有找到比较简洁的实现方式,因此在以往的可视化作品中,大多采用echarts插件-Liquid Fill Chart来实现,本章节结合CSS相关属性及SVG知识点,将实现水球图的思路简单讲解一下,以便在实际的项目中能够拿来即用、提高开发效率,同时能够对一些不常见的CSS属性有一个回顾

2022-10-29 23:04:27 2261 1

原创 CSS锥形渐变实现环形进度条

本章简单介绍一下CSS锥形渐变(conic-gradient)在可视化图表中的应用场景。采用vue+原生css的形式进行案例展示、在了解本章节之前,需要对vue框架、css变量、css属性conic-gradient有一定程度的认识

2022-10-27 13:55:24 5526 7

原创 加载loading动画

提起加载(loading)效果,想必大家都不会陌生,在目前的移动端、PC端、各类app均广泛使用,使用loading动画能显著提升用户的交互体检,尤其是在页面加载速度比较的慢的情况下,loading动画的作用就更加突出了。实现一个个性化的加载动画效果,并不难,其主要原理是使用css3动画属性-animation、结合transform属性即可

2022-08-22 16:34:12 8114

原创 滚动动画(跑马灯动画)的几种实现方式

在大屏可视化应用中,滚动动效(跑马灯效果)也是常见的一种数据展现方式,本章节针对字幕滚动和列表滚动效果做一个小小的总结,结合vue框架,从原生标签、css动画、javascript三个维度简单阐述以下文字及列表滚动动效的实现方案。...

2022-08-10 19:23:33 4736

原创 原生Canvas实现四分之三圆环图

在可视化应用中,圆环图的应用场景也比较多,从展示效果上看,它类似于echarts中的圆环饼图,但是又有诸多不同之处,使用echarts图表库实现以下展示效果相对来说还是有点困难的,本文将圆环图的实现方式简单记录一下,以备不时之需。......

2022-08-01 19:32:42 1015

原创 Canvas弧形进度条

在可视化应用中,弧形进度条应用也比较广泛,在“SVG绘制圆环进度条”和“线形进度条的几种实现方式”这两章之后,今天针对平时开发中关于弧形进度条的实现方案进行一个总结,结合Javascript面向对象的开发方式,参考echarts的实现方式,封装一个可复用、个性化的弧形进度条组件.........

2022-06-11 18:14:46 1059 2

原创 线形进度条的几种实现方式

在大屏可视化应用中,进度条可以直观地表现出某个指标的进度,进度条的展示形式又有很多种,例如环形进度条,线性进度条,本章节针对线形进度条的几种实现方案提供一下个人的见解及具体的实现方案(以vue为技术栈)

2022-05-28 16:36:01 2473 4

原创 3D飞线地球

随着前端技术的飞速发展与日渐成熟,web3d应用已渗透到生活的方方面面,与传统的web应用相比,3D应用在页面的展示效果、可操作性上亦或是视觉体验上都有着不可比拟的优点点。对于前端开发者来说,在网页上实现一个3D应用,需要掌握的技术不胜枚举,如图形学、web-gl基础知识、Threejs等。好在echarts官方基于web-gl技术,提供了echarts-gl开源js库,大大简化了web3d图表的开发方式,本文基于echarts和echarts-gl实现一个3D飞线地球,简单讲解一下具体的实现方法

2022-02-24 10:11:12 1661 5

原创 Canvas绘制地图

在我们的大屏可视化项目中,地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多,其中最具有代表性的莫过于使用echarts,引入一个js文件,再加上一些简单的配置,这样一个地图就展示出来了。但是作为一名优秀的前端程序员,对于很多技术,我们既要知其然,也要只其所以然,本章节以HTML5中的Canvas技术为背景,简单讲解一下地图数据可视化实现的一些思路。

2022-02-22 22:35:37 9036 4

原创 SVG绘制圆环进度条

在我们的大屏可视化项目中,经常会用到各种各样的图表。与传统的表格展示、枯燥的文字阐述相比,图表展示则使用户看起来更加直观、数据的展示则更加一目了然。本文基于svg绘图技术结合前端技术栈vue,以工作中常用的环形进度条为例,简单阐述一下绘制进度条的一些思路。............

2022-02-22 09:54:02 7757 14

Canvas实现刮刮卡效果.zip

内容概要:使用Canvas实现一个简单的刮刮卡效果,重点使用了Canvas中的globalCompositeOperation属性,结合Canvas操作像素相关api即可实现。 适合人群:初学Canvas的兴趣爱好者。

2024-07-15

河南省-省市县乡镇geojson地图资源.zip

内容概要:河南省-省级、市级、县级(包含乡镇)geojson地图文件,区县地图展示下辖街道和乡镇,解决平时开发过程中乡镇地图资源查找困难的问题,该地图资源包含全省100多个县的下辖乡镇区域信息。 适合人群:使用于3D地图、自定义区域地图、地铁图、路线图、热度地图等相关应用的开发。

2024-07-15

echarts结合echarts-gl实现3D飞线地球可视化

echarts结合echarts-gl实现3D飞线地球可视化,这里提供一个简单案例的实现方式,访问页面需要通过类似vscode插件之Live Server等服务器的方式打开

2022-08-05

上海市区geojson地图文件

上海市行政单位geojson地图文件,可结合echarts用于地图数据可视化展示,内含上海市、宝山区、奉贤区、虹口区、黄浦区、嘉定区、金山区、静安区、闵行区、浦东新区、普陀区、青浦区、松江区、徐汇区、杨浦区、长宁区地图文件,区地图展示下辖街道或乡镇,广泛应用于3D地图、自定义区域地图、地铁图、路线图、热度地图等等。

2022-08-02

北京市区geojson地图文件

北京市行政单位geojson地图文件,可结合echarts用于地图数据可视化展示,内含北京市及各区地图文件,区地图展示下辖街道或乡镇,广泛应用于3D地图、自定义区域地图、地铁图、路线图、热度地图等等。

2022-08-02

世界地图geojson文件-中文国家名称

世界地图geojson文件(国家名称为中文),广泛应用于echarts等可视化类库,用于绘制世界地图,3D地球纹理贴图,对做可视化应用或地图相关的前端同学、非常有用。

2022-07-11

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除