echarts树图的节点自定义图片，以及子节点挤在一起该怎么处理...

#为什么会最终会选择树图

在长达三天尝试，根据图的要求，第一次选择了echarts的关系图，但是在做的过程中就出现了问题，首先我选择的是坐标生成位置，由于后端返的数据不是固定的而且两条关系中必然有相同的名称，这个关系图就很符合当时我要做的效果，但是source，target的指向不可以重复，当关系复杂时而且再保证看的不乱的情况下，这种是不符合我的要求的，加上它的坐标生成的位置，对于我的数据来说不太好动态生成。

#为什么是最终选择树图，那你第二次选的什么

当这个不好生成之后，就开始另谋他路，Relation Graph在这个上面我看到了很多不一样的demo，虽然demo多多，但是找到符合的还是很少，其中一个尝试之后，还是跟上一个的选择的问题有些相似之处的，这是它的在线配置工具

#选择echarts的树图之后，具体步骤能说么

这个当然可以,下面的代码相信大家都会放对位置的，就不再过多叙述了


    
 
 
 
chartHeight:1200,


.chartbox{
  overflow-y: auto;
  overflow-x: hidden;
  height: 900px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

 getData(){  // 获取后端的数据并处理
      this.$request  // 这里是在全局中配置了
        .post('地址',{})
        .then((res)=>{
          this.datas = res.data
          this.tree_data = {
            name: "噜啦嘞",
            children: [],
            value:'0',
            //  symbol 是需要在每一个包含children的中去单独配置的，只在series中配置不生效
            //  symbol的图片的生成的方法写最后
            symbol: "image://data:image/png;base64,UklGRigDAABXRUJQVlA4IBwDAABwRQCdASoAAgACPpVKpU0lpCOiIHVYWLASiWlu4XdhG9vKrgrY5YGk7Zt3QAJSnDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOG6BpdaEILFrU7QBdG4I2VWgC6NwRsqtAF0bgjZUPhFSlI/bUVtKsLjonsx9/hL0kCBAgQIEBInLyh/OnToXbjSYC1ILFixYptOk5X5srFqpMBakFixYsHPIQIEBIylbUM446J70kCBAfCHQt5gLUgMIKyC96hOPFZjvuU4cOHDhukDgM3qIUvKvvXHRPvyqU9C6NwRsqtAF0bgjZVaALo3BGyqtOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dNgAA/v/UsAAAAAAAAAAAADPRYTgLrDsFAPVaDmbOSmwA4hwBmRvVUUeKamFUAOCiI8cVpPOwZwhINmD814HTYAPhTYAB3NXkLXpOdGzTYIGhbUEC8NLQcd89SsGPKtq0kzXj5ifPDsmOYG9UoGDB2JbbolMEAAA66aHLa1Ed60QBYIh6mVLL0y6XXlkVchW+x+Yi8K8UJK6AuKmD7pR6H40GyUBJJn2RjlclVmNB7aBhg3EB1xEcLOMorP2ZY6l0vvfM0t2IDNw+fSMZM/amYDzla+j5wFfjP29nQAAAAAAAAAAAAAAAAAAA"
          };
         var temp ={}
         for (var key in this.datas) {
          this.datas[key].children = [];
          this.datas[key].children.push({
            name: this.datas[key].dName,
            children: [],
            value:'0',
            symbol: "image://data:image/png;base64,UklGRigDAABXRUJQVlA4IBwDAABwRQCdASoAAgACPpVKpU0lpCOiIHVYWLASiWlu4XdhG9vKrgrY5YGk7Zt3QAJSnDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOG6BpdaEILFrU7QBdG4I2VWgC6NwRsqtAF0bgjZUPhFSlI/bUVtKsLjonsx9/hL0kCBAgQIEBInLyh/OnToXbjSYC1ILFixYptOk5X5srFqpMBakFixYsHPIQIEBIylbUM446J70kCBAfCHQt5gLUgMIKyC96hOPFZjvuU4cOHDhukDgM3qIUvKvvXHRPvyqU9C6NwRsqtAF0bgjZVaALo3BGyqtOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dNgAA/v/UsAAAAAAAAAAAADPRYTgLrDsFAPVaDmbOSmwA4hwBmRvVUUeKamFUAOCiI8cVpPOwZwhINmD814HTYAPhTYAB3NXkLXpOdGzTYIGhbUEC8NLQcd89SsGPKtq0kzXj5ifPDsmOYG9UoGDB2JbbolMEAAA66aHLa1Ed60QBYIh6mVLL0y6XXlkVchW+x+Yi8K8UJK6AuKmD7pR6H40GyUBJJn2RjlclVmNB7aBhg3EB1xEcLOMorP2ZY6l0vvfM0t2IDNw+fSMZM/amYDzla+j5wFfjP29nQAAAAAAAAAAAAAAAAAAA"
          });
          this.datas[key].children.forEach((i, ik) => {
            this.datas[key].moList.forEach((direItem) => {
                  this.datas[key].children[ik].children.push({
                    name: direItem.aName,
                    children:[],
                    value:'0',
                    symbol: "image://data:image/png;base64,UklGRigDAABXRUJQVlA4IBwDAABwRQCdASoAAgACPpVKpU0lpCOiIHVYWLASiWlu4XdhG9vKrgrY5YGk7Zt3QAJSnDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOG6BpdaEILFrU7QBdG4I2VWgC6NwRsqtAF0bgjZUPhFSlI/bUVtKsLjonsx9/hL0kCBAgQIEBInLyh/OnToXbjSYC1ILFixYptOk5X5srFqpMBakFixYsHPIQIEBIylbUM446J70kCBAfCHQt5gLUgMIKyC96hOPFZjvuU4cOHDhukDgM3qIUvKvvXHRPvyqU9C6NwRsqtAF0bgjZVaALo3BGyqtOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dNgAA/v/UsAAAAAAAAAAAADPRYTgLrDsFAPVaDmbOSmwA4hwBmRvVUUeKamFUAOCiI8cVpPOwZwhINmD814HTYAPhTYAB3NXkLXpOdGzTYIGhbUEC8NLQcd89SsGPKtq0kzXj5ifPDsmOYG9UoGDB2JbbolMEAAA66aHLa1Ed60QBYIh6mVLL0y6XXlkVchW+x+Yi8K8UJK6AuKmD7pR6H40GyUBJJn2RjlclVmNB7aBhg3EB1xEcLOMorP2ZY6l0vvfM0t2IDNw+fSMZM/amYDzla+j5wFfjP29nQAAAAAAAAAAAAAAAAAAA"

              })
              
              direItem.oiList.forEach((oils)=>{
              temp  = { name: oils.otName, children: [],value:'1',
                symbol: "image://data:image/png;base64,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xrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRra6iFEKIUQohRCiFEKIUQohRCiFEKIUQoguRRZWjZJkVSVoxRCiFEKIUQohRCiFEKIUQohRCiFEKIUT3vktR4L3vktR4L3vktR4L3vktR4L3vktR4L3tEKIUQohRCiFEKIUQohRCiFEKIUQohRBMqiStGyXKqsrRiiFEKIUQohRCiFEKIUQohRCiFEKIUQomujWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/h2KoqiqKoqiHb+qXx6Pz6D9ilvoVS3Hf139iQuZ6HqiIJy7+nJyHppqdDCojnxR9joV6ZTvvjs6KFEHCdwp1B0duOO13vNlueOOlVOhVo9UpKVOHOGAvA/CHZ36aKsT9oI8v2rnpeOz7459euX4PyPn5Lxy/B6zvm+RETtXK/4f//aAAwDAQACAAMAAAAQ88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o88888888888888888888888wwwwwwwwk88swwwwwwww0888888888888888888888888888888888888888888888888888888888888888888888888888888888888wwwwwwww0888wwwwwwww08888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888s88s8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888oc0gM888888888888888888888888888888888888//EABQRAQAAAAAAAAAAAAAAAAAAAKD/2gAIAQMBAT8QGT//xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAECAQE/EBk//8QAKBAAAQQCAgEEAQUBAAAAAAAAAQARUfBQwSAhMUBBYfGxYHGQkaHh/9oACAEBAAE/EP55SIMCxH5q+zr7Ovs6+zr7OiJMS5P4uftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOOISQQEX8qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/aKiAwAckv+eQUQGQRkFvyq/tV/ar+1X9qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/ar+1X9oFLAhN/PrbScRaT620nEWk+ttJxFpPrbScRaT620nEWk+tJSSSE38Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/SCiBwQMgv+ORUQOSTklvwq/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9IBLgBF/GOtJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOfAkQDk/mr7Ovs6+zr7Ovs6AgRDEfi/ypDD3kDDt7gxgs6ZgWEWOGDt4LP2CDDKQiXJDgHoO5VkfSBg8oQzOeh4npAzEQQAdAA/Xu7oOkggAgIdxDuXIDMjOr3zAQBOIdyfDEMim37meZwSQ7OH/Pd4M0cDHCQGHhm89519Z3S6QLEOPgpn8QSgHYWbouOvhAgdB9DoLAePYf0jdhhyA+4eMuPdGeRIMmAkST0/Y78Ffl9eBvIzt7s6/o2/2Rn+WXWHi47dvBf/B14TaAYrkuQAPwB+h//9k="};
                oils.oList.forEach((oilDep)=>{
                  temp.children.push({
                    name:oilDep.otwoName,
                    children:[],
                    value:'1',
                    symbol: "image://data:image/png;base64,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xrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRra6iFEKIUQohRCiFEKIUQohRCiFEKIUQoguRRZWjZJkVSVoxRCiFEKIUQohRCiFEKIUQohRCiFEKIUT3vktR4L3vktR4L3vktR4L3vktR4L3vktR4L3tEKIUQohRCiFEKIUQohRCiFEKIUQohRBMqiStGyXKqsrRiiFEKIUQohRCiFEKIUQohRCiFEKIUQomujWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/h2KoqiqKoqiHb+qXx6Pz6D9ilvoVS3Hf139iQuZ6HqiIJy7+nJyHppqdDCojnxR9joV6ZTvvjs6KFEHCdwp1B0duOO13vNlueOOlVOhVo9UpKVOHOGAvA/CHZ36aKsT9oI8v2rnpeOz7459euX4PyPn5Lxy/B6zvm+RETtXK/4f//aAAwDAQACAAMAAAAQ88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o88888888888888888888888wwwwwwwwk88swwwwwwww0888888888888888888888888888888888888888888888888888888888888888888888888888888888888wwwwwwww0888wwwwwwww08888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888s88s8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888oc0gM888888888888888888888888888888888888//EABQRAQAAAAAAAAAAAAAAAAAAAKD/2gAIAQMBAT8QGT//xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAECAQE/EBk//8QAKBAAAQQCAgEEAQUBAAAAAAAAAQARUfBQwSAhMUBBYfGxYHGQkaHh/9oACAEBAAE/EP55SIMCxH5q+zr7Ovs6+zr7OiJMS5P4uftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOOISQQEX8qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/aKiAwAckv+eQUQGQRkFvyq/tV/ar+1X9qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/ar+1X9oFLAhN/PrbScRaT620nEWk+ttJxFpPrbScRaT620nEWk+tJSSSE38Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/SCiBwQMgv+ORUQOSTklvwq/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9IBLgBF/GOtJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOfAkQDk/mr7Ovs6+zr7Ovs6AgRDEfi/ypDD3kDDt7gxgs6ZgWEWOGDt4LP2CDDKQiXJDgHoO5VkfSBg8oQzOeh4npAzEQQAdAA/Xu7oOkggAgIdxDuXIDMjOr3zAQBOIdyfDEMim37meZwSQ7OH/Pd4M0cDHCQGHhm89519Z3S6QLEOPgpn8QSgHYWbouOvhAgdB9DoLAePYf0jdhhyA+4eMuPdGeRIMmAkST0/Y78Ffl9eBvIzt7s6/o2/2Rn+WXWHi47dvBf/B14TaAYrkuQAPwB+h//9k="


                  })
                  oilDep.reList.forEach((ref)=>{
                    temp.children[ik].children.push({
                      name:ref.reName,
                      symbolSize: 1, // 无children的设置为1，不显示节点
                    })
                  })
                  oilDep.oiList.forEach((gaso)=>{
                    temp.children[ik].children.push({
                      name:gaso.gName,
                      symbolSize: 1,
                      label: {
                          position: "right",
                          verticalAlign: "middle",
                          align: "left",
                          color: "#BDBDBD",
                          fontSize: 24,
                      },
                    })
                  })
                })
                oils.oiOList.forEach((gas)=>{
                  temp.children.push({
                    name:gas.gName,
                    symbolSize: 1,

                    label: {
                       position: "right",
                       verticalAlign: "middle",
                       align: "left",
                       color: "#BDBDBD",
                       fontSize: 24,
                    },
                  })
                })
              })
              this.datas[key].children[0].children.forEach((te)=>{
                te.children.push(temp)
              })
            });
            this.tree_data.children.push(this.datas[key].children[ik]);
          });

        
        }
        this.tree_data.children.forEach((item)=>{
            item.children.forEach((itc)=>{
              if(itc.children.length>1){
                itc.children = itc.children.splice(0,1)
                console.log(itc);
              }
            })
        })
          var series = [];
          var tooltip = [];
          tooltip.push({
            trigger: "item",
            triggerOn: "mousemove",
          });
          series.push({
            type: "tree",
            id: 0,
            name: "tree1",
            data: [this.tree_data],
            top: "8%",
            left: "5%",
            bottom: "22%",
            right: "20%",
            symbolSize: 20,
            symbol: "emptyCircle", //设置图形的形状
            edgeShape: "polyline",//折线，curve 曲线
            edgeForkPosition: "63%",
            initialTreeDepth: 3,
            height:'1000px',
            with:'100%',
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              borderColor: "#60e4fb", //图形的边框颜色
              color: "#60e4fb", //图形的填充颜色
            },
            label: {
              position: "left",
              verticalAlign: "middle",
              align: "right",
              borderColor: "#F56C6C",
              color: "#fff",
              fontSize: 24,
              fontWeight: "bold",
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
                color: "#fff",
                fontSize: 24,

              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          });
          this.sendingChart(tooltip, series);//请求到数据并处理之后调用

        })
    },
   sendingChart(tooltip, series) {
      this.$echarts.init(document.getElementById("ass")).dispose();
      var myChart = this.$echarts.init(document.getElementById("ass"));
      var option = {
        tooltip: tooltip,
        series: series,
      };
        option && myChart.setOption(option);
        myChart.on('click',(param)=>{
          if(param.data.value=="0"){
            param.data.symbol= "image://data:image/png;base64,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xrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRrb+NbKNbfxrZRra6iFEKIUQohRCiFEKIUQohRCiFEKIUQoguRRZWjZJkVSVoxRCiFEKIUQohRCiFEKIUQohRCiFEKIUT3vktR4L3vktR4L3vktR4L3vktR4L3vktR4L3tEKIUQohRCiFEKIUQohRCiFEKIUQohRBMqiStGyXKqsrRiiFEKIUQohRCiFEKIUQohRCiFEKIUQomujWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/jWyjW38a2Ua2/h2KoqiqKoqiHb+qXx6Pz6D9ilvoVS3Hf139iQuZ6HqiIJy7+nJyHppqdDCojnxR9joV6ZTvvjs6KFEHCdwp1B0duOO13vNlueOOlVOhVo9UpKVOHOGAvA/CHZ36aKsT9oI8v2rnpeOz7459euX4PyPn5Lxy/B6zvm+RETtXK/4f//aAAwDAQACAAMAAAAQ88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o88888888888888888888888wwwwwwwwk88swwwwwwww0888888888888888888888888888888888888888888888888888888888888888888888888888888888888wwwwwwww0888wwwwwwww08888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888o88o8888888888888888888888888888888s88s8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888oc0gM888888888888888888888888888888888888//EABQRAQAAAAAAAAAAAAAAAAAAAKD/2gAIAQMBAT8QGT//xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAECAQE/EBk//8QAKBAAAQQCAgEEAQUBAAAAAAAAAQARUfBQwSAhMUBBYfGxYHGQkaHh/9oACAEBAAE/EP55SIMCxH5q+zr7Ovs6+zr7OiJMS5P4uftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOOISQQEX8qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/aKiAwAckv+eQUQGQRkFvyq/tV/ar+1X9qv7Vf2q/tV/ar+1X9qv7Vf2q/tV/ar+1X9oFLAhN/PrbScRaT620nEWk+ttJxFpPrbScRaT620nEWk+tJSSSE38Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/SCiBwQMgv+ORUQOSTklvwq/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9Kv6Vf0q/pV/Sr+lX9IBLgBF/GOtJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOftJ8rSOfAkQDk/mr7Ovs6+zr7Ovs6AgRDEfi/ypDD3kDDt7gxgs6ZgWEWOGDt4LP2CDDKQiXJDgHoO5VkfSBg8oQzOeh4npAzEQQAdAA/Xu7oOkggAgIdxDuXIDMjOr3zAQBOIdyfDEMim37meZwSQ7OH/Pd4M0cDHCQGHhm89519Z3S6QLEOPgpn8QSgHYWbouOvhAgdB9DoLAePYf0jdhhyA+4eMuPdGeRIMmAkST0/Y78Ffl9eBvIzt7s6/o2/2Rn+WXWHi47dvBf/B14TaAYrkuQAPwB+h//9k="
            param.data.value="1"
            myChart.resize();
          }else{
            param.data.symbol='image://data:image/png;base64,UklGRigDAABXRUJQVlA4IBwDAABwRQCdASoAAgACPpVKpU0lpCOiIHVYWLASiWlu4XdhG9vKrgrY5YGk7Zt3QAJSnDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOG6BpdaEILFrU7QBdG4I2VWgC6NwRsqtAF0bgjZUPhFSlI/bUVtKsLjonsx9/hL0kCBAgQIEBInLyh/OnToXbjSYC1ILFixYptOk5X5srFqpMBakFixYsHPIQIEBIylbUM446J70kCBAfCHQt5gLUgMIKyC96hOPFZjvuU4cOHDhukDgM3qIUvKvvXHRPvyqU9C6NwRsqtAF0bgjZVaALo3BGyqtOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dOnTp06dNgAA/v/UsAAAAAAAAAAAADPRYTgLrDsFAPVaDmbOSmwA4hwBmRvVUUeKamFUAOCiI8cVpPOwZwhINmD814HTYAPhTYAB3NXkLXpOdGzTYIGhbUEC8NLQcd89SsGPKtq0kzXj5ifPDsmOYG9UoGDB2JbbolMEAAA66aHLa1Ed60QBYIh6mVLL0y6XXlkVchW+x+Yi8K8UJK6AuKmD7pR6H40GyUBJJn2RjlclVmNB7aBhg3EB1xEcLOMorP2ZY6l0vvfM0t2IDNw+fSMZM/amYDzla+j5wFfjP29nQAAAAAAAAAAAAAAAAAAA'
            param.data.value="0"
            myChart.resize();
          }
        }); 
        // 这里是滚动条的前提，让子节点数据过多时不挤一块，
        const eleArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls))
        const itemHeight = 50
        const currentHeight = itemHeight * (eleArr.length-1) || itemHeight
        const newHeight = Math.max(currentHeight,itemHeight)
        this.chartHeight = newHeight
        myChart.resize({
          height:newHeight
        })
        document.getElementById("chartbox").scrollTop = (newHeight/2)-900
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

#效果图，滚动条让我遮住了…

滚动条的样式我是处理过的

在这里插入图片描述

#有什么要注意的

首先是symbol的图片生成，在官网找到tree下的symbol，点击试一试，上传本地图片，看下图所示，复制即可；
其次就是点击节点图片变化，前提你得准备两张图myChart.resize();得加这个属性，不然不会生效，还有就是不能在在children中push自定义的值，本人测试过，一直报错，所以用value来代替，写成固定值，点击之后变换值，再替换图片；
最后就是代码中不要直接复制粘贴，找到核心的且有用的，再复制。

#end…

本期到此结束，这里是能学一点是一点，如有疑问欢迎留言，如有致电，请拨打电话，如没关注，请不用关注…

相关阅读:
恶意软件通杀 Win、macOS、Linux 三大系统；唱片巨头起诉 Youtube-dl 的托管服务商；2022 年不是 Linux 桌面元年 | 开源日报
 Linux入门之使用 dmesg 查看引导日志
 JAVA中的文件操作
 Kubernetes:kubelet 源码分析之探针
 hive limit分页查询、row_number()分页查询
 【数字IC手撕代码】Verilog轮询仲裁器|题目|原理|设计|仿真
 边缘检测--学习笔记
 R语言高级数据管理
 ES6中的（...）运算符详细学习
 WPF 截图控件之绘制箭头(五)「仿微信」
原文地址：https://blog.csdn.net/weixin_44637104/article/details/126419221