Echart tree节点自定义图片,点击图片上传文件
在data里除了children和name,再加上symbol,内容为image://URL,URL为图片路径,相对或者绝对或者网络URL都可以。通过模拟点击隐藏的input标签。
点击事件:
如果要取消Echart tree的点击事件(展开/折叠),只要在series里加上expandAndCollapse: false即可
添加点击事件
let myChart = echarts.init(document.getElementById("container"));
myChart.on("click", clickFunction);
function clickFunction(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
executeUpdateFile();
}
}
这样就可以单独触发每一个节点的点击事件
function executeUpdateFile(){
$('#file-input').trigger('click');
}
最后一个隐藏的input标签
<input hidden type="file" id="file-input" onchange="imgUpdate()"; accept="image/jpg,image/png,image/jpeg">
这里的onchange就是当上传文件以后会调用的事件
对于tree节点,可以通过param.name进行区分