在Chrome和Safari上不呈现树状图

Question

我想在生态系统上造一棵树。这棵树在Firefox上加载得很好。树生成的JS代码如下：

        var blastResults = JSON.parse(result);
        console.log(JSON.stringify(blastResults, null, 2));

        var blastResultsDiv = document.getElementById("blastResults");
        for (var i = 0; i < blastResults.length; i++) {
            var description = document.createElement("p");
            description.className = "h5";
            description.innerHTML = blastResults[i].description;
            blastResultsDiv.appendChild(description);

            var chart = document.createElement("div");
            chart.className = "chart";
            var resultChart = echarts.init(chart);
            var data = blastResults[i].tree;

            resultChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',

                        data: [data],

                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 7,
                        initialTreeDepth: 9,

                        label: {
                            normal: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 9
                            }
                        },

                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            });
            blastResultsDiv.appendChild(chart);

图生成的示例JSON结果如下所示：

[{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":{"name":"Escherichia coli"}，{“名称”：“大肠埃希菌。MOD1 1-EC6300 6300“}，”名称“：”大肠埃希菌“}，{”儿童“：{”名称“：”志贺氏菌“}}，{”名称“：”志贺氏菌“}}，{”名称“：”志贺氏菌“}}，{”名称“：”志贺氏菌“}，{”名“：”志贺氏菌“}，{”儿童“：{”名“：”沙门氏菌“}}，”名称“：”沙门氏菌“}，”名称“：”肠杆菌科“}，{”名称“：”肠杆菌科“}]，]“名称”：“γ蛋白细菌”}、“名称”：“蛋白质细菌”}、“名称”：“细菌”}、“描述”：“噬菌体N4受体”、外膜亚单位大肠杆菌str。K-12 substr.{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":{"name":"Escherichia coli"}、“MG1655"}、”名称“：”大肠埃希菌“}、{”儿童“：{”名“：”Shigella sonnei"}、“名称”：“Shigella”}、{“儿童”：{“name”：“Kluyvera intermedia"}、”name“：”Kluyvera intermedia“}、”MG1655“：”Kluyvera“}{“儿童”：{“名称”：“雪铁龙杆菌”}}、“名称”：“雪铁龙杆菌”}]、“名称”：“肠杆菌科”}、{“儿童”：{“名”：“物理杆菌”}、“物理杆菌”}、“名称”：“肠杆菌”}、“名称”：“Gammaproteobacteria”}}、"name":"Gammaproteobacteria"}]、“name”：“细菌”}、“name”：“细菌”}、"description":“有毒膜蛋白大肠杆菌str”。K-12 substr.{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":{"name":"Escherichia coli"}、“MG1655"}、”名称“：”MG1655“}、”名称“：”肠杆菌科“}、”名称“：”肠杆菌科“}、”名称“：”肠杆菌“}、”名称“：”蛋白质细菌“}、”名称“：”细菌“}，“说明”：“操纵子领导肽大肠杆菌str。K-12 substr.MG1655"}]

如果需要更多的信息，请告诉我。提前谢谢。

Answer 1

先尝试追加DOM，然后再添加echarts.init(DOM)

因为如果DOM没有实际呈现，则此DOM的clientWidth、clientHeight等于0，这是echarts用于init画布的。

请查看此演示：

​

         var result = '[{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"},{"name":"Escherichia sp. MOD1-EC6300"}],"name":"Escherichia"},{"children":[{"name":"Shigella boydii"},{"name":"Shigella sonnei"},{"name":"Shigella dysenteriae"},{"name":"Shigella flexneri"}],"name":"Shigella"},{"children":[{"name":"Salmonella enterica"}],"name":"Salmonella"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" bacteriophage N4 receptor, outer membrane subunit [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"},{"children":[{"name":"Shigella sonnei"}],"name":"Shigella"},{"children":[{"name":"Kluyvera intermedia"}],"name":"Kluyvera"},{"children":[{"name":"Citrobacter sedlakii"}],"name":"Citrobacter"}],"name":"Enterobacteriaceae"},{"children":[{"name":"Phytobacter ursingii"}],"name":"Phytobacter"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" toxic membrane protein [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" thr operon leader peptide [Escherichia coli str. K-12 substr. MG1655]"}]' ;

    var blastResults = JSON.parse(result);
    var blastResultsDiv = document.querySelector('#blastResultsDiv');
   
    for (var i = 0; i < blastResults.length; i++) {
        var description = document.createElement("p");
        description.className = "h5";
        description.innerHTML = blastResults[i].description;
      	blastResultsDiv.appendChild(description);

        var chart = document.createElement("div");
        chart.className = "chart";
        blastResultsDiv.appendChild(chart);
        var resultChart = echarts.init(chart);
        var data = blastResults[i].tree;
        let option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: [data],

                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',

                    symbolSize: 7,
                    initialTreeDepth: 9,

                    label: {
                        normal: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        }
                    },

                    leaves: {
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        };
        
        resultChart.setOption(option);
         
 }

.chart {
  width: 100%;
  height: 200px;
}

<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="blastResultsDiv" ></div>
      </body>
    </html>

​