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

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

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');}}}

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

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

echarts首次加载不显示，再次刷新照常显示
参照了各种办法比如$nextTick.watch.setOption,然后发现是定位层级的问题,也是无语到无以复加,不过问题解决了还是可喜可贺~ 问题:首次打开echart页面,数据有,图标不展示 ...
vue自定义指令---处理加载图片失败时出现的碎图,onerror事件
目录一.自定义指令 1.局部注册和使用 2.全局注册和使用二.自定义指令处理图片加载失败(碎图) 一.自定义指令 vue中除v-model.v-show等内置指令之外,还允许注册自定义指令,获取D ...
vue图片img加载失败显示自定义默认图片(缺省图)
vue图片img加载失败显示自定义默认图片(缺省图) 1.图片加载示例 2.加载失败显示默认图片 3.加载失败默认图片代码处理 <div class="book-img" ...
vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
使用QT实现一个图像处理软件1 —— 图片的加载和显示
为了实现图片的加载和显示,本文主要将使用到Qt中的几个类,分别是: QImage,这是Qt实现的一个存储图片信息的类,支持大部分的图片格式,支持像素操作,后续所有的图像处理算法都将在这个类的基础上进行 ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助网站效果演示:ashuai.work:8888/#/myLoad GitHub仓库地址代码:github.com/shuirongshu- ...
android dialog 自定义布局,Android自定义Dialog实现加载对话框效果
前言最近开发中用到许多对话框,之前都是在外面的代码中创建AlertDialog并设置自定义布局实现常见的对话框,诸如更新提示等含有取消和删除两个按钮的对话框我们可以通过代码创建一个AlertDial ...
html加载完显示图片,js图片未加载完显示loading效果
js图片未加载完显示loading效果 img{float:left;200px;height:200px;margin:0 10px 10px 0} //判断浏览器 var Browser=new ...

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

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

最新文章

热门文章