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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts2.* tree树形图节点点击事件和节点点击图标更改相关的知识,希望对你有一定的参考价值。

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

  //贴出关键点!
    function clickFun(param) {
        // console.log(param);
        console.log(param);
        param.data.symbol = ‘image://http://www.viastreaming.com/images/apple_logo2.png‘;
        console.log(param.data.cusField);
        chart.refresh(); //一定要refresh,否则不起作用
    }

以下是完整代码,里面有备注:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>echarts demo</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    var chart;
    require.config({
        paths: {
            echarts: ‘http://echarts.baidu.com/build/dist‘
        }
    });
    require([‘echarts‘, ‘echarts/chart/tree‘], function(ec) {
        chart = ec.init($("#main")[0]);
        chart.setOption(option);
        var ecConfig = require(‘echarts/config‘);
        chart.on(ecConfig.EVENT.CLICK, clickFun); //也可以注册其他时间 hover 、mouseout等
    })


    var option = {
        tooltip: {
            trigger: ‘item‘,
            formatter: ‘{b}:{c}‘,
            hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态,所以设置隐藏延迟为0,否则在快速选择另一个节点时(尤其是数据比较多时)导致无法显示选择中的tooltip
            //无法完全避免但是很大减轻了副作用
        },
        series: [{
            name: ‘树图‘,
            type: ‘tree‘,
            orient: ‘horizontal‘, // vertical horizontal
            rootLocation: { x: ‘10%‘, y: ‘60%‘ }, // 根节点位置  {x: ‘center‘,y: 10}
            nodePadding: 20,
            symbol: ‘circle‘,
            symbolSize: 40,
            roam: true,
            data: [{
                name: ‘手机‘,
                value: 6,
                symbolSize: [90, 70],
                cusField: ‘category‘,
                symbol: ‘image://http://www.iconpng.com/png/ecommerce-business/iphone.png‘,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: ‘right‘,
                            formatter: ‘{b}‘
                        }
                    }
                },
                children: [{
                        name: ‘小\n米‘, //由于label的formatter存在bug,所以无法通过html进行格式化,如果要换行要用\n
                        value: 4,
                        symbol: ‘image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg‘,
                        symbolSize: [60, 60],
                        cusField: ‘product‘,
                        children: [{
                            name: ‘小米11‘,
                            symbol: ‘circle‘,
                            cusField: ‘product‘, //自定义属性,演示用,实际开发中可以在后台建模产生series整个data时增加而外属性以供使用
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: ‘bottom‘,
                                        formatter: ‘{b}--->>>‘
                                    }
                                }
                            }
                        }],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: ‘right‘,
                                    formatter: ‘{b}--->>>‘ //有bug,formatter不起作用,这个bug看网友求助已经很久了,但是后面更新的版本一直没有解决
                                }
                            }
                        }
                    },
                    {
                        name: ‘苹果‘,
                        symbol: ‘image://http://www.viastreaming.com/images/apple_logo2.png‘,
                        symbolSize: [60, 60],
                        cusField: ‘product‘,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                }

                            }
                        },
                        value: 4
                    }

                ]
            }]
        }]
    };
    //关键点!
    function clickFun(param) {
        // console.log(param);
        console.log(param);
        param.data.symbol = ‘image://http://www.viastreaming.com/images/apple_logo2.png‘;
        console.log(param.data.cusField);
        chart.refresh(); //一定要refresh,否则不起作用
    }
    </script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
</body>

</html>

技术分享

上面是我项目实现截图,截图软件有点搓,部分线条没了。上面实现的是hover 和click时换成苹果图标。

本文出自 “11085961” 博客,请务必保留此出处http://11095961.blog.51cto.com/11085961/1951206

以上是关于echarts2.* tree树形图节点点击事件和节点点击图标更改的主要内容,如果未能解决你的问题,请参考以下文章

Tree 树形控件

iview-树形控件的使用(一)

当用easyUI-tree生成树形菜单时,如何点击一次事件关联两个tabs的标签页?

iview 中Tree 树形控件,遇到的问题

求教一个easyui的问题 datagrid中怎么加复选框

关于element-ui的tree树形组件的bug