devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小丑西瓜9 | 2024-04-15 11:26:14

赞

踩

echarts树状图设置点的图形

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

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

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

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

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

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

<div class="chartbox" id="chartbox">
   <div :style="{height:chartHeight+ 'px'}" id="ass"> </div>
 </div>
 
 
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…

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/427598
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号