效果展示：
饼图
折线图
功能描述：
点击头部的两个tab选项进行对应的图表显示，即饼图和折线图的切换
tab图表切换
主要技术：
- 微信小程序
- Echarts （echarts-for-weixin）官方网址
-
目录结构
统计页面目录结构
遇到的问题：
tab切换图表显示问题
-
失败写法：
statistics中引入图表组件
以上通过
wx:if判断条件来决定显示饼图还是折线图；
当currentIndex = 0时，对应显示饼图；
当currentIndex = 1时，对应显示折线图；
- 运行结果：
首次渲染可以显示饼图pie，切换后也可以显示折线图line；
但是再切换到饼图pie的时候，不显示饼图；切换到折线图line时仍然可以显示；
之后操作现象如同第二次的
- 各种在网上查资料找类似的案例，参考大佬们的踩坑填坑经验
- 解决方案：
1.通过对图表容器设置属性
hidden来达到显示和隐藏
通过父组件传递过来的currentIndex的值，判断是否显示：
如果currentIndex = 1，则隐藏饼图；
如果currentIndex = 0，则隐藏折线图；
此时的运行结果：无论怎么切换只显示第一个饼图，第二个折线图显示不出来
- 此时还需要在第二个tab也的图表上即折线图中加上一个条件,只有当currentTab为1时
wx:if="{{currentIndex === 1}}"
也就是只有在切换到当前页面时该页面的图表才会加载。然后就顺利解决啦~
对应代码:
饼图- pie:
image.png
折线图 -line:
最后:
虽然问题解决了,但是没有找出出现这个问题的原因!!
非常感谢大佬给的灵感:https://www.pianshen.com/article/904945261/
网友评论