美文网首页echarts中国JavaScript 进阶营
echarts2.* tree树形图节点点击事件和节点点击图标更

echarts2.* tree树形图节点点击事件和节点点击图标更

作者: hzhqk | 来源:发表于2017-08-14 23:55 被阅读1410次

<<博客迁移,原文是我51cto博客http://11095961.blog.51cto.com/11085961/1951206>>

        做项目用到echarts2.2.7版本做树图,遇到点击树图节点“更改样式”(并不能更改样式,只能换图标/图片),百度、谷歌搜索后均没找到解决方案。后来苦苦探索,终于找到解决入口,特地分享给大家以供参考,吐槽一下echarts的api真的没有highcharts人性化和易找。

先说明关键点


//贴出关键点!这是注册的事件(click/hover等)的处理函数

 function clickFun(param) {

console.log(param);

param.data.symbol = 'image://http://www.viastreaming.com/images/apple_logo2.png';

//远程加载图片最好先预加载过来,避免下载图标延。 /**var oImg = new Image();oImg.src = img;**/

console.log(param.data.cusField);

chart.refresh(); //一定要refresh,否则不起作用

}

效果图

完整源码:https://github.com/hzhqk/echarts.git 下 dynamic echarts tree/change node symbol/

相关文章

  • echarts2.* tree树形图节点点击事件和节点点击图标更

    <<博客迁移,原文是我51cto博客http://11095961.blog.51cto.com/11085961...

  • el-tree父子节点相互关联操作

    本次研究课题为: el-tree如何在点击父节点时全部选中所有子节点,点击子节点时,父节点依然是选中状态 这个功能...

  • stopPropagation, preventDefault

    e.stopPropagation() 阻止 js 事件冒泡。比如对于点击事件,点击当前节点之后,不会再触发父节点...

  • js阻止事件冒泡

    在父级节点中设置了点击事件,触发了一个点击事件,在该节点中有一个子节点也必须要有个点击事件触发,这样就会形成事件冲...

  • 2022-04-13

    element tree 使用 append或者insertBefore 动态添加子节点 要实现的效果,点击父节点...

  • creator 触摸吞噬问题

    Creator 中默认吞噬所有点击事件,只要你的上层节点注册了点击事件,下面的节点无法接收点击。通过以下方法可实现...

  • js动态append或者html()添加的节点点击事件无效

    问题: jQuery通过for循环添加的节点,再对各个节点添加点击事件无效,如下代码: 原因: 这里的点击事件是无...

  • 关于antd vue Tree组件踩过的那些坑

    一般用tree组件的时候,希望点击父节点的时候,子节点全选或者取消。然后向后台传输数据的时候将子节点和父节点的数据...

  • Flutter 小知识

    IgnorePointer:此节点和其子节点都将忽略点击事件,用ignoring参数区分是否忽略。 AbsorbP...

  • JQuery如何阻止事件冒泡

    冒泡事件 就是点击子节点,会向上触发父节点,祖先节点的点击事件。 我们在平时的开发过程中,肯定会遇到在一个div(...

网友评论

  • ed8b0c0595d1:楼主有没有打包啊,想下载下来,'echarts/config'这个文件是什么啊
    hzhqk:http://echarts.baidu.com/echarts2/doc/doc.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95
    hzhqk:官方API对于on的用法说明:
    事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有:
    -----------------------基础事件-----------------------
    REFRESH(刷新),
    RESTORE(还原),
    RESIZE(显示空间变化),
    CLICK(点击),
    DBLCLICK(双击),
    HOVER(悬浮),
    MOUSEOUT(鼠标离开数据图形),
    ---------------------交互逻辑事件--------------------
    DATA_CHANGED(数据修改,如拖拽重计算),
    DATA_VIEW_CHANGED(数据视图修改),
    MAGIC_TYPE_CHANGED(动态类型切换),
    TIMELINE_CHANGED(时间轴变化),
    DATA_ZOOM(数据区域缩放),
    DATA_RANGE(值域漫游),
    DATA_RANGE_SELECTED(值域开关选择),
    DATA_RANGE_HOVERLINK(值域漫游hover),
    LEGEND_SELECTED(图例开关选择),
    LEGEND_HOVERLINK(图例hover),
    MAP_ROAM(地图漫游),
    MAP_SELECTED(地图选择),
    PIE_SELECTED(饼图选择),
    FORCE_LAYOUT_END(力导向布局结束)
    hzhqk:是echarts通用配置文件。我用的是官方的远程lib,你可以取官网根据需要下载。
  • 三都_868d:点击节点时 其他节点恢复原来的图片时怎么实现的
    hzhqk:遍历节点把symbol换了之后再刷新,具体细节请参考官方API或在网页console上研究树对象的结构实现。 很抱歉太晚回复你
  • hzhqk:第一次用简书,代码不知道怎么格式化,见谅!

本文标题:echarts2.* tree树形图节点点击事件和节点点击图标更

本文链接:https://www.haomeiwen.com/subject/fogprxtx.html