效果展示：

饼图
折线图

功能描述：

点击头部的两个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，则隐藏折线图；
此时的运行结果：无论怎么切换只显示第一个饼图，第二个折线图显示不出来

2. 此时还需要在第二个tab也的图表上即折线图中加上一个条件,只有当currentTab为1时wx:if="{{currentIndex === 1}}"
   也就是只有在切换到当前页面时该页面的图表才会加载。然后就顺利解决啦~

对应代码:
饼图- pie:

image.png

折线图 -line:

最后:

虽然问题解决了,但是没有找出出现这个问题的原因!!
非常感谢大佬给的灵感:https://www.pianshen.com/article/904945261/