手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

解决 UniApp 的雷达图在微信小程序里的多边形阴影问题

首页 > Javascript >

 UniApp 配合 Echart,问题还真不少。而且很多官网的例子为了兼容,居然都是引用的老版本,也就导致在查看参数的时候发现数据结构不对了。而且生成的也都是 Canvas,所以,引起问题的就是指 canvas 下的。

 
上一篇说了文字的阴影,解决了。。今天说的是雷达图多边形配上颜色后,在小程序员也会自带阴影,解决方法类似,但位置会有点变化。
在 series 的 data 中,在这里面加入:areaStyle,哪个值对应的多边形要加阴影,就在哪个里面加入这个节点。因为会配置阴影的颜色和透明度,其实在相应的 areaStyle 里本身也会有:color 和 opacity 的值,这时候 也是相应的加入:shadowBlur:10,至少得 10,否则 shadowColor:'transparent'就不起使用了。
 
这里的用值其实很奇怪,它不是你设置为 0 或者-1 就能解决,开始也是在这里走了很多弯路,后来想起文字模糊是通过改为 transparent 解决的,想着这里也应该是。果然,生效了。
 
至此,手机上的显示效果基本与 PC 端一致了。关键是和设计稿也差不多。安逸的很(这个阴影比较奇怪,在模拟器上根本看不出来,只有在真机上才行。但我真机模拟一直失败,只能通过一次次的发布来查看体验版,为此,利用微信开发工具的 cli 写了个管道解决快速上传的问题,后面单独讲)。



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):