小日记(问题描述)
最近做小程序项目最头疼的一件事就是 :echarts在引入项目中时,在微信开发者工具里面看起来好好的,但是只要一到真机就出各种问题,这次是为了做一个南丁格尔玫瑰统计图,如下
这个图是可以交互的,点击他每一片花瓣都是可以有一个扇形的缩放效果,嗯~很有意思。正当我在开发工具中把图各方面都调整的差不多之时,扔真机的时候bug出现了。。
就像上面这样,我在开发工具里怎么点这个花瓣,中心都是不会被影响的,但是一到真机上就会出现这种bug,其实之前也有碰到过,但因为只是一闪而过,所以影响不是很大没有管,但是这次的这个图比较特殊,中间是镂空的,如果点击下去以后中心会变各种奇怪的颜色,视觉上的体验感就会变差,所以当时想了两个解决方案
解决方案
一、失败:在echarts的option中再给这个玫瑰图中心镂空的地方加上一个层级最高的白色饼图来覆盖住这个在真机会变色的区域
导致的新问题:新加用于覆盖的饼图也有点击的缩放效果!(。。。)
二、成功:在这个南丁格尔玫瑰图的中心用cover–view来覆盖变色bug区域
在我做的这个项目引入echarts组件的时候,真的确实套了太多层。这次的问题让我又认真看了一边项目的echarts引入和使用,发现自己项目其实用echarts套用的比较深,曾孙子组件都出来了。
所以上面的那个截图其实就是解决使用cover-view的关键所在,一定要找到自己引用图层最里层的canvas标签中去使用 cover-view这个标签,以及在这个标签中只能用cover-view或者cover-image去使用
官方文档传送门也放在这里,可以自己再看看
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。