ECharts的多树图切换时出现的图形混乱问题

问题描述：

vue的这四个tree节点。通过点击来展示不同的拓扑，用的是ECharts树图来实现的拓扑图。但是在切换的时候出现问题了。

总结：
出现上面的情况后，刷新页面再打开就正常，但是如果先打开A弹窗，再打开B弹窗，还是会出现上面的
情况，混乱后的折线图就好像是上个弹窗里面折线图的数据缓存，所以就查找echarts文档，查看有没有
清楚缓存或者其他什么方法。

解决办法：
通过myChart.clear()的方法情况图像的的情形和实例，然后再次把重新请求的数据myChart.setOption(option)进echarts实例中就可以了。更多的具体的echarts的方法可以去ECharts官网，但是官网的API文档太多了，也可以移步去我的博客ECharts对象的数据实例化方法汇总看总结。

myChart.clear()

注意：
clear之后一定要重新填充实例，也就是再执行方法myChart.setOption(option)

具体实例如下：
这个方法是为了重新获得后台数据，然后仅仅替换ECharts的数据，不重新生成图形。

async RetortTPdata (val) {
      var data = {}
      // 获取楼宇ID
        console.log('123: ', this.org_id)
        console.log('456: ', val)
      this.org_id = this.$store.state.user.orgid
      await GetTopology(this.org_id, val).then(res => {
        data = res.result[0]
        console.log('data: ', data)
      })
      myChart.clear()
      var option = {
        backgroundColor: 'rgb(255,255,255)',
        tooltip: {
          trigger: 'item',
          hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态，所以设置隐藏延迟为0，否则在快速选择另一个节点时（尤其是数据比较多时）导致无法显示选择中的tooltip
            // 无法完全避免但是很大减轻了副作用
        },
        series: [
          {
            type: 'tree',
            id: 0,
            name: 'tree1',
            data: [data],

            top: '10%',
            left: '8%',
            bottom: '10%',
            right: '20%',

            symbol: function (value, params) {
            if (params.data?.depth === '1') {
              return 'path://M597.333333 341.333333h42.666667a42.666667 42.666667 0 0 0 0-85.333333h-42.666667a42.666667 42.666667 0 0 0 0 85.333333z m0 170.666667h42.666667a42.666667 42.666667 0 0 0 0-85.333333h-42.666667a42.666667 42.666667 0 0 0 0 85.333333zM384 341.333333h42.666667a42.666667 42.666667 0 0 0 0-85.333333H384a42.666667 42.666667 0 0 0 0 85.333333z m0 170.666667h42.666667a42.666667 42.666667 0 0 0 0-85.333333H384a42.666667 42.666667 0 0 0 0 85.333333z m512 341.333333h-42.666667V128a42.666667 42.666667 0 0 0-42.666666-42.666667H213.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v725.333333H128a42.666667 42.666667 0 0 0 0 85.333334h768a42.666667 42.666667 0 0 0 0-85.333334z m-341.333333 0h-85.333334v-170.666666h85.333334z m213.333333 0h-128v-213.333333a42.666667 42.666667 0 0 0-42.666667-42.666667h-170.666666a42.666667 42.666667 0 0 0-42.666667 42.666667v213.333333H256V170.666667h512z'
            } else if (params.data?.depth === '2') {
              return 'path://M853.333333 853.333333H170.666667v-192h128v-128h128v-128h128v-128h128V170.666667h170.666666z m-640-42.666666h597.333334V213.333333h-85.333334v106.666667h-128v128h-128v128h-128v128h-128zM199.253333 192h155.093334v29.866667H234.666667v66.56h113.066666v29.653333H234.666667v102.4H199.253333z'
            } else {
              return 'path://M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z M753.4592 426.5984a27.40224 27.40224 0 0 0-18.30912-18.55488L278.528 270.82752a27.36128 27.36128 0 0 0-33.95584 18.2272l-64.96256 216.18688a27.27936 27.27936 0 0 0 18.2272 33.95584L557.056 647.168a28.34432 28.34432 0 0 0 7.82336 1.10592 27.2384 27.2384 0 0 0 20.48-9.37984l162.32448-186.94144a27.32032 27.32032 0 0 0 5.77536-25.35424z m88.76032 84.3776a28.09856 28.09856 0 0 0-16.67072-13.63968l-37.96992-11.38688a28.672 28.672 0 0 0-29.40928 8.56064l-93.67552 107.80672a28.13952 28.13952 0 0 0 13.18912 45.42464l94.208 28.30336a29.73696 29.73696 0 0 0 8.192 1.18784 28.30336 28.30336 0 0 0 26.95168-20.02944l37.2736-124.7232a27.97568 27.97568 0 0 0-2.08896-21.46304z m-396.77952 122.88L337.83808 589.824a27.19744 27.19744 0 0 0-20.6848 50.33984l29.77792 12.288-19.00544 46.24384-112.06656-7.45472a27.60704 27.60704 0 0 0-28.95872 25.3952 27.2384 27.2384 0 0 0 25.3952 28.95872l131.76832 8.6016h1.80224a27.27936 27.27936 0 0 0 24.94464-16.91648L397.312 673.05472l27.40224 11.22304a26.66496 26.66496 0 0 0 10.36288 2.00704 27.19744 27.19744 0 0 0 10.40384-52.34688z'
            }
            },

            symbolSize: 20,

            edgeShape: 'polyline',
            edgeForkPosition: '50%',
            initialTreeDepth: 3,

            lineStyle: {
              width: 4,
              color: '#E6B89C'
            },
            // itemStyle: {
            //     borderWidth: 10
            // },

            label: {
              backgroundColor: '#fff',
              color: '#011627',
              position: [40, -20],
              formatter: '{b}',
              fontSize: 16
            },

            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },

            expandAndCollapse: false,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      myChart.setOption(option)
    }

有问题欢迎讨论喔。