1.图片修改后，只有点击节点的时候才会显示图片，刚加载进去不显示图片，加上下面代码即可显示
setTimeout(() => { // 解决echarts树图图片首次加载不出现的问题
echarts.init(chart).resize();
}, 200);2.通过上述修改后，还是有bug，那就是点击父节点展开和合并子节点的时候，图片又会消失，所以又有了下方代码
echarts.init(chart).on('click', function() { // 解决点击父节点合并或展开后子节点图片不显示的问题
echarts.init(chart).resize();
});3.整个完整组件代码如下:
<template>
<div>
<div ref="main" style="width: 100%;height: 460px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
name: 'TrackChains',
data() {
return {
dataTree: [
{
'name': '创建文档',
'type': 'create',
'documentName': 'test.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\test.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/create.png'),
'children': [
{
'name': '编辑文档',
'type': 'edit',
'documentName': 'test.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\\test.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/edit.png'),
'children': [
{
'name': '重命名文档',
'type': 'rename',
'documentName': '测试.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\\测试.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/rename.png'),
'children': [
{
'name': '剪切文档',
'type': 'cat',
'documentName': '测试.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\\测试.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/cat.png'),
'children': [
{
'name': '流转(1002)',
'type': 'circulation',
'symbol': 'image://' + require('@/assets/trackChains/circulation.png')
}
]
}
]
},
{
'name': '复制文档',
'type': 'copy',
'documentName': 'test（1）.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\\test（1）.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/copy.png'),
'children': [
{
'name': '重命名文档',
'type': 'rename',
'documentName': 'dog.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\\dog.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/rename.png'),
'children': [
{
'name': '删除文档',
'type': 'delete',
'documentName': '测试.doc',
'documentId': '83f6-98ec3b3d11b0',
'circulationTimes': '0',
'filePath': 'c:\\测试.doc',
'fileSize': '10M',
'updateTime': '2021-10-20 10:37',
'terminalName': 'T10001',
'operatorName': 'U1',
'symbol': 'image://' + require('@/assets/trackChains/delete.png')
}
]
}
]
}
]
}
]
}
]
}
},
mounted: function() {
this.setOptions()
},
methods: {
// 实现自适应
day_init() {
const self = this; // 因为箭头函数会改变this指向，指向windows。所以先把this保存
const todaypieId = this.$refs.main
if (!todaypieId) {
return false;
} else {
setTimeout(() => {
window.onresize = function() {
// self.chart = echarts.init(self.$refs.myEchart);
self.chart_today = echarts.init(
todaypieId
);
self.chart_today.resize();
};
}, 200);
}
},
setOptions() {
// console.log('data', JSON.parse(JSON.stringify(this.dataTree)))
const defaultOpt = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
enterable: true, // 鼠标是否可进入提示框浮层中
formatter: this.formatterHover// 修改鼠标悬停显示的内容
},
series: [
{
type: 'tree',
data: this.dataTree,
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
// layout: 'radial',
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
symbolSize: [30, 30],
edgeForkPosition: '72%',
roam: true, // 鼠标缩放，拖拽整颗树
expandAndCollapse: true, // 无关的子树折叠收起
animationDuration: 550,
animationDurationUpdate: 750,
width: '50%'// 组件宽度
}
]
}
const chart = this.$refs.main
if (chart) {
setTimeout(() => { // 解决echarts树图图片首次加载不出现的问题
echarts.init(chart).resize();
}, 200);
echarts.init(chart).setOption(defaultOpt); // 将画布添加到页面中
echarts.init(chart).on('click', function() { // 解决点击父节点合并或展开后子节点图片不显示的问题
echarts.init(chart).resize();
});
}
},
/**
* 鼠标悬停时，显示节点详情
* @param params 当前悬停的详细信息
* @returns {string|*}
*/
formatterHover(params) {
const deviceType = params.data.type;
if (deviceType != 'circulation') {
return '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文档编辑方式：' + params.data.name + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文档名称：' + params.data.documentName + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文档ID：' + params.data.documentId + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文件路径：' + params.data.filePath + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文件大小：' + params.data.fileSize + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">终端名称：' + params.data.terminalName + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">操作员名称：' + params.data.operatorName + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">流转次数：' + params.data.circulationTimes + '</span>' + '<br>' +
'<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">更新时间：' + params.data.updateTime + '</span>' + '<br>'
} else {
return params.data.name
}
}
}
}
</script>
<style scoped>
</style>
如下想用js实现上述代码，可参选另一篇文章：参考地址
版权声明：本文为qq_36509946原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。