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);
    })