多个series树图都设置roam，无法同时移动或缩小ECharts Gallery

20:11:45图表已生成
代码
let guquan = {
                    "kg": {
                        "KeyNo": "69e127d934fe6ba84b6cc093ceb3243f",
                        "Names": [{
                            "Org": 0,
                            "Name": "银承互联网金融信息服务(南京)有限公司",
                            "Oper": {
                                "Org": 2,
                                "Name": "曹石花",
                                "KeyNo": "p87aa1ddd977c6af5f360b395bb89691",
                                "HasImage": false,
                                "OperType": 1,
                                "CompanyCount": 2,
                                "ProvinceInfo": "[{\"P\":\"JS\",\"C\":2,\"N\":\"江苏银承网络科技股份有限公司\"}]"
                            },
                            "Type": 0,
                            "KeyNo": "f4042c81ca09828dae54028ce91cb5f2",
                            "Level": "1",
                            "Percent": "",
                            "EconKind": "有限责任公司（法人独资）",
                            "ImageUrl": "https://qccdata.qichacha.com/AutoImage/f4042c81ca09828dae54028ce91cb5f2.jpg?x-oss-process=image/resize,w_120",
                            "StartDate": 1411574400,
                            "RegistCapi": "1000万元人民币",
                            "ShortStatus": "在业",
                            "PercentTotal": "100%"
                        }],
                        "NameCount": 1,
                        "CompanyName": "江苏银承网络科技股份有限公司"
                    },
                    "kzr": {
                        "KeyNo": "69e127d934fe6ba84b6cc093ceb3243f",
                        "UpdateTime": "2019-02-19 18:13:24",
                        "CompanyName": "江苏银承网络科技股份有限公司",
                        "ControllerData": {
                            "Name": "曹石金",
                            "KeyNo": "pce38c917369c1b44470e4738a41c8a9",
                            "Percent": "",
                            "PercentTotal": "80%"
                        }
                    },
                    "syr": {
                        "KeyNo": "69e127d934fe6ba84b6cc093ceb3243f",
                        "Names": [{
                            "Org": 2,
                            "Name": "曹石金",
                            "KeyNo": "pce38c917369c1b44470e4738a41c8a9",
                            "Percent": "",
                            "ImageUrl": "",
                            "PercentTotal": "80%",
                            "RelatedCount": 4
                        }],
                        "CompanyName": "江苏银承网络科技股份有限公司"
                    },
                    "touzi": {
                        "Name": "江苏银承网络科技股份有限公司",
                        "DetailList": [{
                            "Org": 0,
                            "Name": "银承互联网金融信息服务(南京)有限公司",
                            "Tags": [],
                            "KeyNo": "f4042c81ca09828dae54028ce91cb5f2",
                            "Level": 1,
                            "Percent": "100.00%",
                            "DetailList": [],
                            "ShouldCapi": "1000",
                            "CompanyCode": "",
                            "DetailCount": 0,
                            "ShortStatus": "在业",
                            "PercentTotal": "100.00%",
                            "StockRightNum": ""
                        }]
                    },
                    "gudong": {
                        "Name": "江苏银承网络科技股份有限公司",
                        "DetailList": [{
                            "Org": 2,
                            "Name": "曹石金",
                            "Tags": [],
                            "KeyNo": "pce38c917369c1b44470e4738a41c8a9",
                            "Level": 1,
                            "Percent": "80.00%",
                            "DetailList": [],
                            "ShouldCapi": "800",
                            "CompanyCode": "",
                            "DetailCount": 0,
                            "ShortStatus": "",
                            "PercentTotal": "80.00%",
                            "StockRightNum": ""
                        }, {
                            "Org": 2,
                            "Name": "金艳",
                            "Tags": [],
                            "KeyNo": "pce0bd9100865577756db781dd5524b1",
                            "Level": 1,
                            "Percent": "16.00%",
                            "DetailList": [],
                            "ShouldCapi": "160",
                            "CompanyCode": "",
                            "DetailCount": 0,
                            "ShortStatus": "",
                            "PercentTotal": "16.00%",
                            "StockRightNum": ""
                        }, {
                            "Org": 2,
                            "Name": "强红军",
                            "Tags": [],
                            "KeyNo": "paa0da1bd87acd64cb9a1860212b3e40",
                            "Level": 1,
                            "Percent": "4.00%",
                            "DetailList": [],
                            "ShouldCapi": "40",
                            "CompanyCode": "",
                            "DetailCount": 0,
                            "ShortStatus": "",
                            "PercentTotal": "4.00%",
                            "StockRightNum": ""
                        }]
                    },
                    "status": 200
                }
                
function getData() {
    this.rootData = this.guquan
    this.shareHolderData = this.guquan.gudong
    this.investmentData = this.guquan.touzi
    this.transTree(this.shareHolderData, 1);
    this.initTree(this.shareHolderData);
    this.transTree(this.investmentData, 2);
    this.initTree(this.investmentData);
    this.drawEquityStructure()
}
function transTree(data,type){
    if(!data) return;
    data.children = data.DetailList
    data.DetailList = undefined
    data.treeId = this.treeId
    if(type === 2){
        data.isTouzi = true
    }
    let fontSize = 12;
    if(data.ShortStatus=='注销'||data.ShortStatus=='吊销'){
        data.Name = '【'+data.ShortStatus+'】'+data.Name;
    }
    if(data.Name.length>20){
        data.name = data.Name.substr(0,19)+'…';
        data.ltext = true;
    }else{
        data.name = data.Name;
    }
    if(data.Org==2 &&data.Name.length>8){
        data.name = data.Name.substr(0,7)+'…';
    }
    data.name = data.name.replace(/(.{10})(?=.)/g, '$1\n');
    data.symbol = 'rectangle';
    data.symbolSize= [146, 62];
    if(data.tag){
        data.symbolSize= [146, 82];
    }
    data.itemStyle =  {
        color: "#fff",
        borderWidth: "1",
        borderColor: "#ccc",
    }
    data.label = {
        show: true,
        position: "inside",
        fontStyle: "normal",
        fontFamily: "MicroSoft YaHei",
        color:'#333',
        fontSize: fontSize
    }
    data.emphasis = {
        itemStyle: {
            color: "rgb(255,255,255,0)",
            borderWidth: "1",
            borderColor: "rgba(255,255,255,0)",
        },
        label:{
            show:true,
            color: "rgb(255,255,255,0)",
            borderWidth: "1",
            borderColor: "rgba(255,255,255,0)",
        },
        lineStyle:{
            color: "rgb(255,255,255,0)",
            borderWidth: "1",
            borderColor: "rgba(255,255,255,0)",
        }
    }
    if(data.Org==2){
        data.symbol = 'rectangle';
        data.symbolSize= [146, 55];
        data.itemStyle =  {
            color: "#F3F9FE",
            borderWidth: "1",
            borderColor: "#128bed",
        };
        data.label = {
            show: true,
            position: "inside",
            color:'#333',
            fontFamily: "MicroSoft YaHei",
            fontSize: 14,
            fontStyle: "normal",
        }
        data.emphasis = {
            itemStyle: {
                color: "rgb(255,255,255,0)",
                borderWidth: "1",
                borderColor: "rgba(255,255,255,0)",
            },
            label:{
                show:true,
                color: "rgb(255,255,255,0)",
                borderWidth: "1",
                borderColor: "rgba(255,255,255,0)",
            }
        }
    }
    let children = data.children;
    if(children){
        for(let i=0;i<children.length;i++){
            this.transTree(children[i],type);
            children[i] = this.addTampArrow(children[i],fontSize);
        }
    }
    this.treeId++;
}

function addTampArrow(code,fontSize){
    let tamp = code;
    let Ratio = (!code.Percent||code.Percent=='0%')?'':code.Percent;
    if(Ratio){
        Ratio = (parseFloat(code.Percent.substr(0,code.Percent.length-1)).toFixed(4))*10000/10000+'%';
        tamp.ratio = Ratio;
    }
    let labelShow = (Ratio != '0%');
    code = {
        name:Ratio,
        symbol: 'triangle',
        symbolSize: [12, 12],
        symbolRotate:[180],
        tooltip: {
            show: true
        },
        itemStyle: {
            color: "#128bed",
            borderWidth:0,
        },
        label: {
            show: labelShow,
            position: "right",
            fontFamily: "MicroSoft YaHei",
            fontSize: fontSize,
            fontStyle: "normal",
        },
        emphasis: {
            itemStyle:{
                color: "#128bed",
                borderWidth:0,
            },
            label: {
                show: labelShow,
                position: "right",
                fontFamily: "MicroSoft YaHei",
                fontSize: fontSize,
                fontStyle: "normal",
            },
            lineStyle: {
                show: labelShow,
                position: "right",
                fontFamily: "MicroSoft YaHei",
                fontSize: fontSize,
                fontStyle: "normal",
            }
        },
        children:[tamp]
    }
    return code;
}

function initTree(data){
    if(!data) return;
    data.symbolSize = [data.name.length*16+80, 52];
    data.symbol = 'rectangle';
    data.itemStyle =  {
        color: "#fff",
        borderWidth: "1",
        borderColor: "#128bed",
    }
    data.label = {
        show:true,
        position: "inside",
        color:'#000',
        fontFamily: "MicroSoft YaHei",
        fontSize: 16,
        fontStyle: "normal",
    }
    data.emphasis = {
        itemStyle:{
            color: "rgba(255,255,255,0)",
            borderWidth: "1",
            borderColor: "#128bed00",
        },
        label: {
            show:true,
            color: "rgba(255,255,255,0)",
            borderWidth: "1",
            borderColor: "#128bed00",
        },
        lineStyle: {
            color: "rgba(255,255,255,0)",
            borderWidth: "1",
            borderColor: "#128bed00",
        }
    }
}

//股权穿透图
function drawEquityStructure(){
    this.myChart.hideLoading();
    let option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        title : {
            text: '',
        },
        series : [
        ]
    };
    let roam=true;
    if(this.shareHolderData){
        option.series.push({
            type: "tree",
            data: [this.shareHolderData],
            bottom: '50%',
            symbol:  "emptyCircle",
            orient: "BT",
            roam:true,
            leaves: {
                label: {
                    normal: {
                        show:true,
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'center'
                    }
                }
            },
        });
    }
    if(this.investmentData){
        option.series.push({
            type: "tree",
            data: [this.investmentData],
            top: '50%',
            symbol:  "emptyCircle",
            orient: "vertical",
            z:1,
            roam:roam,
            leaves: {
                label: {
                    normal: {
                        show:true,
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'center'
                    }
                }
            },
        })
    }
    this.myChart.setOption(option);
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
