- 博客(12)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 CSS实现渐变仪表盘的简单尝试
本章节尝试性的使用CSS实现一个简单的渐变仪表盘，给大家提供一些借鉴。实现角向渐变，不得不提一下conic-gradient属性，这个属性是实现角向渐变的关键；其次，数据可视化开发中，以图表的形式展示数据，这就离不开对数据进行处理，将对应的指标数据映射到图表上，也是可视化开发的一项重要工作；另外，图形的展示形式多种多样，高度还原设计师的设计稿，还需要我们对图形有一定的空间想象力。俗话说“条条大道通罗马”，针对设计图形来说，实现方式也有多种多样，只要能达到预期的效果，都是值的学习的
2022-11-28 23:53:54
1287
1
原创 CSS实现3D球面字符云
在大屏可视化应用中，使用3D的场景有很多，复杂的交互动画通常是使用Three.js或echarts-gl来实现，但是在一些简单的3D场景中，CSS也可以实现一些不错的展示效果.
2022-11-27 19:38:40
752
原创 CSS实现个性化水球图
在可视化应用中，水球图也是一种常见的数据展示形式，关于使用CSS实现个性化水球，在相当长的一段时间并没有找到比较简洁的实现方式，因此在以往的可视化作品中，大多采用echarts插件-Liquid Fill Chart来实现，本章节结合CSS相关属性及SVG知识点，将实现水球图的思路简单讲解一下，以便在实际的项目中能够拿来即用、提高开发效率，同时能够对一些不常见的CSS属性有一个回顾
2022-10-29 23:04:27
1833
1
原创 CSS锥形渐变实现环形进度条
本章简单介绍一下CSS锥形渐变（conic-gradient）在可视化图表中的应用场景。采用vue+原生css的形式进行案例展示、在了解本章节之前，需要对vue框架、css变量、css属性conic-gradient有一定程度的认识
2022-10-27 13:55:24
4657
5
原创 加载loading动画
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
2022-08-22 16:34:12
7492
原创 滚动动画（跑马灯动画）的几种实现方式
在大屏可视化应用中，滚动动效（跑马灯效果）也是常见的一种数据展现方式，本章节针对字幕滚动和列表滚动效果做一个小小的总结，结合vue框架，从原生标签、css动画、javascript三个维度简单阐述以下文字及列表滚动动效的实现方案。...
2022-08-10 19:23:33
4228
原创 原生Canvas实现四分之三圆环图
在可视化应用中，圆环图的应用场景也比较多，从展示效果上看，它类似于echarts中的圆环饼图，但是又有诸多不同之处，使用echarts图表库实现以下展示效果相对来说还是有点困难的，本文将圆环图的实现方式简单记录一下，以备不时之需。......
2022-08-01 19:32:42
866
原创 Canvas弧形进度条
在可视化应用中，弧形进度条应用也比较广泛，在“SVG绘制圆环进度条”和“线形进度条的几种实现方式”这两章之后，今天针对平时开发中关于弧形进度条的实现方案进行一个总结，结合Javascript面向对象的开发方式，参考echarts的实现方式，封装一个可复用、个性化的弧形进度条组件.........
2022-06-11 18:14:46
892
2
原创 线形进度条的几种实现方式
在大屏可视化应用中，进度条可以直观地表现出某个指标的进度，进度条的展示形式又有很多种，例如环形进度条，线性进度条，本章节针对线形进度条的几种实现方案提供一下个人的见解及具体的实现方案（以vue为技术栈）
2022-05-28 16:36:01
2135
1
原创 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
1441
5
原创 Canvas绘制地图
在我们的大屏可视化项目中，地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多，其中最具有代表性的莫过于使用echarts，引入一个js文件，再加上一些简单的配置，这样一个地图就展示出来了。但是作为一名优秀的前端程序员，对于很多技术，我们既要知其然，也要只其所以然，本章节以HTML5中的Canvas技术为背景，简单讲解一下地图数据可视化实现的一些思路。
2022-02-22 22:35:37
8048
4
原创 SVG绘制圆环进度条
在我们的大屏可视化项目中，经常会用到各种各样的图表。与传统的表格展示、枯燥的文字阐述相比，图表展示则使用户看起来更加直观、数据的展示则更加一目了然。本文基于svg绘图技术结合前端技术栈vue，以工作中常用的环形进度条为例，简单阐述一下绘制进度条的一些思路。............
2022-02-22 09:54:02
6886
14
echarts结合echarts-gl实现3D飞线地球可视化
2022-08-05
上海市区geojson地图文件
2022-08-02
北京市区geojson地图文件
2022-08-02
世界地图geojson文件-中文国家名称
2022-07-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人