Echarts 树形股权图

 

点击上图人员切换至下方股权关系图，点击的为公司则继续在该图展示被点击公司的公司股份结构图，点击股权关系图切换至上图公司股份结构图

 公司股份结构图：https://gallery.echartsjs.com/editor.html?c=xkiiaUN8q     (他人编写)

股权关系图：https://gallery.echartsjs.com/editor.html?c=xvLVfMXW2m   (他人编写)

他人写的股权穿透图

 

 

该图有一处无法满足我个人需求，点击子公司进行相应的操作。但是该方法不支持点击点击事件，因为点击区域由下图红色框树形设置的大小决定，当Size为1的时候则能够被点击的区域极小。

 

 

 以下修正后的代码可支持点击事件：https://gallery.echartsjs.com/editor.html?c=xpXuQej3au&v=2

只写了部分我认为比较重要的注释，以下为代码

var data2 = [{
        name: "马云",
        children: [{ //子集
            name: "北京国风信通科技有限公司",
            value: '控股',
            percent: '60%',
            money: '120万元'
        },
        {
            name: "北京阿里巴巴信息技术有限公司",
            value: '',
            percent: '1.43%',
            money: '800万元'
        },
        {
            name: "高德软件有限公司",
            value: '控股',
            percent: '67%',
            money: '16242.4242万元'
        }, {
            name: "杭州大井头贰拾贰号文化艺术有限公司",
            value: '控股',
            percent: '99%',
            money: '990万元'
        }
        ]
    }];

  var  option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        series: [{
            type: 'tree',
            name: '股权穿透图',
            edgeShape: 'polyline', //链接线是折现还是曲线
            orient: 'TB',//树形图的显示方向TB:从上往下显示
            data: data2,
            width: 1000,//树形图宽
            height: 200,//树形图高
            top: '30%',//树型图整体偏移
            left: '10%',//树型图整体偏移
            symbolSize: [150, 40],//设置自己选择区域的宽高
            symbol: 'rect',//子级选择区域的形状默认circle(圆形),rect矩形
            roam: true,//鼠标移到区块时会显示一个灰色背景的title，移动不同区域时是否开启滑动动画
            initialTreeDepth: 10,//树图初始展开的层级（深度），默认展开几层子节点
            itemStyle: {//symbol的样式
                color: '#fff',
                borderColor: '#fff',
                offset: [-150, 50]
            },
            label: {
                normal: {//蓝色框的配置
                    position: [-70, 30],//蓝色框的定位
                    verticalAlign: 'middle',
                    align: 'left',//框框的对其方向可以配合position定位到自己想要的位置
                    backgroundColor: '#0084ff',
                    color: '#fff',
                    padding: [15, 132],//内填充
                    borderWidth: 2,//边框宽度
                    borderColor: '#0070d9',
                    fontWeight: 'bold',
                    formatter: [
                        '{box|{b}}'
                    ].join('\n'),
                    rich: {
                        box: {
                            height: 30,
                            color: '#fff',
                            padding: [0, 5],
                            align: 'center',
                            fontWeight: 'bold',
                            fontSize: 16,

                        }
                    }
                },
            },
            leaves: {
                label: {
                    normal: {//子级框的配置
                        position: [-20, 30],//子级框的定位
                        verticalAlign: 'middle',
                        align: 'left',
                        backgroundColor: '#fff',
                        padding: [15, 40],
                        fontSize: 12,
                        fontWeight: 'normal',
                        width: 100,
                        borderColor: '#ccc',
                        borderWidth: 1,
                        formatter: function (param) {
                            console.log(param);
                            let money = '认缴金额：' + param.data.money;
                            let percent = param.data.percent;
                            let name = param.name.substring(0, 11) + '\n' + param.name.substring(11);
                            let konggu = param.value;
                            if (konggu.length === 0) {
                                return [
                                    `{percent|${percent}}`,
                                    `{name|${name}}`,
                                    `{money|${money}}`
                                ].join('\n');
                            } else {
                                return [
                                    `{konggu|${konggu}}`,
                                    `{percent|${percent}}`,
                                    `{name|${name}}`,
                                    `{money|${money}}`
                                ].join('\n');
                            }

                        },
                        rich: {
                            konggu: {
                                color: '#0f8bff',
                                padding: [-50, 10],
                                height: 18,
                                distance: 10,
                                align: 'left',
                                verticalAlign: 'top',
                                fontSize: 12,
                                borderWidth: 1,
                                fontWeight: 'normal',
                            },
                            percent: {
                                height: 18,
                                color: '#0f8bff',
                                padding: [-50, 10],
                                align: 'right',
                                verticalAlign: 'top',
                                fontSize: 12,
                                borderColor: 'red',
                                borderWidth: 0,
                                fontWeight: 'normal'
                            },
                            name: {
                                height: 18,
                                color: '#000',
                                padding: [0, 5],
                                align: 'center',
                                fontSize: 12,
                            },
                            money: {
                                height: 18,
                                color: 'DarkGray',
                                padding: [0, 5],
                                align: 'center',
                                fontSize: 12,
                                borderWidth: 2,
                                fontWeight: 'normal'
                            }
                        }
                    }
                }
            },
            lineStyle: {
                color: '#909090',

            },
            expandAndCollapse: false,//是否开启点击父节点，展开及收缩子节点
            animationDuration: 550,
            animationDurationUpdate: 750
        },]
    };
    myChart1.setOption(option);
    myChart1.on('click', function (params) {
        alert(111);
    })