菜鸟茜
资浅程序媛^-^个人公众号/头条/百家:郑州小闲人
展开
-
hover显示播放遮罩层效果
点击,跳转到对应的视频播放页。这是目前主流视频网站的一个通用效果。我们都知道视频列表其实是一个封面列表,鼠标放上去时,有反馈:即。为了做出这个效果需要准备1张封面图片和1个播放按钮icon。如有任何疑问或者想实现什么效果,欢迎评论区交流。注:vue版本"^3.4.15"先来看下实现之后的效果。原创 2024-04-24 16:09:39 · 213 阅读 · 2 评论 -
css实现渐变电量效果柱状图
如果你只是想做一个静态demo,不需要数据,不需要后台,这里教你一个简单快捷的方法,用css实现!我们通常的做法就是用echarts来实现。其实思路是一致的,就是效果层的叠加。以上,就是在项目中实际会用到的效果。接着是又在渐变的基础上,接着我们实现进阶版,原创 2023-09-25 15:53:49 · 795 阅读 · 2 评论 -
echarts实现渐变电量效果柱状图
例子中,过程已经讲得比较详细了,所以这里就不再重复说了,直接贴全部代码。相比于普通的柱状图,这里边最明显的区别在于多了。如果你耐心看完,并理解了对应的图层叠加思路↓。以上代码实现了官网示例与最终效果的对比。先引入一个两层叠加的例子。那么就能很容易想到,原创 2023-06-15 16:24:07 · 510 阅读 · 0 评论 -
echarts分割柱形图实现渐变电量效果柱状图
先看下效果图是这个样子的 ,和普通的柱状图最明显的区别就是需要做成类似于电池格电量显示效果。原创 2023-06-15 10:04:59 · 1377 阅读 · 4 评论 -
echarts象形柱图实现电量效果柱状图
改造的基本思路:将type由bar变为pictorialBar,再修改设置与pictorialBar相关的配置项即可。看到这几种标记类型还不是很抽象,没关系,我们一个一个看下效果。a.type由bar变为pictorialBar,效果如下。看了这么多,那么我们要用到的是哪一个呢?看下官网例子,你就大概明白每个配置项能实现的效果了,接着再改变一下颜色,设置一下label就完成了。为什么是椭圆效果呢?我们去官网配置项中找答案,因此我们设置一下想要实现效果的配置项。但是,还有一个小细节需要注意,原创 2023-06-14 17:17:57 · 1594 阅读 · 0 评论 -
echarts折线图实现渐变效果
先看下效果图是这个样子的 ,和普通的折线图最明显的区别就是需要做成渐变效果。目录1、官网找例子2、初步改造示例,有个雏形3、细节改造和优化4、全部代码5、原始效果和完成效果对比1、官网找例子样例地址:https://echarts.apache.org/examples/zh/editor.html?c=area-basic官网初始option复制到项目中,得到的效果如下图(width:424px;height:200px;):2、...原创 2022-01-10 14:01:08 · 14138 阅读 · 5 评论 -
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录1、官网找样例2、初步改造示例,有个雏形3、细节改造和优化4、全部代码5、原始效果和完成效果对比碎碎念:UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅。1、官网找样例样例官网地址把样例的option复制到本地,原始option代码:let demoOption = { title: { text: 'Funnel' }, tooltip: { trigge..原创 2022-01-07 15:21:01 · 8828 阅读 · 0 评论 -
echarts雷达图自定义射线颜色、边框效果和背景样式
从ECharts官网雷达图样例中一点一点实现效果图原创 2022-01-07 11:19:57 · 21617 阅读 · 4 评论 -
echarts南丁格尔玫瑰图每块单独设置颜色
UI效果图:我参照官网的例子,默认的颜色,出来之后的效果:页面源代码:<template> <div class="pieChart" ref="pieChart"> </div></template><script> import echarts from 'echarts' export default { name: "TEMPLATE", mounted(){原创 2020-07-31 11:28:53 · 4494 阅读 · 3 评论 -
来个小水球儿,让页面更灵动--echarts-liquidfill和环形图结合
首先看下实现的效果:1、需要安装插件npm install echarts-liquidfill --save 或者 cnpm install echarts-liquidfill --save(我都是习惯用cnpm)2、页面引入3、设置option,核心点就是echarts-liquidfill结合echarts环形图需要注意的是:更多效果及说明可以参考github上的说明:https://github.com/ecomfe/echarts-liquidfill原创 2020-08-06 15:25:28 · 406 阅读 · 0 评论 -
一个小技巧让icon跳动起来
一个小技巧让icon跳动起来原创 2020-08-07 11:36:22 · 672 阅读 · 0 评论