专项答疑 ​

图表缓存导致样式异常 ​

当使用Tab驱动多个图表进行显隐切换时，如果图表与图表之间存在差异（如柱状图柱子数量不同，多了标记线等），均会出现图表更新异常的情况，此时建议使用如下的逻辑实现Tab切换图表。

一、具体步骤 ​

1. 按照设计稿要求编写Tab和图表
2. 声明变量active表示当前选中的是哪个tab
3. tab绑定active值，点击不同tab，active会变成对应的不同值
4. 图表v-chart节点绑定渲染条件active

上述为常规操作，在第三步基础上，需要额外处理

下面为tab改变的交互事件中的内容

// 先将active置空
    this.active = null;
    this.$nextTick(()=>{
        // 再将active变成目标值
        this.active = item;
    })

二、实现原理 ​

同样的v-chart由于节点没变，因此低代码平台会通过局部更新的逻辑更新图表的内容，比如之前series有2根柱子，现在变成了1根柱子和1根折线，则这两项series的子项会被更新成新的样子。但如果从3根柱子变成2根折线，则第三根柱子对应的东西没有定义新的样子，在当前的执行逻辑中则不对它进行更新，导致其残留在可视区域中。 因此，上面的处理方式实际上是通过置空，让图表先销毁，再重新赋值并从头绘制新的图表的形式来避免这种针对删除元素更新不及时的问题。

三、其他情况 ​

当图表不是与tab联动时，也可能出现类似问题，比如通过渲染条件切换图表，此时相同的原理，需要借用一个变量使得图表先消失再显示，使得新展示的图表是从无到有进行加载的，方可解决这一缓存问题，核心代码如下：

1. 全局模型中新增变量isShow，其默认值为true，表示默认是显示图表的

data(){
      return{
        isShow: true
      }
    }

2. 将isShow作为渲染条件绑定到相关的每一个图表上

3. 在切换图表时将isShow先变成false，在下一次渲染时再变成true，以达到刷新的目的

this.isShow = false;
    this.$nextTick(()=>{
        this.isShow = true;
    })