echarts树图图标修改成图片以及自定义图片首次加载不显示的问题的修改＜js＞

笑到世界都狼狈

已于 2022-06-27 16:34:19 修改

阅读量5.3k

点赞数 2

分类专栏： echarts 文章标签： echarts 树图图标修改成图片 javascript 自定义图片首次加载不显示的问题

于 2020-08-25 13:58:01 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/108219598

版权

echarts 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

首先看一下显示效果，如下图所示：

显示效果

1.首先修改图片，在option对象中加入下方代码就可实现图片的修改，但是存在bug

symbol:'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg',//修改图片
symbolSize:  [30, 30],//修改图片大小

2.图片修改后，只有点击节点的时候才会显示图片，刚加载进去不显示图片，加上下面代码即可显示

/**
* 解决echarts图片首次加载不显示的问题
*/
setTimeout(function(){
    $(myChart).resize();     
},200)

3.通过上述修改后，还是有bug，那就是点击父节点展开和合并子节点的时候，图片又会消失，所以又有了下方代码

/**
* 解决点击父节点合并或展开后子节点图片不显示的问题
*/
$(window).on('click',function(){
    $(myChart).resize();
})

4.完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/echars.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		var data = {
		  "name": "外部网络",
		  "children": [
		    {
		      "name": "交换机",
		      "children": [
		        {
		          "name": "笔记本",
		          "value": "1",
		        },
		        {
		          "name": "计算机",
		          "value": "2",
		          "children": [
			        {
			          "name": "计算机1",
			          "value": "1",
			        },
			        {
			          "name": "计算机2",
			          "value": "2",
			        },
			        {
			          "name": "计算机3",
			          "value": "3",
			        },
			        {
			          "name": "计算机4",
			          "value": "4",
			        }
			      ]
		        },
		        {
		          "name": "路由器",
		          "value": "3",
		        },
		        {
		          "name": "服务器",
		          "value": "4",
		        },
		        {
		          "name": "打印机",
		          "value": "5",
		        },
		        {
		          "name": "计算机",
		          "value": "6",
		        }
		      ]
		    },
		    {
		      "name": "无线交换机",
		      "children": [
		        {
		          "name": "手机",
		          "value": "1",
		        },
		        {
		          "name": "平板",
		          "value": "2",
		        }
		      ]
		    },
		    {
		      "name": "hub",
		      "children": [
		        {
		          "name": "计算机",
		          "value": "1",
		        },
		        {
		          "name": "笔记本",
		          "value": "2",
		        },
		        {
		          "name": "打印机",
		          "value": "3",
		        },
		        {
		          "name": "路由器",
		          "value": "4",
//		          图片也可以放到数据里
//		          "symbol": 'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg',
//	          	  "symbolSize": [40, 40],
		        }
		      ]
		    }
		  ]
		};
//		页面初始化的时候,隐藏奇数位的子节点
//		echarts.util.each(data.children, function (datum, index) {
//	        index % 2 === 0 && (datum.collapsed = true);
//	    });

		var option = {
			tooltip: {
	            trigger: 'item',
	            triggerOn: 'mousemove'
	       },
	        series: [
	            {
	                type: 'tree',
	                data: [data],
	                top: '1%',
	                left: '7%',
	                bottom: '1%',
	                right: '20%',
	                label: {
	                    position: 'left',
	                    verticalAlign: 'middle',
	                    align: 'right',
	                    fontSize: 9
	                },
					symbol:'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg',//修改图片
	                symbolSize:  [30, 30],//修改图片大小
	                leaves: {
	                    label: {
	                        position: 'right',
	                        verticalAlign: 'middle',
	                        align: 'left'
	                    }
	                },
	                edgeForkPosition: "72%",
	                roam:true,//鼠标缩放，拖拽
	                expandAndCollapse: true,//无关的子树折叠收起
	                animationDuration: 550,
	                animationDurationUpdate: 750,
	                width: "50%"//组件宽度
	            }
	        ]
		}

		/**
		 * 解决echarts图片首次加载不显示的问题
		 */
		setTimeout(function(){
		     $(myChart).resize();     
		},200)
		/**
		 * 解决点击父节点合并或展开后子节点图片不显示的问题
		 */
		$(window).on('click',function(){
			$(myChart).resize();
		})
	    myChart.setOption(option);
    </script>
</body>
</html>

如果想用vue实现，可参考另一篇文章：参考地址

这篇文章是最开始研究树图的时候写的，可能内容没有那么完善，由于有网友问到可以每个节点设置不同的图片嘛，所以后面在加以补充

1.可以在每个节点数据中添加图片，如下图所示：

"symbol": 'image://image/switch.png',

当然，这种方法在实际项目中肯定是不合理的，所以主要用到的还是如下第二点方法

2.遍历树节点，根据某种状态，给节点更改不同状态下的图片

/**
 * 遍历树
* */
readNodes(nodes) {
   for (const item of nodes) { // js遍历树形数组结构
      console.log('devId5555555555555555', item.id)
      if (item.children && item.children.length) {
         this.readNodes(item.children)
      }
      if (item.status == 1) { // 根据状态的不同，修改图片
          item.symbol = 'image://' + require('@/assets/serverTopo/server_online_reg.png');
        } else {
          item.symbol = 'image://' + require('@/assets/serverTopo/server_offline_warn.png');
        }
      }
    }

如果对于树的遍历不是很清楚的话，可以参考我的另一篇文章，里面虽然是遍历树修改连线颜色的效果，但是和修改图片方法是一样的