zTree Jquery eCharts

JS树结构与图表联动

最新推荐文章于 2025-09-07 22:29:54 发布

weixin_30339457

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mypsq/p/6125741.html

本文介绍了一种使用JavaScript实现的树形结构与ECharts条形图联动的方法。通过监听树节点的展开与折叠事件来动态展示或隐藏对应的条形图，实现了数据之间的交互与同步更新。

(function(){

    var setting = {

        view:{
            dblClickExpand:false,
            expandSpeed:300
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: 0
            }
        },
        callback:{
            beforeClick:node_click,
            onCollapse: zTreeOnCollapse,
            onExpand: zTreeOnExpand,
            beforeExpand: zTreeBeforeExpand
        }
    };
    function node_click(treeId,treeNode)
    {

    }

    function zTreeOnCollapse(event, treeId, treeNode)
    {
        var childrens = treeNode.children;
        var node_id = '#' + treeNode.tId +'_a';
        $('#btree_1_a').css('margin-bottom','35px');
        for(var id in childrens)
        {
            var node_id = '#' + childrens[id].tId +'_a';
            $(node_id).css('margin-bottom','35px');
        }
        collapse_dfs(treeNode);
    }
    function zTreeOnExpand(event, treeId, treeNode)
    {
        var childrens = treeNode.children;
        var node_id = '#' + treeNode.tId +'_a';
        $('#btree_1_a').css('margin-bottom','35px');
        for(var id in childrens)
        {
            var node_id = '#' + childrens[id].tId +'_a';
            $(node_id).css('margin-bottom','35px');
        }
        expand_dfs(treeNode);

    }
    function zTreeBeforeExpand(treeId, treeNode) {
        return true;
    };

    var citynodes = [
        {id:0, pId:-1, name:"china"},
        {id:1, pId:0, name:"beijing"},
        {id:2, pId:0, name:"shanghai"},
        {id:3, pId:0, name:"shenzhen"},
        {id:4, pId:0, name:"henan"},
        {id:5, pId:4, name:"zhengzhou"},
        {id:6, pId:4, name:"luohe"},
        {id:7, pId:4, name:"xuchang"},
        {id:8, pId:5, name:"erqi"},
        {id:9, pId:5, name:"gaoxin"},
        {id:1101, pId:5, name:"dongfeng"},

    ];
    $(document).ready(function(){
        var zTreeDemo = $.fn.zTree.init($('#btree'),setting,citynodes);
    });


})();
window.onload = function(){

    var mSum = 15;
    var html = '';
    for(var i=1; i<=mSum; i++)
    {
        html += '<div id="bar_';
        html += i;
        html += '" class="chart_row"></div>';
    }
    $('#chart_box').html(html);

    var tagegory_datas=['rate'];
    var series_datas=[];
    var m_datas = [[50],[20],[68]];
    for(var i=1;i<=3;i++)
    {
        var m_name = 'class'+i;
        var item = {
            name:m_name,
            type:'bar',
            barWidth:11,
            data:m_datas[i-1],
        };
        series_datas.push(item);
    }

    for(var i=1; i<=mSum ;i++)
    {
        var div_id = 'bar_' + i;
        horizontal_bar(tagegory_datas,series_datas,div_id);
    }
    $('#bar_1').css('display','block');
}
function horizontal_bar(category_datas,series_datas,chart_id){

    var showbar = function()
    {
        require.config
        ({paths:{echarts:'/static/js/echarts/'}});
        require( ['echarts','echarts/chart/bar'],

            function(This){
                var myChart = This.init(document.getElementById(chart_id));
                var option = {

                    tooltip:{
                        show:true,
                    },
                    grid:{
                        show:false,
                        borderWidth:0,
                        x:0,
                        y:5,
                        x2:0,
                        y2:5
                    },
                    legend:{
                        show:false,
                        data:[
                            {name:'class1'},
                            {name:'class2'},
                            {name:'class3'},
                        ],
                        textStyle:{
                            color:'#666',
                        }
                    },
                    xAxis:[
                        {
                            show: false,
                            type:'value',
                            min:0,
                            max:100,
                        }
                    ],
                    yAxis:[
                        {
                            show:false,
                            type:'category',
                            data:category_datas,
                        }
                    ],
                    series:series_datas,
                };
                myChart.setOption(option);
            }
        )
    }();
}
function expand_dfs(treeNode)
{
    if(treeNode)
    {
        var node_id = '#' + treeNode.tId +'_a';
        var display = $(node_id).css('display');
        var tip = display;
        if(tip)
        {
            var nodestr = treeNode.tId;
            var no = nodestr.substring(6,nodestr.length);
            $div_bar = $('#bar_'+no);
            $div_bar.css('display','block');
        }
        var childrens = treeNode.children;
        for (var id in childrens) {
            expand_dfs(childrens[id]);
        }
    }
}
function collapse_dfs(treeNode)
{
    if(treeNode)
    {
        var childrens = treeNode.children;
        for (var id in childrens) {
            var node_id = '#' + childrens[id].tId +'_a';
            var display = $(node_id).css('display');
            var tip = display;
            if(tip)
            {
                var nodestr = childrens[id].tId;
                var no = nodestr.substring(6,nodestr.length);
                $div_bar = $('#bar_'+no);
                $div_bar.css('display','none');
            }
            collapse_dfs(childrens[id]);
        }
    }
}

转载于:https://www.cnblogs.com/mypsq/p/6125741.html