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

最新推荐文章于 2025-03-11 11:05:57 发布
最新推荐文章于 2025-03-11 11:05:57 发布
阅读量3.5k 收藏 7
点赞数 1
分类专栏： 记录问题 echarts 文章标签： echarts javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44637104/article/details/126419221
版权

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

在长达三天尝试，根据图的要求，第一次选择了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;
}

 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
    },

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

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

在这里插入图片描述

#有什么要注意的

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

#end…

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

Echarts 树状图修改 以及 解决数据太多堆挤问题
weixin_41752213的博客
01-04 2989
echatrs树状图节点样式修改 数据太多堆挤 高度调整
vue中使用echarts的树图怎样自定义图片
taoyiw的博客
09-07 1487
在vue中使用echarts的树图怎样自定义图片 export default{ data(){ return{ imgs:require("../../assets/images/imgs.png"),//变量保存imgs地址 imgsBase64:' ',//定义一个变量保存图片的base64码 treeData:[], } }, mounted(){ this.getCharts(); this.getBase
echarts 树状图节点太多导致节点重叠，如何调整
qq_30351747的博客
03-21 1909
echarts 树状图节点太多导致节点重叠，如何调整
relation-graph节点详情和节点新增
最新发布
闪光向日葵战士
03-11 221
relation-graph节点详情和节点新增
echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红 写的很详细，建议收藏！
热门推荐
耶稣与梦的博客
01-26 3万+
echarts tree(树图)类型 实现自定义节点图标、自定义展示样式、点击节点后线条变色、自适应高度、搜索后节点关键字标红，有关资源免费提供给大家哈 前言 网上找了好久资料，没有一个完整实例，所以研究出来立马发布，共享下，希望能帮助到大家。 一、实现效果 提供视频方式大家看下符不符合要求 echart tree 自定义演示 Demo地址 点击此处，可查看演示地址https://it__distant_branch.gitee.io/echarts-tree/ 二、源码...
vue2 eCharts实现自定义节点图标 graph关系图
weixin_50606255的博客
02-05 2091
vue2 eCharts实现自定义节点图标 graph关系图
echarts 关系图节点图自定义及关系边上提示内容自定义
weixin_34050427的博客
12-28 6378
2019独角兽企业重金招聘Python工程师标准>>> ...
echarts树图实现点击收缩子节点
05-02
在JavaScript可视化库ECharts中，树图是一种常用于展示层次结构数据的图表类型。本教程将详细介绍如何在ECharts树图中实现点击节点时收缩其子节点的功能。首先，我们需要理解ECharts的基本概念和树图的特性。 ...
ECharts树图-折线树图.rar
12-24
ECharts是一款由百度团队开发的开源可视化库，它以JavaScript语言编写，可以运行在大多数现代浏览器中，适用于移动和桌面端。ECharts提供了丰富的图表类型，如折线图、柱状图、饼图、散点图等，同时也支持各种复杂...
echarts tree 节点替换图标，节点蔓延状态自动播放
05-25
通过以上知识，我们可以创建一个动态的、具有自定义节点图标和自动蔓延效果的ECharts Tree图。在实际应用中，你需要根据具体需求对配置项进行微调，以达到最佳的视觉效果和用户体验。记得在开发过程中，充分利用...
ECharts树图-多棵树.zip
12-24
在使用ECharts树图时，开发者需要关注的关键点包括数据的组织方式、树图的布局方向、节点样式、交互行为等方面。数据组织通常需要形成一个嵌套的结构，方便ECharts解析成树形结构。布局方向决定了树图是从上到下、从...
echarts自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
echarts，tree 图，节点收缩，option 配置即可
01-10
echarts tree目前只能用initialTreeDepth来控制显示的层数，不能逐个控制每个节点的收缩放开状态，很不方便。因此我在配置项里面增加了一个字段mcHereShow（命名觉得不美观，可以全部替换成你要修改的字段），在配置项里面与"name"同级的位置，配置上mcHereShow：true 或者false即可逐个控制该节点的展开和收缩，子节点也是同样层级的配置，如：var data ={ "name": "核心交换机", "children": childrenData， 'symbolSize': 47, 'mcHereShow':true } series: [ { type: 'tree', data: [data], ...... }
echarts组织结构图及自定义右键菜单
12-27
echarts2.2.7实现组织结构图及自定义右键菜单。 使用方法:http://blog.csdn.net/xieedeni/article/details/78908402
Echarts 树状图 编辑指定节点的样式
m0_48639280的博客
04-30 2962
function ORGData(ORG_data, ORG_f, json_f) { for (let i = 0; i < ORG_data.length; i++) { var ORG_z = ORG_data[i]; if (ORG_z.Boss_ID == ORG_f.ID) { var json = { name: ORG_z.Name + '\n' +
pyecharts Trees 解决节点过多导致堆叠到一起无法观看的问题
qq_43550449的博客
05-17 847
不同版本的pyecharts在参数上会有较大区别。作为一个入门python可视化绘制的小白，最近在分析数据的时候，由于数据之间关系错综复杂，想要通过树的形式把数据之间的关系理清楚，于是上手了pyecharts的Tree。还有一个办法就是看看自己的数据是不是可以设个阈值，可能有些数据可以忽略不计~当然不同问题不同分析。查看网上给的解决办法，有的是通过网页重写的方式，有的是通过。，因此对于用的pyecharts2.0版本的，可以通过。
echarts树图自定义图片后，判断当前节点是否有折叠子节点
笑到世界都狼狈的博客
05-15 2155
echarts树图自定义图片后，判断当前节点是否有折叠子节点、树图搜索、查询、自定义节点、高亮、鼠标悬停显示详情
echarts图表挤在一起的问题（亲测有效）
weixin_42064877的博客
07-05 3956
在引用echarts插件图标过程中，使用了bootstrap和标签切换功能，导致只有第一个导航栏有图标，后面的导航栏没有。 经过搜索查找，找到了以下的解决方法： 在css里加上这段代码，就能解决导航栏的图标堆在一起的问题。...
echart 关系图 ---- 配置 可自定义图片
HuangsTing的博客
10-12 2359
代码如下： var myChart = echarts.init(document.getElementById("relation-chart")); var echartJson ={ "series":[ { "edgeLabel":{ "normal":{ "format...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值